@capillarytech/creatives-library 2.0.82 → 2.0.84

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

@@ -0,0 +1,10 @@
+// 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/v2Components/Pagination/_pagination.scss

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

package/v2Components/Pagination/index.js

@@ -0,0 +1,49 @@
+/**
+*
+* CardGrid
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React 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/v2Components/Pagination/tests/index.test.js

@@ -0,0 +1,10 @@
+// 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/v2Components/PreviewSideBar/_previewsidebar.scss

@@ -0,0 +1,28 @@
+.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/v2Components/PreviewSideBar/index.js

@@ -0,0 +1,150 @@
+/**
+*
+* PreviewSideBar
+*
+*/
+
+import PropTypes from 'prop-types';
+
+import React from 'react';
+import { CapButton } from '@capillarytech/cap-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, path) {
+    this.props.onEditClick(e, this.props.templateData._id, this.props.templateData.modeType, path);
+  }
+  render() {
+    console.log('preview sidebar', this.props);
+    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}`];
+        }
+      }
+    }
+    let path = '';
+    if (this.props.channel.toLowerCase() === 'wechat') {
+      path = this.props.templateData && this.props.templateData.definition && this.props.templateData.definition.msgcontent === "RICH_MEDIA_WECHAT" ? `/wechat/richmedia/edit/${this.props.templateData._id}` : `/wechat/edit/${this.props.templateData._id}`;
+    }
+    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 || ''}
+                templateData={this.props.templateData}
+              >
+              </TemplatePreview>
+              :
+              <TemplatePreview
+                content={content || ''}
+                channel={this.props.channel}
+                location={this.props.location}
+                charCounterEnabled={this.props.channel.toLowerCase() === 'sms'}
+                unicodeEnabled={this.props.channel.toLowerCase() === 'sms'}
+                templateData={this.props.templateData}
+              >
+              </TemplatePreview>
+            }
+            <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, path)} 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/v2Components/PreviewSideBar/messages.js

@@ -0,0 +1,33 @@
+/*
+ * 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/v2Components/PreviewSideBar/tests/index.test.js

@@ -0,0 +1,10 @@
+// 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/v2Components/Sidebar/_sidebar.scss

@@ -0,0 +1,115 @@
+#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;
+  }
+}

package/v2Components/Sidebar/index.js

@@ -0,0 +1,208 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+// import styled from 'styled-components';
+import { Accordion, Icon, Input, Button } from 'semantic-ui-react';
+import { FormattedMessage } from 'react-intl';
+import _ from 'lodash';
+import { Link } from 'react-router';
+import messages from './messages';
+import './_sidebar.scss';
+
+class Sidebar extends React.Component { // eslint-disable-line react/prefer-stateless-function
+  constructor(props) {
+    super(props);
+    this.state = {
+      isOpen: false,
+      activeItem: '',
+      activeIndex: 0,
+      menuItems: this.props.menuData,
+      searchText: '',
+      visible: true,
+    };
+    this.handleItemClick = this.handleItemClick.bind(this);
+    this.handleTitleClick = this.handleTitleClick.bind(this);
+    this.handleSearch = this.handleSearch.bind(this);
+    this.toggleSideNav = this.toggleSideNav.bind(this);
+    this.getLinkElement = this.getLinkElement.bind(this);
+    this.selectActiveLinkFromUrl = this.selectActiveLinkFromUrl.bind(this);
+  }
+
+  componentWillMount() {
+    this.selectActiveLinkFromUrl(this.props);
+  }
+
+  componentWillReceiveProps(nextProp) {
+    this.selectActiveLinkFromUrl(nextProp);
+    this.setState({ menuItems: nextProp.menuData });
+  }
+
+  getAccordian(content, keyValue) {
+    return (<Accordion key={keyValue}>{content}</Accordion>);
+  }
+
+  getAccordionTitle(title) {
+    return (<Accordion.Title>
+      <div className="header item">
+        <Icon name="dropdown" /> {title}
+      </div>
+    </Accordion.Title>);
+  }
+
+  getAccordionContent(links, keyValue) {
+    return (<Accordion.Content key={keyValue}>{links}</Accordion.Content>);
+  }
+
+  getLinkElement(to, text, value, isExternal) {
+    const selectedItem = (value && value.trim().toLowerCase() === this.state.activeItem) ? 'selected' : '';
+    if (text.toLowerCase().includes(this.state.searchText.toLowerCase())) {
+      if (isExternal) {
+        return ((text.toLowerCase().includes(this.state.searchText.toLowerCase())) ? <a key={to} className={`item menu-item ${selectedItem}`} href={to}>{text}</a> : '');
+      }
+      return (
+          (text.toLowerCase().includes(this.state.searchText.toLowerCase())) ?
+            <Link to={to} className={`item menu-item ${selectedItem}`} onClick={this.handleItemClick} key={to} title={text}>{text}</Link>
+              : ''
+      );
+    }
+    return '';
+  }
+
+  selectActiveLinkFromUrl(props) {
+    const activeRoute = props.router.routes[props.router.routes.length - 1];
+    const activeRouteName = (activeRoute.name && activeRoute.name.trim().toLowerCase()) || '';
+    let selectedItem = '';
+    let selectedIndex = -1;
+    _.forEach(props.menuData, (menuItem, menuIndex) => {
+      if (menuItem.items && typeof menuItem.items === 'object') {
+        _.forEach(menuItem.items, (menuData) => {
+          // console.log('Menua Data ', menuData, activeRouteName, menuItem);
+          if ((menuItem.id && menuData.id.toLowerCase() === activeRouteName.toLowerCase()) || (menuData.value.toLowerCase() === activeRouteName.toLowerCase())) {
+            selectedIndex = menuIndex;
+            selectedItem = activeRouteName.toLowerCase();
+          } else if (activeRouteName === 'assets') {
+            selectedIndex = menuIndex;
+            selectedItem = 'gallery';
+          }
+        });
+      } else if (menuItem.value.toLowerCase() === activeRouteName.toLowerCase()) {
+        selectedIndex = menuIndex;
+        selectedItem = activeRouteName.toLowerCase();
+      }
+    });
+    this.setState({ activeIndex: selectedIndex, activeItem: selectedItem });
+  }
+
+  toggleSideNav(e) {
+    e.preventDefault();
+    this.setState({ visible: !this.state.visible }, () => {
+      window.dispatchEvent(new Event('resize'));
+      if (!this.state.visible) {
+        document.getElementById('cap-sidebar').classList.add('sidebar-collapse');
+      } else {
+        document.getElementById('cap-sidebar').classList.remove('sidebar-collapse');
+      }
+    });
+  }
+
+  createAccordianElements(title, contentItems) {
+    const accordian = [];
+    accordian.push(this.getAccordionTitle(title));
+    const contentLink = contentItems.map((key) =>
+      this.getLinkElement(key.link, key.text, key.value, key.external),
+    );
+    accordian.push(this.getAccordionContent(contentLink));
+    return accordian;
+  }
+
+  createNavigationElement(menuItems) {
+    const navArray = [];
+    _.forEach(menuItems, (key, index) => {
+      const headerTitle = key.group;
+      const isCategory = Object.prototype.hasOwnProperty.call(key, 'categories');
+      if (isCategory) { // attach nested Accordion
+        const accordian = [];
+        const nestedAcordian = [];
+        accordian.push(this.getAccordionTitle(headerTitle));
+        const contentAccordian = this.getAccordian(this.createNavigationElement(key.categories), `nestedAccordian-${index}`);
+        nestedAcordian.push(contentAccordian);
+        const content = this.getAccordionContent(nestedAcordian, `content-${index}`);
+        accordian.push(content);
+        navArray.push(accordian);
+      } else { // attach items to existing accordian
+        const accordianElem = this.createAccordianElements(headerTitle, key.items);
+        navArray.push(accordianElem);
+      }
+    });
+    // const selectedItem = (this.state.activeItem === 'gallery') ? 'selected' : '';
+    // navArray.push(
+    //   <Link
+    //     to={'/assets'}
+    //     className={`item menu-item ${selectedItem} assetItem`}
+    //     key={'assets'}
+    //     title={'Gallery'}
+    //     onClick={(e) => this.handleItemClick(e)}
+    //   >Gallery</Link>
+    // );
+    return navArray;
+  }
+
+  handleOpen() {
+    this.setState({ isOpen: true });
+  }
+
+  handleClose() {
+    this.setState({ isOpen: false });
+  }
+
+  handleItemClick(e) {
+    this.setState({ activeItem: (e.target.text && e.target.text.trim().toLowerCase()) || '' });
+  }
+
+  handleTitleClick(e, i) {
+    this.setState({ activeIndex: this.state.activeIndex === i ? -1 : i });
+  }
+
+  handleSearch(e) {
+    this.setState({ searchText: e.target.value });
+  }
+
+
+  render() {
+    const visible = this.state.visible;
+    const push = !visible ? 'push' : '';
+    const collapse = !visible ? 'collapse' : '';
+    const toggle = visible ? 'hide' : '';
+
+    // const types = [{ text: 'Creatives', value: 'Creatives' }];
+    return (
+      <div className="sidebar-container">
+        <div className={`sidebar sidebar-width ${collapse}`}>
+          <div className="searchbar">
+            <FormattedMessage {...messages.inputPlaceholder}>{(message) => <Input icon="search" className="sidebar-search" placeholder={message} fluid onChange={this.handleSearch} />}</FormattedMessage>
+            <a href="" onClick={this.toggleSideNav}><i className="material-icons control-arrow">arrow_back</i></a>
+          </div>
+
+          <div className="menu-header">
+            <span className="menu-title"><FormattedMessage {...messages.menuTitle} /> </span>
+            {this.props.actionComponents}
+          </div>
+          <Accordion className="sidebar-accordian" activeIndex={this.state.activeIndex} onTitleClick={this.handleTitleClick}>
+            {this.props.menuData && this.createNavigationElement(this.props.menuData)}
+          </Accordion>
+        </div>
+        <div className={`togglebar ${toggle} ${push}`}>
+          <Button icon className="btn-toggle" onClick={this.toggleSideNav}>
+            <Icon name="bars" />
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+Sidebar.propTypes = {
+  menuData: PropTypes.array.isRequired,
+  actionComponents: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+};
+
+export default Sidebar;

package/v2Components/Sidebar/messages.js

@@ -0,0 +1,21 @@
+/*
+ * Sidebar Messages
+ *
+ * This contains all the text for the Sidebar component.
+ */
+import { defineMessages } from 'react-intl';
+
+export default defineMessages({
+  inputPlaceholder: {
+    id: 'app.components.Sidebar.input.placeholder',
+    defaultMessage: 'Search...',
+  },
+  menuTitle: {
+    id: 'app.components.Sidebar.menuTitle',
+    defaultMessage: 'Menu',
+  },
+  creatives: {
+    id: 'app.components.Sidebar.creatives',
+    defaultMessage: 'Creatives',
+  },
+});

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

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