@capillarytech/creatives-library 0.1.32 → 1.0.0

package/components/TemplatePreview/index.js

@@ -1,174 +0,0 @@
-/**
-*
-* TemplatePreview
-*
-*/
-
-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');
-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);
-    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 = 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.parts;
-      }
-      //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'&&
-          <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">
-              {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>
-          )
-        }
-        {
-          channel && channel.toLowerCase() === 'line' ? (
-            <div className="shell align-center" id="sms-preview">
-              <img className="preview-image" src={wechatBody} alt="Preview is being generated"/>
-              <div className="msgContainer">
-                <div className="sms-icon" style={{ width: '25px', height: '25px', background: '#2E89DF' }}></div>
-                <div className="message-pop align-left" style={{ background: '#ffffff', color: '#333333' }}>
-                  { (content && content.bodyImage) ? <img src={content.bodyImage} alt="ddd" style={{maxWidth: '100%'}}/> : '' }
-                  { (content && content.bodyText) ? content.bodyText : ''}
-                </div>
-              </div>
-              { (content && content.bodyText) ? <p style={{fontSize: 16, fontWeight: "bold"}}>Chars Count: {content.bodyText.length} / (1600)</p> : '' }
-            </div>
-          ) : ''
-        }
-        {
-          this.props.charCounterEnabled && !_.isEmpty(smsDetails) ?
-            <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>
-    );
-  }
-}
-TemplatePreview.propTypes = {
-  content: PropTypes.oneOfType([
-    PropTypes.object,
-    PropTypes.string,
-  ]),
-  channel: PropTypes.string,
-  charCounterEnabled: PropTypes.bool,
-  location: PropTypes.object,
-  intl: intlShape.isRequired,
-  device: PropTypes.string,
-  unicodeEnabled: PropTypes.bool,
-};
-
-export default (injectIntl(TemplatePreview));

package/components/TemplatePreview/messages.js

@@ -1,29 +0,0 @@
-/*
- * 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",
-  },
-  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/components/TemplatePreview/tests/index.test.js

@@ -1,10 +0,0 @@
-// 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

@@ -1,59 +0,0 @@
-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: 10005;
-`;
-
-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

@@ -1,13 +0,0 @@
-/*
- * 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

@@ -1,10 +0,0 @@
-// 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

@@ -1,108 +0,0 @@
-/**
-*
-* 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

@@ -1,13 +0,0 @@
-/*
- * 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

@@ -1,10 +0,0 @@
-// 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

@@ -1,46 +0,0 @@
-.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

@@ -1,112 +0,0 @@
-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

@@ -1,29 +0,0 @@
-/*
- * 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

@@ -1,10 +0,0 @@
-// 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

@@ -1,24 +0,0 @@
-/**
- * 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

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