@capillarytech/creatives-library 0.0.1

package/components/TemplatePreview/index.js

@@ -0,0 +1,126 @@
+/**
+*
+* TemplatePreview
+*
+*/
+
+import React, {PropTypes} from 'react';
+import _ from 'lodash';
+import { injectIntl, intlShape} from 'react-intl';
+// import styled from 'styled-components';
+
+import './_templatePreview.scss';
+import * as charCount from '../../utils/smsCharCount';
+import messages from './messages';
+const smsIcon = require('./assets/images/user-icon.svg');
+const wechatBody = require('./assets/images/WECHAT_5x.png');
+const smsBody = require('./assets/images/mobile.svg');
+const androidPushMessagePhone = require('./assets/images/androidPushMessage.svg');
+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;
+    const channel = this.props.channel;
+    let smsDetails = {};
+    // let smsText = '';
+    if (this.props.content && this.props.charCounterEnabled) {
+      smsDetails = charCount.updateCharCount(this.props.content);
+      //smsText = this.props.intl.formatMessage(messages.previewGenerationMessage);
+      //console.log('message text', smsText);
+    }
+    const type = this.props.location && this.props.location.query.type ? this.props.location.query.type : '';
+    let iosActions = [];
+    if (channel.toLowerCase() === "mobilepush") {
+      iosActions = _.map(content.actions, (action) => {
+        if (action.label) {
+          return (<div className="actions">
+            <span className="action">{action.label.toUpperCase()}</span>
+          </div>);
+        }
+        return undefined;
+      });
+    }
+    return (
+      <div className={`preview-container ${type === 'embedded' ? 'embedded-preview' : ''}`}>
+        { channel && (channel.toLowerCase() === 'sms' || 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">
+              {this.props.channel.toLowerCase() === 'wechat' ? <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div> : <img className="sms-icon" src={smsIcon} alt="Sms icon" />}
+              <div className="message-pop align-left" style={{ background: `${this.props.channel.toLowerCase() === 'wechat' ? '#ffffff' : '#3F51B5'}`, color: `${this.props.channel.toLowerCase() === 'wechat' ? '#333333' : '#ffffff'}`}}>{content}
+              </div>
+            </div>
+          </div>
+          ) : ''
+        }
+        { channel && channel.toLowerCase() === 'mobilepush' &&
+          (<div className="shell align-center" id="mobilepush-preview">
+            <img className="preview-image" src={this.props.device === "android" ? androidPushMessagePhone : iPhonePushMessagePhone} alt="Preview is being generated"/>
+              {(!!content.header || !!content.bodyText || !!content.bodyImage) &&
+                <div className={`${this.props.device}-push-message-Container`}>
+                  {this.props.device === "android" ?
+                    <div className="message-pop align-left">
+                      <div className="app-name">
+                        <span className="app-icon"></span> {content.appName ? content.appName : "App name"}
+                      </div>
+                      <div className="title">
+                        {content.header}
+                      </div>
+                      <div className="body-text">
+                        {content.bodyText}
+                      </div>
+                      {content.bodyImage && <div className="body-image">
+                        <img src={content.bodyImage} alt={content.bodyText} />
+                      </div>}
+                      {content.actions.filter((action) => action.label).length &&
+                        <div className="actions">
+                          {_.map(content.actions, (action) => !!action.label &&
+                            <span className="action">{action.label && action.label.toUpperCase()}</span>)}
+                        </div>
+                      }
+                    </div>
+                    :
+                    <div className="message-pop align-left">
+                      <div className="app-name">
+                        <span className="app-icon"></span>{content.appName ? content.appName : "App name"} <i className="material-icons">close</i>
+                      </div>
+                      {content.bodyImage && <div className="body-image">
+                        <img src={content.bodyImage} alt={content.bodyText}/>
+                      </div>}
+                      <div className="title">
+                        {content.header}
+                      </div>
+                      <div className="body-text">
+                        {content.bodyText}
+                      </div>
+                      {content.actions.filter((action) => action.label).length && iosActions}
+                    </div>
+                  }
+                </div>
+              }
+          </div>
+          )
+        }
+        {
+          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>
+    );
+  }
+}
+TemplatePreview.propTypes = {
+  content: PropTypes.oneOfType([
+    PropTypes.object,
+    PropTypes.string,
+  ]),
+  channel: PropTypes.string,
+  charCounterEnabled: PropTypes.bool,
+  location: PropTypes.object,
+  intl: intlShape.isRequired,
+  device: PropTypes.string,
+};
+
+export default (injectIntl(TemplatePreview));

package/components/TemplatePreview/messages.js

@@ -0,0 +1,21 @@
+/*
+ * TemplatePreview Messages
+ *
+ * This contains all the text for the TemplatePreview component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  previewGenerationMessage: {
+    id: 'app.components.TemplatePreview.previewGenerationMessage',
+    defaultMessage: "Preview is being generated",
+  },
+  sms: {
+    id: 'app.components.TemplatePreview.sms',
+    defaultMessage: "SMS",
+  },
+  characters: {
+    id: 'app.components.TemplatePreview.characters',
+    defaultMessage: "Characters",
+  },
+});

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

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

package/components/Toastr/index.js

@@ -0,0 +1,59 @@
+import React, { PropTypes } from 'react';
+import styled from 'styled-components';
+import { messagePositionConfig } from '../../config/toastr';
+import ToastrMessage from '../ToastrMessage';
+
+// import { FormattedMessage } from 'react-intl';
+// import messages from './messages';
+
+const StyledMessageContainer = styled.div`
+  position: fixed;
+  width: 320px;
+  transition: all .2s ease-out;
+  font-family: open-sans,sans-serif;
+  margin-top: 64px;
+  margin-right: 32px;
+  z-index: 9999;
+`;
+
+class Toastr extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(prop) {
+    super(prop);
+    this.state = {
+      percentCompleted: 0,
+      percCompleted: {},
+    };
+    this.percCompleted = 0;
+    this.currentTime = 0;
+    this.closeMessagePopup = this.closeMessagePopup.bind(this);
+  }
+
+  closeMessagePopup(messageIndex) {
+    this.props.handleRemoveMessage(messageIndex);
+  }
+
+  render() {
+    return (
+      <StyledMessageContainer style={{ ...messagePositionConfig[this.props.position] }}>
+        {this.props.messagesList.map((message) => {
+          console.log('Messages', message);
+          return <ToastrMessage key={message.messageId} timeout={this.props.timeout} messageId={message.messageId} title={message.title} text={message.text} type={message.type} handleMessageClose={this.closeMessagePopup} hideProgressBar={message.hideProgressBar} />;
+        })}
+      </StyledMessageContainer>
+    );
+  }
+}
+
+Toastr.propTypes = {
+  messagesList: PropTypes.array.isRequired,
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  position: PropTypes.string,
+  handleRemoveMessage: PropTypes.func,
+};
+
+Toastr.defaultProps = {
+  type: 'info',
+  timeout: '4',
+  position: 'bottom right',
+};
+export default Toastr;

package/components/Toastr/messages.js

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

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

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

package/components/ToastrMessage/index.js

@@ -0,0 +1,108 @@
+/**
+*
+* ToastrMessage
+*
+*/
+
+import React, { PropTypes } from 'react';
+import { Progress } from 'semantic-ui-react';
+import styled from 'styled-components';
+import { messageTypeConfig } from '../../config/toastr';
+
+const StyledMessageWrapper = styled.div`
+  background: #f9f9fa;
+  transition: all .2s fade-out;
+  -webkit-box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.39);
+  -moz-box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.39);
+  box-shadow: 2px 2px 10px -1px rgba(0,0,0,0.39);
+  border-radius: 5px;
+`;
+const StyleIcon = styled.i`
+  float: right;
+  cursor: pointer;
+  fontSize: 16px;
+`;
+const MessageContent = styled.div`
+  padding-left: 14px;
+`;
+
+const MessageHeader = styled.div`
+  padding-left: 14px;
+  font-weight: bold;
+  font-family: proxima-nova,sans-serif;
+`;
+
+const StyledMessageType = styled.div `
+  position: absolute;
+  width: 10px;
+  height: 100%;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+`;
+
+class ToastrMessage extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(prop) {
+    super(prop);
+    this.state = { percent: 0 };
+    this.intervalId = null;
+    this.closeMessagePopup = this.closeMessagePopup.bind(this);
+  }
+
+  componentDidMount() {
+    const distance = 100 / ((this.props.timeout - 500) / 100);
+    if (this.props.timeout && this.props.timeout > 500) {
+      this.intervalId = setInterval(() => {
+        const percent = this.state.percent + distance;
+        this.setState({ percent: percent < 100 ? percent : 100 });
+      }, 100);
+    }
+  }
+
+  componentDidUpdate() {
+    if (this.state.percent >= 100 && this.intervalId) {
+      this.props.handleMessageClose(this.props.messageId);
+      clearTimeout(this.intervalId);
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.intervalId) {
+      clearTimeout(this.intervalId);
+    }
+  }
+
+  closeMessagePopup(messageIndex) {
+    this.props.handleMessageClose(messageIndex);
+  }
+
+
+  render() {
+    return (
+      <StyledMessageWrapper key={this.props.messageId}>
+        <StyledMessageType style={{ ...messageTypeConfig[this.props.type] }} />
+        <div style={{ padding: `${16}px` }}>
+          <MessageHeader>
+            { this.props.title ? <span style={{ fontSize: `${20}px` }}>{this.props.title}</span> : '' }
+            <StyleIcon className="material-icons" onClick={() => this.closeMessagePopup(this.props.messageId)}>close</StyleIcon>
+          </MessageHeader>
+          <MessageContent>
+            {this.props.text}
+          </MessageContent>
+        </div>
+        {(this.props.timeout > 0 && !this.props.hideProgressBar) ? <Progress style={{ transition: `${0.4}s linear` }} percent={this.state.percent} attached="bottom" /> : ''}
+      </StyledMessageWrapper>
+    );
+  }
+}
+
+ToastrMessage.propTypes = {
+  messageId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
+  title: PropTypes.string,
+  text: PropTypes.string,
+  type: PropTypes.string,
+  handleMessageClose: PropTypes.func,
+  hideProgressBar: PropTypes.bool,
+};
+
+export default ToastrMessage;

package/components/ToastrMessage/messages.js

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

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

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

package/components/TopBar/_topbar.scss

@@ -0,0 +1,46 @@
+.ui.navbar.menu {
+  height: 40px !important;
+}
+.ui.menu.navbar .item>img.logo{
+  height: 27px !important;
+  padding-left: 0!important;
+  margin: 0 auto;
+  max-width: 200px;
+}
+.ui.menu.navbar .ui.selection.dropdown{
+  height: 40px !important;
+}
+
+.ui.menu .ui.dropdown .menu>.selected.item {
+  background: #151821;
+}
+.org-list-drp-dwn .menu > .item{
+  height: 40px !important;
+}
+.ui.menu.navbar .ui.dropdown .menu>.item{
+  height: 40px !important;
+}
+
+.ui.search.selection.dropdown>input.search{
+  padding-left: 12px !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+}
+
+.ui.menu:not(.vertical) .right.item, .ui.menu:not(.vertical) .right.menu {
+  padding-right: 4px;
+}
+
+.ui.menu .item {
+  padding-left: 12px !important;
+  padding-right: 12px !important;
+}
+
+.ui.secondary.vertical.menu>.item {
+  margin-bottom: 0 !important;
+  padding: 8px 16px !important;
+}
+
+.ui.menu.navbar .item.dropdownItem {
+  padding: 0px !important;
+}

package/components/TopBar/index.js

@@ -0,0 +1,112 @@
+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 './_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 });
+    }
+  }
+
+  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>
+
+    );
+  }
+}
+
+TopBar.propTypes = {
+  userName: PropTypes.string,
+  proxyOrgList: PropTypes.array,
+  orgName: PropTypes.string,
+  orgID: PropTypes.number,
+  navigateToDashboard: PropTypes.func,
+  changeOrg: PropTypes.func,
+  logout: PropTypes.func,
+};
+
+export default TopBar;

package/components/TopBar/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/TopBar/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/config/app.js

@@ -0,0 +1,24 @@
+/**
+ * Created by vivek on 21/5/17.
+ */
+const config = {
+  production: {
+    api_endpoint: '/arya/api/v1/creatives',
+    auth_endpoint: '/arya/api/v1/auth',
+    login_url: 'auth/login',
+    dashboard_url: '/sms',
+  },
+  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',
+  },
+  testing: {
+    api_endpoint: '',
+    auth_endpoint: '',
+    login_url: '',
+  },
+};
+
+export default config;

package/config/path.js

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