@capillarytech/creatives-library 0.1.32 → 1.0.0

package/components/FormBuilder/messages.js

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

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

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

package/components/ImagePreview/_imagePreview.scss

@@ -1,63 +0,0 @@
-.modal-image-preview-wrapper {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-  background: rgba(0,0,0,0.56);
-  z-index: 10002;
-
-  #image-preview-container {
-    position: relative;
-    left: 40vw;
-    width: 60vw;
-    height: 100vh;
-    background: rgba(255,255,255,1);
-    // padding: 0 24px 0 24px;
-    overflow-y: auto;
-    // font-family: 'proxima-nova';
-
-    .image-preview-header {
-      display: inline-flex;
-      width: 100%;
-      padding: 16px 24px;
-      -webkit-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
-      -moz-box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
-      box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.12);
-      margin-bottom: 6px;
-      height: 56px;
-      align-items: center;
-      .heading-title {
-        font-size: 20px;
-        line-height: 24px;
-        font-weight: 600;
-        width: 97%;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        white-space: nowrap;
-
-        &:first-letter{
-          text-transform: capitalize;
-        }
-      }
-      .close-image-preview{
-        cursor: pointer;
-      }
-    }
-
-    #image-preview-content {
-      padding: 0 0px 0 24px;
-    }
-  }
-}
-
-.show-image-preview {
-  visibility: visible;
-  opacity: 1;
-  transition: visibility 1s linear 0.33s, opacity 0.33s linear;
-}
-.hide-image-preview {
-  visibility: hidden;
-  opacity: 0;
-  transition-delay: 0s;
-}

package/components/ImagePreview/index.js

@@ -1,50 +0,0 @@
-/**
-*
-* ImagePreview
-*
-*/
-
-import React, { PropTypes } from 'react';
-import { injectIntl, intlShape } from 'react-intl';
-import { Spin } from 'antd';
-import messages from './messages';
-import './_imagePreview.scss';
-
-class ImagePreview extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <div className={this.props.show ? "modal-image-preview-wrapper show-image-preview" : "modal-image-preview-wrapper hide-image-preview"}>
-        <div id="image-preview-container">
-          <div className="image-preview-header">
-            <div className="heading-title">
-              {this.props.header}
-            </div>
-            <div id="box-actions" style={{ float: 'right' }} onClick={this.props.handleClose}>
-              <i className="material-icons close-image-preview">close</i>
-            </div>
-          </div>
-
-          <div id="image-preview-content">
-            <Spin tip={this.props.intl.formatMessage(messages.loadingImage)} spinning={this.props.isLoading}>
-              {this.props.content}
-            </Spin>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-ImagePreview.propTypes = {
-  header: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.string,
-  ]).isRequired,
-  content: PropTypes.element.isRequired,
-  show: PropTypes.bool,
-  handleClose: PropTypes.func.isRequired,
-  isLoading: PropTypes.bool,
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ImagePreview);

package/components/ImagePreview/messages.js

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

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

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

package/components/PageHeader/_pageHeader.scss

@@ -1,22 +0,0 @@
-.pageHeader{
-  .pageHeader-wrapper{
-    padding-top: 8px;
-    padding-bottom: 8px;
-
-    .title-container {
-      padding-left: 0px !important;
-
-      .title {
-        font-size: 24px;
-        line-height: 32px;
-        color: #323B4E;
-        font-family: 'Proxima-Nova';
-        font-weight: 600;
-      }
-    }
-    .action-buttons{
-      text-align: right;
-      padding-right: 0 !important;
-    }
-  }
-}

package/components/PageHeader/index.js

@@ -1,36 +0,0 @@
-import React, { PropTypes } from 'react';
-// import styled from 'styled-components';
-
-import { Grid } from 'semantic-ui-react';
-import './_pageHeader.scss';
-
-// import { FormattedMessage } from 'react-intl';
-// import messages from './messages';
-
-class PageHeader extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  render() {
-    return (
-      <Grid className="pageHeader">
-        <Grid.Row className="pageHeader-wrapper">
-          <Grid.Column width={8} className="title-container">
-            <h2 className="title">{this.props.pageHeading}</h2>
-          </Grid.Column>
-          <Grid.Column className="action-buttons" width={8}>
-            {this.props.actionComponents}
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-    );
-  }
-}
-
-PageHeader.propTypes = {
-  // Need Formatted Message in pageHeading Props
-  pageHeading: PropTypes.oneOfType([
-    PropTypes.element,
-    PropTypes.string,
-  ]),
-  actionComponents: PropTypes.element,
-};
-
-export default PageHeader;

package/components/PageHeader/messages.js

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

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

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

package/components/Pagination/_pagination.scss

@@ -1,5 +0,0 @@
-.pagination-container{
-  height: calc(100vh - 182px);
-  overflow-y: auto;
-  overflow-x: hidden;
-}

package/components/Pagination/index.js

@@ -1,47 +0,0 @@
-/**
-*
-* CardGrid
-*
-*/
-
-import React, {PropTypes} from 'react';
-import './_pagination.scss';
-class Pagination extends React.Component { // eslint-disable-line react/prefer-stateless-function
-
-  componentDidMount() {
-    if (document.getElementsByClassName('pagination-container').length > 0) {
-      document.getElementsByClassName('pagination-container')[0].addEventListener('scroll', this.handleScroll);
-    }
-  }
-  handleScroll = (e) => {
-    const offset = 50;
-    if ((e.target.scrollHeight - e.target.scrollTop) - offset <= e.target.clientHeight) {
-      this.props.onPageChange();
-    }
-  };
-  componentDidUnMount() {
-    if ( document.getElementsByClassName(this.props.paginationContainer).length > 0) {
-      document.getElementsByClassName(this.props.paginationContainer)[0].removeEventListener('scroll', this.handleScroll);
-    }
-  }
-  render() {
-    return (
-      <div style={this.props.style ? this.props.style : {}}>
-        {this.props.children}
-      </div>
-    );
-  }
-}
-
-Pagination.propTypes = {
-  children: PropTypes.element,
-  onPageChange: PropTypes.func,
-  style: PropTypes.object,
-  paginationContainer: PropTypes.string,
-};
-
-Pagination.defaultProps = {
-  paginationContainer: "pagination-container",
-};
-
-export default Pagination;

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

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

package/components/PreviewSideBar/_previewsidebar.scss

@@ -1,28 +0,0 @@
-.seperator-line{
-  color: #e9e9e9;
-  border-style: solid;
-}
-
-.preview-info{
-  text-align: center;
-  color: #333333;
-  font-family: Open-Sans;
-  line-height: 24px;
-  font-size: 14px;
-}
-
-.preview-buttons{
-  width: 80px;
-  height: 32px;
-  text-align: center;
-  padding: 0;
-}
-
-.preview-action-container{
-  display:flex;
-  justify-content: flex-end;
-}
-.devices{
-  text-align: center;
-  margin: 16px;
-}

package/components/PreviewSideBar/index.js

@@ -1,146 +0,0 @@
-/**
-*
-* PreviewSideBar
-*
-*/
-
-import React, {PropTypes} from 'react';
-import moment from "moment";
-import { CapButton } from '@capillarytech/cap-react-ui-library';
-// import styled from 'styled-components';
-
-import { FormattedMessage } from 'react-intl';
-import { Button } from 'antd';
-import _ from 'lodash';
-import TemplatePreview from '../TemplatePreview';
-import SlideBox from '../SlideBox';
-import './_previewsidebar.scss';
-import messages from './messages';
-const ButtonGroup = Button.Group;
-
-class PreviewSideBar extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.goToEdit = this.goToEdit.bind(this);
-    this.goToDuplicate = this.goToDuplicate.bind(this);
-    this.changeDevice = this.changeDevice.bind(this);
-    this.state = {
-      device: "android",
-    };
-  }
-  componentWillReceiveProps(nextProps) {
-    if (nextProps.templateData.versions && nextProps.templateData.versions.base.ANDROID && nextProps.templateData.versions.base.IOS) {
-      this.setState({device: 'android'});
-    } else if (nextProps.templateData.versions && nextProps.templateData.versions.base.IOS) {
-      this.setState({device: 'ios'});
-    }
-  }
-  goToDuplicate() {
-    this.props.onDuplicateClick(this.props.templateData);
-    this.props.handleClose();
-  }
-  changeDevice(ev) {
-    this.setState({device: ev.target.value});
-  }
-  goToEdit(e) {
-    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType);
-  }
-  render() {
-    console.log('preview sidebar', this.props);
-    const modeTypeLine = this.props.templateData.modeType; // expected: (text or image)
-    let content = '';
-    if (this.props.channel.toLowerCase() === 'wechat') {
-      console.log('Template Infog ', this.props.templateData);
-      content = this.props.templateData.content;
-    } else if (this.props.channel.toLowerCase() === "mobilepush" && !_.isEmpty(this.props.templateData)) {
-      const data = this.state.device === "android" ? this.props.templateData.versions.base.ANDROID : this.props.templateData.versions.base.IOS;
-      content = {
-        header: data.title,
-        bodyText: data.message,
-        bodyImage: data.expandableDetails && data.expandableDetails.image,
-        actions: [],
-        appName: this.props.templateData.appName,
-      };
-      if (data.expandableDetails && data.expandableDetails.ctas && data.expandableDetails.ctas.length) {
-        if (this.state.device === "android" ) {
-          content.actions = _.map(data.expandableDetails.ctas, (cta) => ({label: cta.actionText}));
-        } else {
-          content.actions = [{label: data.expandableDetails.ctas[0].actionLabel}, {label: data.expandableDetails.ctas[0].actionLabel2}];
-        }
-      }
-    } else if (this.props.channel.toLowerCase() === "line") {
-      const isMsgReady = (this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base);
-      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].previewImageUrl ? this.props.templateData.versions.base.content.messages[0].previewImageUrl : '',
-        };
-      }
-    } else {
-      content = this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base ? this.props.templateData.versions.base['sms-editor'] : '';
-      for (let idx = 2; idx <= 5; idx += 1) {
-        if ((content === '' || !content) && this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base && this.props.templateData && this.props.templateData.versions && this.props.templateData.versions.base[`sms-editor${idx}`]) {
-          content = this.props.templateData.versions.base[`sms-editor${idx}`];
-        }
-      }
-    }
-    console.log('final content is', content);
-    return (
-      <SlideBox
-        header={this.props.templateData && this.props.templateData.name ? this.props.templateData.name : ''}
-        content={
-          <div>
-            <div className="devices">
-              {!_.isEmpty(this.props.templateData) && this.props.templateData.versions.base.ANDROID && this.props.templateData.versions.base.IOS &&
-              <ButtonGroup onClick={this.changeDevice}>
-                <CapButton type={this.state.device === "android" ? "primary" : "secondary"} value={"android"}>Android</CapButton>
-                <CapButton type={this.state.device === "iphone" ? "primary" : "secondary"} value={"iphone"}>IOS</CapButton>
-              </ButtonGroup>}
-            </div>
-            {this.props.channel.toLowerCase() === "mobilepush" ?
-              <TemplatePreview
-                device={this.state.device === "android" ? "android" : "iphone"}
-                channel={this.props.channel}
-                content={content || ''}
-              >
-              </TemplatePreview>
-              :
-              <TemplatePreview
-                content={content || ''}
-                channel={this.props.channel}
-                location={this.props.location}
-                charCounterEnabled={this.props.channel.toLowerCase() === 'sms'}
-                unicodeEnabled={this.props.channel.toLowerCase() === 'sms'}
-              >
-              </TemplatePreview>
-            }
-            <p className="preview-info"><FormattedMessage {...messages.lastModified} />: {moment(this.props.templateData).format('MM-DD-YYYY')}</p>
-            <p style={{marginBottom: '8px'}} className="preview-info"><FormattedMessage {...messages.uploadedBy} /> : {this.props.templateData.updatedByName}</p>
-            <hr className="seperator-line" />
-            <div className="preview-action-container" style={{margin: '16px'}}>
-              {this.props.channel.toLowerCase() === 'sms' && !this.props.embedded && <CapButton onClick={() => this.goToDuplicate()}className="preview-buttons" style={{marginRight: '8px'}} type="secondary"><FormattedMessage {...messages.duplicate} /></CapButton>}
-              <CapButton onClick={(e) => this.goToEdit(e)}className="preview-buttons" type="primary">{this.props.location.query.type === 'embedded' ? <FormattedMessage {...messages.select} /> : <FormattedMessage {...messages.edit} />}</CapButton>
-            </div>
-          </div>
-        }
-        show={this.props.showPreview}
-        handleClose={this.props.handleClose}
-      >
-      </SlideBox>
-    );
-  }
-
-}
-
-PreviewSideBar.propTypes = {
-  templateData: PropTypes.object.isRequired,
-  channel: PropTypes.string.isRequired,
-  showPreview: PropTypes.bool,
-  handleClose: PropTypes.func,
-  onEditClick: PropTypes.func,
-  onDuplicateClick: PropTypes.func,
-  location: PropTypes.object,
-  embedded: PropTypes.bool,
-};
-
-export default PreviewSideBar;

package/components/PreviewSideBar/messages.js

@@ -1,33 +0,0 @@
-/*
- * PreviewSideBar Messages
- *
- * This contains all the text for the PreviewSideBar component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  header: {
-    id: 'app.components.PreviewSideBar.header',
-    defaultMessage: 'This is the PreviewSideBar component !',
-  },
-  lastModified: {
-    id: 'app.components.PreviewSideBar.lastModified',
-    defaultMessage: 'Last Modified On',
-  },
-  uploadedBy: {
-    id: 'app.components.PreviewSideBar.uploadedBy',
-    defaultMessage: 'Last Modified By',
-  },
-  edit: {
-    id: 'app.components.PreviewSideBar.edit',
-    defaultMessage: 'Edit',
-  },
-  select: {
-    id: 'app.components.PreviewSideBar.select',
-    defaultMessage: 'Select',
-  },
-  duplicate: {
-    id: 'app.components.PreviewSideBar.duplicate',
-    defaultMessage: 'Duplicate',
-  },
-});

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

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

package/components/Sidebar/_sidebar.scss

@@ -1,115 +0,0 @@
-#cap-sidebar{
-  padding: 8px 0 8px 0;
-  max-width: 200px;
-  min-width: 200px;
-  width: 16%;
-  overflow-y: hidden;
-  // height: 100%;
-  // display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  // display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  // display: -ms-flexbox;      /* TWEENER - IE 10 */
-  // display: -webkit-flex;     /* NEW - Chrome */
-  // display: flex;
-  overflow-x: hidden;
-  .header.item{
-    padding-left: 8px !important;
-  }
-}
-
-.sidebar-container {
-  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
-  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
-  display: -ms-flexbox;      /* TWEENER - IE 10 */
-  display: -webkit-flex;     /* NEW - Chrome */
-  display: flex;
-  flex: 1;
-  -webkit-box-flex: 1;
-  -webkit-flex: 1;
-  -ms-flex: 1;
-}
-
-.sidebar-accordian .content .item.menu-item:hover{
-  margin-left: 0 !important;
-  text-indent: 0 !important;
-}
-.sidebar-accordian .content .item.menu-item.selected{
-  margin-left: 0 !important;
-  text-indent: 0 !important;
-}
-.ui.accordion.sidebar-accordian .content .item.selected{
-  background: #F2F3F7 !important;
-  padding-left: 40px !important;
-}
-
-.item.menu-item{
-  // margin-left: 0px;
-  padding-left: 40px !important;
-  border-left-width: 0 !important;
-  text-decoration: none;
-}
-.item.menu-item.selected{
-  border-left: 4px solid #2e89df !important;
-}
-
-.item.menu-item.assetItem{
-  padding-left: 28px !important;
-  line-height: 28px;
-  padding-top: 8px;
-  padding-bottom: 8px;
-}
-
-.ui.accordion.sidebar-accordian {
-  padding-top: 8px !important;
-  margin-left: 0;
-}
-
-.ui.accordion.sidebar-accordian .title{
-  font-size: 12px !important;
-  line-height: 32px !important;
-  padding-top: 0 !important;
-  padding-bottom: 0 !important;
-}
-
-.sidebar-width {
-  // width: 200px !important;
-  max-width: 250px;
-  min-width: 190px;
-  width: 200px;
-}
-.module-menu-header {
-  padding-top: 8px!important;
-  line-height: 32px!important;
-  font-size: 16px!important;
-  margin-left: 0!important;
-  padding-left: 8px;
-}
-
-// .searchbar {
-//   height: 32px;
-//   padding-left: 8px;
-// }
-
-.menu-header {
-  font-size: 12px!important;
-  line-height: 32px!important;
-  margin: 0!important;
-  padding: 0 0 0 8px!important;
-  width: 100%;
-}
-.menu-title {
-  flex: 0 0 90%!important;
-}
-
-.product-select-menu {
-  width: 100%;
-  padding-left: 2px;
-  background: #F2F3F7;
-  font-family: proxima-nova;
-  font-size: 16px !important;
-  font-weight: 600;
-
-  .ant-select-selection {
-    background: #F2F3F7;
-    border: none !important;
-  }
-}