@capillarytech/creatives-library 0.1.29 → 0.1.31

package/components/FormBuilder/_formBuilder.scss

@@ -64,3 +64,22 @@
 .ant-notification-notice-description {
   word-wrap: break-word;
 }
+
+.preview-chars{
+  margin-top: 8px;
+  div{
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px;
+    font-family: Open-Sans;
+    text-align: center;
+    width: 24px;
+    height: 24px;
+    line-height: 24px;
+    padding: 0 4px 4px 4px;
+    border: 0.5px solid;
+    &.invalid{
+      border-color: #F34F56;
+    }
+  }
+}

package/components/FormBuilder/index.js

@@ -9,7 +9,7 @@ import React, { PropTypes } from 'react';
 import { Label } from 'semantic-ui-react';
 import _ from 'lodash';
 import { Tabs, Row, Col, Table, Modal, notification} from 'antd';
-import { CapButton, CapInput, CapPopover, CapTextArea, CapCheckbox, CapRadio, CapRadioGroup, CapSelect, CapTable} from '@capillarytech/cap-react-ui-library';
+import { CapButton, CapInput, CapPopover, CapTextArea, CapCheckbox, CapRadio, CapRadioGroup, CapSelect, CapTable, CapColumn} from '@capillarytech/cap-react-ui-library';
 import TemplatePreview from '../../components/TemplatePreview';
 // import { CapCheckbox } from '@capillarytech/cap-react-ui-library/basic/checkbox';
 import TagList from '../../containers/TagList';
@@ -21,6 +21,7 @@ import CKEditor from "../../components/Ckeditor/";
 import EDMEditor from "../../components/Edmeditor";
 import CustomPopOver from '../../components/CustomPopOver';
 import './_formBuilder.scss';
+import {updateCharCount, checkUnicode} from "../../utils/smsCharCountV2";
 const TabPane = Tabs.TabPane;
 const {Column} = Table;
 // import styled from 'styled-components';
@@ -463,7 +464,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
         const content = this.state.formData[count][`sms-editor${index > 1 ? index : ''}`];
         const unicodeCheck = this.state.formData[count][`unicode-validity${index > 1 ? index : ''}`];
-        const ifUnicode = content && content !== '' ? charCount.checkUnicode(content) : false;
+        const ifUnicode = content && content !== '' ? checkUnicode(content) : false;
         console.log('characters are', ifUnicode, unicodeCheck);
         const tagValidationResponse = this.validateTags(content, tags, injectedTags);
         console.log('tag valid response', tagValidationResponse);
@@ -515,14 +516,17 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         }
       }
 
-      if ( (this.state.formData['0'].image !== undefined)){
+      if ( (this.state.formData['0'].image !== undefined) && (this.state.formData['0'].imagePreview !== undefined)){
         const imgContentLength = this.state.formData['0'].image.length;
-        if (imgContentLength < 1) {
+        const imgContentLengthPreview = this.state.formData['0'].imagePreview.length;
+        if ( (imgContentLength < 1) && (imgContentLengthPreview < 1) ) {
           console.log('line error validation image content is empty');
           errorData['0'].image = true;
+          errorData['0'].imagePreview = true;
           isValid = false;
         }else{
           errorData['0'].image = false;
+          errorData['0'].imagePreview = false;
         }
       }
       if(type !== 'embedded' && (!this.state.formData['template-name'] || this.state.formData['template-name'] === '')) {
@@ -1037,9 +1041,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
       const ifSkipped = this.skipTags(tagValue);
       if (ifSkipped) {
         ifSupported = true;
-        const missingTagIndex = response.missingTags.indexOf(tagValue);
-        if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
-          response.missingTags.splice(missingTagIndex, 1);
+        let isUnsubscribeSkipped = tagValue.indexOf("unsubscribe") != -1 ;
+        if (isUnsubscribeSkipped) {
+          const missingTagIndex = response.missingTags.indexOf("unsubscribe");
+          if(missingTagIndex != -1) { //skip regex tags for mandatory tags also
+            response.missingTags.splice(missingTagIndex, 1);
+          }
         }
       }
       ifSupported = ifSupported || this.checkIfSupportedTag(tagValue, injectedTags);
@@ -1047,6 +1054,9 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
         response.unsupportedTags.push(tagValue);
         response.valid = false;
       }
+      if (response.unsupportedTags.length == 0 && response.missingTags.length == 0 ) {
+        response.valid = true;
+      }
     }
     return response;
   }
@@ -1326,7 +1336,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           delete tempFormData[key];
         } else if (typeof element === "object") {
           _.forEach(element, (innerElement, innerKey) => {
-            if (innerKey !== "tabKey" && innerKey !== "base" && innerKey !== 'name' && this.formElements.indexOf(innerKey) === -1) {
+            if (innerKey !== "tabKey" && innerKey !== "base" && innerKey !== 'name' && innerKey !== 'imagePreview' && this.formElements.indexOf(innerKey) === -1) {
               delete tempFormData[key][innerKey];
             }
           });
@@ -2273,6 +2283,12 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             );
           }
           break;
+        case "contentPreview":
+          const content = isVersionEnable ? this.state.formData[this.state.currentTab - 1]['sms-editor'] : this.state.formData['sms-editor'];
+          const charList = updateCharCount(content).char_list;
+          columns.push(<CapColumn id={val.id} className={"preview-chars"} span={val.width}>
+            {charList.map((char) => char)}
+          </CapColumn>);
         case "checkbox":
           ifError = this.state.checkValidation && (isVersionEnable ? this.state.errorData[`${this.state.currentTab - 1}`][val.id] : this.state.errorData[val.id]);
           if (styling === 'semantic') {
@@ -2325,13 +2341,14 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
             return true;
           }
           content = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`sms-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id];
-
+          const unicodeEnabled = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`unicode-validity${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData['unicode-validity'];
           columns.push(
             <Col key="input" span={10}>
               <TemplatePreview
                 channel={val.channel ? val.channel : 'SMS'}
                 content={content}
                 charCounterEnabled={val.charCounterEnabled}
+                unicodeEnabled={unicodeEnabled}
               >
               </TemplatePreview>
             </Col>
@@ -2770,7 +2787,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
               return true;
             }
             content = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`sms-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id];
-
+            const unicodeEnabled = isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`unicode-validity${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData['unicode-validity'];
             columns.push(
               <Col key="input" span={23} offset={1}>
                 <TemplatePreview
@@ -2779,6 +2796,7 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
                   channel={val.channel ? val.channel : 'SMS'}
                   content={content}
                   charCounterEnabled={val.charCounterEnabled}
+                  unicodeEnabled={unicodeEnabled}
                 >
                 </TemplatePreview>
               </Col>
@@ -2786,10 +2804,10 @@ class FormBuilder extends React.Component { // eslint-disable-line react/prefer-
           }
             break;
           case "line-preview": {
-            console.log("lipak inside", this.state.formData['0'].image);
+            console.log("lipak inside imagePreview@@@", this.state.formData['0'].imagePreview);
             const content = {
               bodyText: isVersionEnable ? this.state.formData[`${this.state.currentTab - 1}`][`message-editor${this.state.currentTab > 1 ? this.state.currentTab : ''}`] : this.state.formData[val.id],
-              bodyImage: this.state.formData[`${this.state.currentTab - 1}`].image,
+              bodyImage: this.state.formData[`${this.state.currentTab - 1}`].imagePreview,
             };
             if (!this.state.formData[`${this.state.currentTab - 1}`]) {
               return true;

package/components/NewSidebar/_newsidebar.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/components/NewSidebar/index.js

@@ -0,0 +1,234 @@
+import React, { PropTypes } from 'react';
+// import styled from 'styled-components';
+import { Accordion, Icon, Button, Input } from 'semantic-ui-react';
+import { Select } from 'antd';
+import { FormattedMessage } from 'react-intl';
+import _ from 'lodash';
+import { Link } from 'react-router';
+import messages from './messages';
+import './_newsidebar.scss';
+
+const Option = Select.Option;
+
+class NewSidebar 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);
+    this.onProductChange = this.onProductChange.bind(this);
+  }
+
+  componentWillMount() {
+    this.selectActiveLinkFromUrl(this.props);
+  }
+
+  componentWillReceiveProps(nextProp) {
+    this.selectActiveLinkFromUrl(nextProp);
+    this.setState({ menuItems: nextProp.menuData });
+  }
+
+  onProductChange(value) {
+    const selectedProductIndex = _.findIndex(this.props.productMenuData, {value: value.toLowerCase()});
+    window.location = this.props.productMenuData[selectedProductIndex].url;
+    // console.log('On Product selected ', value, selectedProductIndex);
+  }
+
+  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' }];
+    const productOptions = [];
+    if (this.props.productMenuData.length > 1) {
+      _.forEach(this.props.productMenuData, (product) => {
+        productOptions.push(
+          <Option key={product.text} value={product.text}>{product.text}</Option>
+        );
+      });
+    }
+    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>
+          
+          { this.props.productMenuData.length > 1 ?
+            <Select className="icon product-select-menu" defaultValue={'CAMPAIGNS'} onChange={this.onProductChange}>
+              {productOptions}
+            </Select>
+            :
+            <div className="module-menu-header">{this.props.productMenuData[0].text}</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>
+    );
+  }
+}
+
+NewSidebar.propTypes = {
+  menuData: PropTypes.array.isRequired,
+  productMenuData: PropTypes.array.isRequired,
+  actionComponents: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
+};
+
+export default NewSidebar;

package/components/NewSidebar/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/components/NewSidebar/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);
+//   });
+// });

package/components/NewTopBar/_newtopbar.scss

@@ -0,0 +1,84 @@
+.ui.navbar.menu {
+  height: 40px !important;
+}
+.ui.menu.navbar .item>img.logo{
+  height: 1.5rem !important;
+  padding: 0!important;
+  margin: 0rem;
+  width: 2rem;
+}
+.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 {
+  
+// }
+
+.ui.secondary.vertical.menu>.item {
+  margin-bottom: 0 !important;
+  padding: 8px 16px !important;
+}
+
+.ui.menu.navbar .item.dropdownItem {
+  padding: 0px !important;
+}
+
+.navbarPopover {
+  left: 0 !important;
+  top: 40px !important;
+  padding-top: 0px !important;
+}
+.navbarPopover .ant-popover-arrow {
+  display: none;
+}
+.navbarPopover .ant-popover-inner-content {
+  padding: 0 !important;
+}
+.displayOrg {
+  color: white;
+  cursor: pointer;
+}
+.orgDetails {
+  display: flex;
+}
+.popoverTitle {
+  padding: 1rem 1rem 0.5rem 1rem;
+}
+.org-list-drp-dwn {
+  border-top: none !important;
+  border-left: none !important;
+  border-right: none !important;
+  height: 2.5rem;
+}
+.productOption {
+  height: 2rem;
+  padding-left: 1rem;
+}
+.navbarMenuOptions {
+  padding: 0 0 0 24px !important;
+  margin: 0 !important;
+}
+.navbarIcon {
+  color: white !important;
+  font-size: 1rem;
+}