@capillarytech/creatives-library 3.1.8 → 3.1.12

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.1.8",
+  "version": "3.1.12",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",
@@ -12,7 +12,7 @@
   },
   "license": "LicenseRef-LICENSE",
   "dependencies": {
-    "@babel/node": "^7.7.7",
+    "@babel/node": "^7.8.3",
     "@babel/polyfill": "7.4.3",
     "babel-cli": "^6.26.0",
     "chalk": "1.1.3",

package/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/_wechatRichmediaTemplatePrev.scss

@@ -68,7 +68,6 @@
     text-align: left;
 }
 .overflow-handle-preview {
-    height: 430px;
     overflow-y: auto;
 }
 .overflow-handle-preview-outbound {

package/v2Containers/WeChat/RichmediaTemplates/Create/_createRichmedia.scss

@@ -124,6 +124,9 @@
       cursor: not-allowed;
       color: #b3bac5;
     }
+    .cap-link-v2 {
+      max-height: 100%;
+    }
 
   }
 }

package/containers/Cap/messsages.js

@@ -1,63 +0,0 @@
-import { defineMessages } from 'react-intl';
-export default defineMessages({
-  "sms": {
-    id: 'reon.components.Cap.sms',
-    defaultMessage: 'SMS',
-  },
-  "wechat": {
-    id: 'reon.components.Cap.wechat',
-    defaultMessage: 'WeChat',
-  },
-  "gallery": {
-    id: 'reon.components.Cap.gallery',
-    defaultMessage: 'Gallery',
-  },
-  "creativesDashboard": {
-    id: 'reon.components.Cap.creativesDashboard',
-    defaultMessage: 'Creatives',
-  },
-  "creatives": {
-    id: 'reon.components.Cap.creatives',
-    defaultMessage: 'Creatives',
-  },
-  "campaigns": {
-    id: 'reon.components.Cap.campaigns',
-    defaultMessage: 'Campaigns',
-  },
-  "loyalty": {
-    id: 'reon.components.Cap.loyalty',
-    defaultMessage: 'Loyalty',
-  },
-  "member care": {
-    id: 'reon.components.Cap.memberCare',
-    defaultMessage: 'Member Care',
-  },
-  "workbench": {
-    id: 'reon.components.Cap.Workbench',
-    defaultMessage: 'WorkBench',
-  },
-  "store care": {
-    id: 'reon.components.Cap.storeCare',
-    defaultMessage: 'Store Care',
-  },
-  "store performance": {
-    id: 'reon.components.Cap.storePerformance',
-    defaultMessage: 'Store Performance',
-  },
-  "email": {
-    id: 'reon.components.Cap.email',
-    defaultMessage: 'Email',
-  },
-  "ebill": {
-    id: 'reon.components.Cap.ebill',
-    defaultMessage: 'Ebill',
-  },
-  "campaignsDashboard": {
-    id: 'reon.components.campaignsDashboard',
-    defaultMessage: 'Campaigns',
-  },
-  "campaignsHome": {
-    id: 'reon.components.campaignsHome',
-    defaultMessage: "Campaigns Home",
-  },
-});

package/v2Components/DateFilter/index.js

@@ -1,349 +0,0 @@
-/**
-*
-* DateFilter
-*
-*/
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-// import styled from 'styled-components';
-
-import { FormattedMessage } from 'react-intl';
-import { Popup, Input, Button, Grid, Checkbox, Dimmer, Loader } from 'semantic-ui-react';
-import DateRange from 'components/DateRange';
-import moment from 'moment';
-import _ from 'lodash';
-import messages from './messages';
-
-class DateFilter extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedDateRange: this.props.selectedDateRange,
-      showChartCompareOptions: this.props.isCompareSelected,
-      compareDateRange: this.props.compareDateRange,
-      selectedDateText: '',
-      isDateSelectorOpen: false,
-      loading: this.props.loading,
-      openCustomDatePicker: false,
-      compareCustomDateSelected: false,
-      customDateSelected: false,
-      pastStateData: {},
-      componentWidth: 270,
-    };
-    this.handleToggleDateSelector = this.handleToggleDateSelector.bind(this);
-    this.renderDateSelector = this.renderDateSelector.bind(this);
-    this.handleDateTypeClick = this.handleDateTypeClick.bind(this);
-    this.printSelectedDate = this.printSelectedDate.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-    this.handleChartCompareToggle = this.handleChartCompareToggle.bind(this);
-    this.handleCompareDateChange = this.handleCompareDateChange.bind(this);
-    this.handleCustomDatePickerCancel = this.handleCustomDatePickerCancel.bind(this);
-    this.handleDatePickerApply = this.handleDatePickerApply.bind(this);
-    this.compareDateValueSetting = this.compareDateValueSetting.bind(this);
-    this.handleApply = this.handleApply.bind(this);
-    this.restoreInitialState = this.restoreInitialState.bind(this);
-    this.storeInitialState = this.storeInitialState.bind(this);
-  }
-
-  componentWillMount() {
-    const dateText = this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType);
-    this.setState({ selectedDateText: dateText });
-    this.setState({ loading: false });
-    this.storeInitialState();
-  }
-
-  componentDidMount() {
-  }
-
-  componentWillReceiveProps(nextProp) {
-    this.setState({ selectedDateRange: nextProp.selectedDateRange, showChartCompareOptions: nextProp.isCompareSelected }, () => {
-      let dateText = this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType);
-      if (this.state.showChartCompareOptions) {
-        this.setState({ componentWidth: 450 });
-        dateText = `${dateText} vs ${this.printSelectedDate(this.state.compareDateRange.startDate, this.state.compareDateRange.endDate, this.state.compareDateRange.dateType, true)}`;
-      } else {
-        this.setState({ componentWidth: 270 });
-      }
-      this.setState({ selectedDateText: dateText });
-    });
-    this.storeInitialState();
-  }
-
-  storeInitialState() {
-    const stateData = _.cloneDeep(this.state);
-    const tmpState = {
-      selectedDateRange: stateData.selectedDateRange,
-      showChartCompareOptions: stateData.showChartCompareOptions,
-      compareDateRange: stateData.compareDateRange,
-    };
-    this.setState({ pastStateData: tmpState });
-  }
-
-  handleToggleDateSelector() {
-    this.setState({ isDateSelectorOpen: !this.state.isDateSelectorOpen });
-  }
-
-  handleDateTypeClick(specifier) {
-    const date = this.state.selectedDateRange;
-    if (specifier !== 'custom') {
-      date.dateType = specifier;
-      if (specifier === 'week') {
-        date.startDate = moment().isoWeekday(1);
-      } else {
-        date.startDate = moment().startOf(specifier);
-      }
-      date.endDate = moment();
-      this.setState({ selectedDateRange: date }, () => {
-        if (this.state.showChartCompareOptions) {
-          this.compareDateValueSetting(specifier);
-        }
-      });
-    } else {
-      this.setState({ customDateSelected: true, openCustomDatePicker: true });
-    }
-  }
-
-  printSelectedDate(startDate, endDate, specifier, isCompare) {
-    let specifierType = '';
-    if (isCompare) {
-      if (specifier === 'week') {
-        specifierType = 'Previous Week';
-      } else if (specifier === 'month') {
-        specifierType = 'Previous Month';
-      } else if (specifier === 'year') {
-        specifierType = 'Previous Year';
-      } else {
-        specifierType = 'Custom';
-      }
-    }
-    if (!isCompare) {
-      if (specifier === 'week') {
-        specifierType = 'WTD';
-      } else if (specifier === 'month') {
-        specifierType = 'MTD';
-      } else if (specifier === 'year') {
-        specifierType = 'YTD';
-      } else {
-        specifierType = 'Custom';
-      }
-    }
-
-    let tmpDateString = '';
-    if (moment(startDate).year() === moment(endDate).year()) {
-      tmpDateString = `${specifierType} ( ${moment(startDate).format('MMM D').toString()} - ${moment(endDate).format('MMM D YYYY').toString()} )`;
-    } else {
-      tmpDateString = `${specifierType} ( ${moment(startDate).format('MMM D YYYY').toString()} - ${moment(endDate).format('MMM D YYYY').toString()} )`;
-    }
-    return tmpDateString;
-  }
-
-  handleCancel() {
-    this.setState({ isDateSelectorOpen: false });
-    if (this.props.handleCancel !== undefined) {
-      this.props.handleCancel();
-    }
-
-    //  Need to improve this function
-    this.restoreInitialState();
-  }
-
-  compareDateValueSetting(specifier) {
-    const dateRange = (this.state.compareDateRange) ? this.state.compareDateRange : _.cloneDeep(this.state.selectedDateRange);
-    if (specifier === 'week') {
-      dateRange.startDate = moment(this.state.selectedDateRange.startDate).subtract(7, 'days');
-      dateRange.endDate = moment(this.state.selectedDateRange.endDate).subtract(7, 'days');
-      dateRange.dateType = specifier;
-    } else if (specifier === 'month') {
-      dateRange.startDate = moment(this.state.selectedDateRange.startDate).subtract(1, 'months');
-      dateRange.endDate = moment(this.state.selectedDateRange.endDate).subtract(1, 'months');
-      dateRange.dateType = specifier;
-    } else if (specifier === 'year' || specifier === 'custom') {
-      dateRange.startDate = moment(this.state.selectedDateRange.startDate).subtract(1, 'years');
-      dateRange.endDate = moment(this.state.selectedDateRange.endDate).subtract(1, 'years');
-      dateRange.dateType = specifier;
-    }
-    this.setState({ compareDateRange: dateRange });
-  }
-
-  handleChartCompareToggle() {
-    this.setState({ showChartCompareOptions: !this.state.showChartCompareOptions });
-    const compareDateType = (this.state.compareDateRange) ? this.state.compareDateRange.dateType : this.state.selectedDateRange.dateType;
-    this.compareDateValueSetting(compareDateType);
-  }
-
-  handleCompareDateChange(specifier) {
-    if (specifier === 'custom') {
-      this.setState({ compareCustomDateSelected: true, openCustomDatePicker: true });
-    } else {
-      this.compareDateValueSetting(specifier);
-    }
-  }
-
-  handleCustomDatePickerCancel(e) {
-    if (e) {
-      e.preventDefault();
-    }
-    this.setState({ customDateSelected: false });
-    this.setState({ compareCustomDateSelected: false });
-    this.setState({ openCustomDatePicker: false });
-  }
-
-  handleDatePickerApply(startDate, endDate, dateType) {
-    if (this.state.customDateSelected) {
-      const dateRange = _.cloneDeep(this.state.selectedDateRange);
-      dateRange.startDate = startDate;
-      dateRange.endDate = endDate;
-      dateRange.dateType = dateType;
-      this.setState({ selectedDateRange: dateRange });
-      this.setState({ customDateSelected: false });
-    } else {
-      const dateRange = _.cloneDeep(this.state.compareDateRange);
-      dateRange.startDate = startDate;
-      dateRange.endDate = endDate;
-      dateRange.dateType = dateType;
-      this.setState({ compareDateRange: dateRange });
-      this.setState({ compareCustomDateSelected: false });
-    }
-  }
-
-  handleApply() {
-    let dateText = this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType);
-    if (this.state.showChartCompareOptions) {
-      this.setState({ componentWidth: 450 });
-      dateText = `${dateText} vs ${this.printSelectedDate(this.state.compareDateRange.startDate, this.state.compareDateRange.endDate, this.state.compareDateRange.dateType, true)}`;
-    } else {
-      this.setState({ componentWidth: 270 });
-    }
-    this.setState({ selectedDateText: dateText });
-    this.setState({ isDateSelectorOpen: false });
-    this.props.handleApply(this.state.selectedDateRange, this.state.showChartCompareOptions, this.state.compareDateRange);
-  }
-
-  restoreInitialState() {
-    this.setState({ selectedDateRange: this.state.pastStateData.selectedDateRange });
-    this.setState({ compareDateRange: this.state.pastStateData.compareDateRange, showChartCompareOptions: this.state.pastStateData.showChartCompareOptions });
-  }
-
-  renderDateSelector() {
-    const dateType = this.state.selectedDateRange.dateType;
-    return (
-      <div className="date-filter-wrapper">
-        { this.state.loading ? <Dimmer active inverted className={'hide'}><Loader inverted><FormattedMessage {...messages.loaderMessage} /> </Loader></Dimmer> :
-        <Grid>
-          <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : ''}>
-            <Grid.Column width={16}>
-              <Button.Group fluid className="btn-group till-date">
-                <Button className={dateType === 'week' ? 'active' : ''} onClick={() => this.handleDateTypeClick('week')}>WTD</Button>
-                <Button className={dateType === 'month' ? 'active' : ''} onClick={() => this.handleDateTypeClick('month')}>MTD</Button>
-                <Button className={dateType === 'year' ? 'active' : ''} onClick={() => this.handleDateTypeClick('year')}>YTD</Button>
-                <Button className={dateType === 'custom' ? 'active' : ''} onClick={() => this.handleDateTypeClick('custom')}>Custom</Button>
-              </Button.Group>
-            </Grid.Column>
-            <Grid.Column width={16} className="selectedDateText">
-              {this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType)}
-              {dateType === 'custom' ? <span className="editSelectedDate" onClick={() => this.handleDateTypeClick('custom')}><FormattedMessage {...messages.editText} /></span> : ''}
-            </Grid.Column>
-          </Grid.Row>
-          <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : 'compareDateToggle'}>
-            <Grid.Column width={16}>
-              <Checkbox className={!this.props.compareMode ? 'hide' : 'dateCompareCheckbox'} checked={this.state.showChartCompareOptions} label="Compare" onClick={this.handleChartCompareToggle} />
-            </Grid.Column>
-          </Grid.Row>
-          { this.state.showChartCompareOptions ?
-            <Grid.Row className={!this.state.openCustomDatePicker ? '' : 'hide'}>
-              <Grid.Column width={16}>
-                <Button.Group fluid className="btn-group till-date">
-                  {dateType !== 'week' ? '' :
-                  <Button className={this.state.compareDateRange.dateType !== 'week' ? '' : 'active'} onClick={() => this.handleCompareDateChange('week')}>Previous Week</Button> }
-                  {dateType !== 'month' ? '' :
-                  <Button className={this.state.compareDateRange.dateType !== 'month' ? '' : 'active'} onClick={() => this.handleCompareDateChange('month')}>Previous Month</Button>}
-                  <Button className={this.state.compareDateRange.dateType === 'year' ? 'active' : ''} onClick={() => this.handleCompareDateChange('year')}>Previous Year</Button>
-                  <Button className={this.state.compareDateRange.dateType === 'custom' ? 'active' : ''} onClick={() => this.handleCompareDateChange('custom')}>Custom</Button>
-                </Button.Group>
-              </Grid.Column>
-              <Grid.Column width={16} className="selectedDateText">
-                {this.printSelectedDate(this.state.compareDateRange.startDate, this.state.compareDateRange.endDate, this.state.compareDateRange.dateType, true)}
-                {this.state.compareDateRange.dateType === 'custom' ? <span className="editSelectedDate" onClick={() => this.handleCompareDateChange('custom')}><FormattedMessage {...messages.editText} /></span> : ''}
-              </Grid.Column>
-            </Grid.Row>
-            : ''
-          }
-          <Grid.Row className={this.state.openCustomDatePicker ? 'hide' : ''}>
-            <Grid.Column width={16}>
-              <Button primary onClick={this.handleApply}>Apply</Button>
-              <Button basic onClick={this.handleCancel}>Cancel</Button>
-            </Grid.Column>
-          </Grid.Row>
-
-          { this.state.customDateSelected ?
-            <Grid.Row className={!this.state.openCustomDatePicker ? 'hide' : ''}>
-              <Grid.Column className="selectDateRangeTitle" width={16}>
-                <a href="" className="backButton" onClick={this.handleCustomDatePickerCancel}><i className="material-icons">keyboard_backspace</i></a>
-                <span className="dateRangeTitle">Select Date Range</span>
-              </Grid.Column>
-              <Grid.Column width={16} className="dateRangeWrapper">
-                <DateRange prevSelectedDate={this.state.selectedDateRange} handleDatePickerApply={this.handleDatePickerApply} handleDatePickerCancel={this.handleCustomDatePickerCancel} />
-              </Grid.Column>
-              {/* { this.state.showChartCompareOptions ? <Grid.Column width={16}>
-                {this.printSelectedDate(this.props.selectedDateRange.startDate, this.props.selectedDateRange.endDate, this.state.selectedDateRange.dateType)} vs
-              </Grid.Column> : '' } */}
-            </Grid.Row> : ''
-          }
-
-          { this.state.compareCustomDateSelected ?
-            <Grid.Row className={!this.state.openCustomDatePicker ? 'hide' : ''}>
-              <Grid.Column width={16}>
-                <a href="" className="backButton" onClick={this.handleCustomDatePickerCancel}><i className="material-icons">keyboard_backspace</i></a>
-                <span className="dateRangeTitle">Select Date Range</span>
-              </Grid.Column>
-              <Grid.Column width={16}>
-                {this.printSelectedDate(this.state.selectedDateRange.startDate, this.state.selectedDateRange.endDate, this.state.selectedDateRange.dateType)} vs
-              </Grid.Column>
-              <Grid.Column width={16} className="dateRangeWrapper">
-                <DateRange prevSelectedDate={this.state.compareDateRange} handleDatePickerApply={this.handleDatePickerApply} handleDatePickerCancel={this.handleCustomDatePickerCancel} />
-              </Grid.Column>
-            </Grid.Row> : ''
-          }
-        </Grid>}
-      </div>
-    );
-  }
-
-  render() {
-    const { isDateSelectorOpen } = this.state;
-    // const loading = this.state.loading;
-    return (
-      <span>
-        <Popup
-          trigger={
-            <Input
-              id="compareDate"
-              style={{ width: `${this.state.componentWidth}px` }}
-              readOnly
-              icon="caret down"
-              value={this.state.selectedDateText}
-            />
-          }
-          content={this.renderDateSelector()}
-          on="click"
-          open={isDateSelectorOpen}
-          onOpen={this.handleToggleDateSelector}
-        />
-      </span>
-    );
-  }
-}
-
-DateFilter.propTypes = {
-  selectedDateRange: PropTypes.object.isRequired,
-  compareMode: PropTypes.bool,
-  compareDateRange: PropTypes.object,
-  isCompareSelected: PropTypes.bool,
-  handleApply: PropTypes.func.isRequired,
-  handleCancel: PropTypes.func,
-  loading: PropTypes.bool,
-};
-
-export default DateFilter;

package/v2Components/DateFilter/messages.js

@@ -1,17 +0,0 @@
-/*
- * DateFilter Messages
- *
- * This contains all the text for the DateFilter component.
- */
-import { defineMessages } from 'react-intl';
-
-export default defineMessages({
-  loaderMessage: {
-    id: 'reon.components.DateFilter.loaderMessage',
-    defaultMessage: 'Fetching Data',
-  },
-  editText: {
-    id: 'reon.components.DateFilter.editText',
-    defaultMessage: 'Edit',
-  },
-});

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

@@ -1,15 +0,0 @@
-// import React from 'react';
-// import { shallow } from 'enzyme';
-//
-// import moment from 'moment';
-// import DateFilter from '../index';
-
-// describe('<DateFilter />', () => {
-//   it('Expect to have unit tests specified', () => {
-//     expect(true).toEqual(false);
-//   });
-//   it('Expect to have selectDateRange Prop', () => {
-//     const wrapper = shallow(<DateFilter selectedDateRange={moment()} />);
-//     expect(wrapper.props().selectedDateRange).toEqual(moment());
-//   });
-// });

package/v2Components/DateRange/index.js

@@ -1,113 +0,0 @@
-/**
-*
-* DateRange
-*
-*/
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-// import styled from 'styled-components';
-
-import { FormattedMessage } from 'react-intl';
-import { Grid, Button } from 'semantic-ui-react';
-
-import DatePicker from 'react-datepicker';
-import 'react-datepicker/dist/react-datepicker.css';
-
-import moment from 'moment';
-
-class DateRange extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    this.state = {
-      startDate: this.props.prevSelectedDate.startDate,
-      endDate: this.props.prevSelectedDate.endDate,
-    };
-
-    this.handleChangeStart = this.handleChangeStart.bind(this);
-    this.handleChangeEnd = this.handleChangeEnd.bind(this);
-    this.closeAndUpdate = this.closeAndUpdate.bind(this);
-    this.closeAndCancel = this.closeAndCancel.bind(this);
-  }
-
-  handleChangeStart(date) {
-    this.setState({ startDate: date });
-  }
-
-  handleChangeEnd(date) {
-    this.setState({ endDate: date });
-  }
-
-  closeAndUpdate() {
-    this.props.handleDatePickerApply(this.state.startDate, this.state.endDate, 'custom');
-    this.props.handleDatePickerCancel();
-  }
-
-  closeAndCancel() {
-    this.props.handleDatePickerCancel();
-  }
-
-  render() {
-    const { startDate, endDate } = this.state;
-
-    return (
-      <Grid className="dateRangeWrapper" columns={2}>
-        <Grid.Row className="selectedDateTitleWrapper">
-          <Grid.Column style={{ paddingLeft: 0, paddingBottom: `${8}px` }}>
-            <span className="selectedDateTitle">From</span>
-            <input className="selectedDateRange" type="text" readOnly defaultValue={moment(startDate).format('MM/DD/YYYY').toString()} />
-            <i className="calenderIcon material-icons">today</i>
-          </Grid.Column>
-          <Grid.Column style={{ paddingLeft: 0 }}>
-            <span className="selectedDateTitle">To</span>
-            <input className="selectedDateRange" readOnly type="text" defaultValue={moment(endDate).format('MM/DD/YYYY').toString()} />
-            <i className="calenderIcon material-icons">today</i>
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row style={{ paddingTop: 0, paddingBottom: `${2}px` }}>
-          <Grid.Column style={{ paddingLeft: 0 }}>
-            <DatePicker
-              inline
-              selected={startDate}
-              startDate={startDate}
-              endDate={endDate}
-              onChange={this.handleChangeStart}
-              showMonthDropdown
-              showYearDropdown
-              dropdownMode="select"
-            />
-          </Grid.Column>
-          <Grid.Column style={{ paddingLeft: 0 }}>
-            <DatePicker
-              inline
-              selected={endDate}
-              startDate={startDate}
-              endDate={endDate}
-              minDate={startDate}
-              maxDate={moment()}
-              onChange={this.handleChangeEnd}
-              showMonthDropdown
-              showYearDropdown
-              dropdownMode="select"
-            />
-          </Grid.Column>
-        </Grid.Row>
-        <Grid.Row>
-          <Grid.Column width={16} style={{ paddingLeft: 0 }}>
-            <Button onClick={this.closeAndUpdate} className="btn-primary" floated="left"><FormattedMessage id="customdatepicker.done" defaultMessage="Done" /></Button>
-            <Button onClick={this.closeAndCancel} className="btn-secondary" floated="left"><FormattedMessage id="customdatepicker.cancel" defaultMessage="Cancel" /></Button>
-          </Grid.Column>
-        </Grid.Row>
-      </Grid>
-    );
-  }
-}
-
-DateRange.propTypes = {
-  prevSelectedDate: PropTypes.object.isRequired,
-  handleDatePickerCancel: PropTypes.func,
-  handleDatePickerApply: PropTypes.func,
-};
-
-export default DateRange;

package/v2Components/DateRange/messages.js

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

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

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

package/v2Components/Header/index.js

@@ -1,46 +0,0 @@
-/**
-*
-* Header
-*
-*/
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-// import styled from 'styled-components';
-import { FormattedMessage } from 'react-intl';
-
-import { CapRow, CapColumn, CapInput, CapButton } from '@capillarytech/cap-ui-library';
-import messages from './messages';
-
-
-function Header(props) {
-  return (
-    <div>
-      <CapRow className="template-form-header">
-        <CapColumn span={10}>
-          <CapInput id="template-name" placeholder="Enter template name*" defaultValue={props.templateName} type="input" onChange={props.templateNameHandler}/>
-        </CapColumn>
-        {/* <CapColumn span={2} offset={8}>
-          <CapButton id="preview-button" type="cancel" onClick={props.previewHandler}> <FormattedMessage {...messages.preview} /> </CapButton>
-        </CapColumn>
-        <CapColumn span={2}>
-          <CapButton id="cancel-button" type="cancel" onClick={props.cancelHandler}> <FormattedMessage {...messages.cancel} /> </CapButton>
-        </CapColumn>
-        <CapColumn span={2}>
-          <CapButton id="save-button" type="primary" onClick={props.saveHandler}> <FormattedMessage {...messages.save} /> </CapButton>
-        </CapColumn> */}
-      </CapRow>
-    </div>
-  );
-}
-
-Header.propTypes = {
-  templateNameHandler: PropTypes.func,
-  previewHandler: PropTypes.func,
-  cancelHandler: PropTypes.func,
-  saveHandler: PropTypes.func,
-  templateName: PropTypes.string,
-};
-
-export default Header;

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

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

package/v2Components/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/v2Components/PageHeader/index.js

@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import React 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/v2Components/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/v2Components/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/v2Components/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;
-  }
-}

package/v2Components/Sidebar/index.js

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

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

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

@@ -1,55 +0,0 @@
-/**
-*
-* SmsEditor
-*
-*/
-
-import PropTypes from 'prop-types';
-
-import React from 'react';
-// import styled from 'styled-components';
-import {TextArea} from 'semantic-ui-react';
-
-
-class SmsEditor extends React.Component { // eslint-disable-line react/prefer-stateless-function
-  constructor(props) {
-    super(props);
-    if (this.props.content) {
-      this.state = {
-        content: this.props.content,
-      };
-    } else {
-      this.state = {
-        content: '',
-      };
-    }
-    this.onContentChange = this.onContentChange.bind(this);
-  }
-
-  onContentChange(e, data) {
-    this.props.onDataChange(data);
-    this.setState({
-      content: data,
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <TextArea
-          autoHeight
-          style={{minHeight: 100}}
-          value={this.props.content}
-          onChange={(e, data) => { this.onContentChange(e, data); }}
-        />
-      </div>
-    );
-  }
-}
-
-SmsEditor.propTypes = {
-  content: PropTypes.string,
-  onDataChange: PropTypes.func,
-};
-
-export default SmsEditor;

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

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

package/v2Components/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/v2Containers/TemplatesV2/_templatesV2.scss

@@ -1,5 +0,0 @@
-.cap-tab-v2-wrapper{
-    .ant-tabs-tabpane {
-        border: none;
-    }
-}