@capillarytech/creatives-library 3.1.7 → 3.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "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/translations/en.json

@@ -73,7 +73,7 @@
   "creatives.componentsV2.CallTaskPreview.header": "This is the CallTaskPreview component !",
   "creatives.componentsV2.CapTagList.Cancel": "Cancel",
   "creatives.componentsV2.CapTagList.Ok": "Ok",
-  "creatives.componentsV2.CapTagList.all": "Dynamic days before expiry",
+  "creatives.componentsV2.CapTagList.all": "All",
   "creatives.componentsV2.CapTagList.dynamic_days_before_expiry": "Dynamic days before expiry",
   "creatives.componentsV2.CapTagList.gettingTags": "Getting tags...",
   "creatives.componentsV2.CapTagList.loyalty": "Loyalty",

package/v2Components/CapTagList/index.js

@@ -182,7 +182,7 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           content={<div>
             <CapSpin tip={this.props.intl.formatMessage(messages.gettingTags)} spinning={this.props.loading}>
               <Search style={{ marginBottom: 8, width: '250px'}} placeholder={this.props.intl.formatMessage(messages.search)} onChange={this.onChange} />
-              {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue="All" options={options}>
+              {this.props.moduleFilterEnabled ? <CapSelect getPopupContainer={(triggerNode) => triggerNode.parentNode} style={{width: '250px', marginBottom: '16px', minWidth: 'initial', display: 'inherit'}} onChange={this.props.onContextChange} defaultValue={this.props.intl.formatMessage(messages.all)} options={options}>
               </CapSelect> : ''}
               <CapTree
                 styling={{height: '350px', overflow: 'auto'}}

package/v2Components/CapTagList/messages.js

@@ -24,7 +24,7 @@ export default defineMessages({
   },
   "all": {
     id: 'creatives.componentsV2.CapTagList.all',
-    defaultMessage: 'Dynamic days before expiry',
+    defaultMessage: 'All',
   },
   "outbound": {
     id: 'creatives.componentsV2.CapTagList.outbound',

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/v2Components/TemplatePreview/WechatRichmediaTemplatePreview/index.js

@@ -22,7 +22,6 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
     const content = JSON.parse(JSON.stringify(mediaList));
     const mediaListLength = content.length;
     const contentData = content[0];
-    console.log("archita medialist: ", mediaList, content, mediaListLength);
     previewMsg.push(
       <div className="image-container">
         <img alt="default" width="100%" height="102px" src={contentData.image_url} />
@@ -45,11 +44,10 @@ class WechatRichmediaTemplatePreview extends React.PureComponent { // eslint-dis
       previewMsg.push(
         <div className="additional-richmedia-container">
           <div><CapHeading type="label7" style={{width: '170px', top: '12px', position: 'relative'}}>{data.title}</CapHeading></div>
-          <img alt="default" width="40px" height="40px" src={data.image_url} />
+          <img alt="default" width="34px" height="34px" src={data.image_url} />
         </div>
       );
     });
-    console.log("archita return obj: ", previewMsg);
     return (
       <div className="richmedia-template">
         {previewMsg}

package/v2Containers/Templates/index.js

@@ -387,7 +387,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
 
   onAccountSelect(e) {
     const value = e.target.value;
-    console.log("onAccountSelect", e, value);
     this.setState({selectedAccount: value}, () => {
       const params = {
         name: this.state.searchText,
@@ -532,18 +531,14 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
   };
   filterWechatTemplates = (templates) => {
     const { wechatFilter } = this.state;
-    switch(wechatFilter) {
+    switch (wechatFilter) {
       case WECHAT_FILTERS.RICHMEDIA:
-        return templates.filter(function (template) {
-          return template.definition && template.definition.msgcontent.toUpperCase() === "RICH_MEDIA_WECHAT";
-        });
+        return templates.filter((template) => template.definition && template.definition.msgcontent.toUpperCase() === "RICH_MEDIA_WECHAT");
       case WECHAT_FILTERS.MAPTEMPLATES:
-        return templates.filter(function (template) {
-          return !template.definition;
-        });
+        return templates.filter((template) => !template.definition);
       default:
         return templates;
-    };
+    }
   }
   getTemplateDataForGrid = ({templates, handlers, filterContent, channel, isLoading, loadingTip}) => {
     const currentChannel = channel.toUpperCase();
@@ -1585,7 +1580,6 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         <CapRadioCard
           className="select-account"
           onChange={this.onAccountSelect}
-          value={this.props.Templates.selectedWeChatAccount ? this.props.Templates.selectedWeChatAccount.name : undefined}
           panes={accountOptions}
           cardHeight="48px"
           cardWidth="276px"
@@ -1611,7 +1605,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     const isMobilePushChannel = channel === MOBILE_PUSH;
     return (<CapHeader
       title={<CapHeading type="h4">{isMobilePushChannel ? this.props.intl.formatMessage(messages.mobilepushAccount) : this.props.intl.formatMessage(messages.wechatAccount)}</CapHeading>}
-    description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountSelectionMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
+      description={<><CapHeading type="h3">{selectedAccount} {weCrmAccounts.length > 1 && <CapLink onClick={this.setAccountSelectionMode} style={{display: 'inline-block', position: 'relative', top: '3px'}} fontWeight="regular" fontSize="14px" title="change"/>} </CapHeading></>}
       size="regular"
   />);
   }
@@ -1649,6 +1643,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
     //TODO -> uncomment the following line
     // const isfilterContentVisisble = !isEmpty(this.props.TemplatesList) || !isEmpty(this.state.searchText) || !isEmpty(this.props.Templates.templateError);
     const isfilterContentVisisble = true;
+    const isWechatEmbedded = !this.props.isFullMode && channel.toUpperCase() === WECHAT;
     const filterContent = (( isfilterContentVisisble || [WECHAT, MOBILE_PUSH].includes(this.state.channel.toUpperCase())) && <div className="action-container">
       {isfilterContentVisisble && <CapInput.Search
         className="search-text"
@@ -1673,7 +1668,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
         </CapRadio.CapRadioGroup>
       }
       <div style={{display: "flex", justifyContent: "space-between", alignItems: 'center'}}>
-        {isfilterContentVisisble && <CapButton
+        {isfilterContentVisisble && !isWechatEmbedded && <CapButton
           type={"primary"}
           disabled={this.isCreateDisabled()}
           style={{marginLeft: '8px'}}

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

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

package/v2Containers/WeChat/RichmediaTemplates/Create/index.js

@@ -18,8 +18,6 @@ import cloneDeep from 'lodash/cloneDeep';
 import forEach from 'lodash/forEach';
 import isEqual from 'lodash/isEqual';
 import get from 'lodash/get';
-
-import { Menu } from 'antd';
 import { CapRow, CapColumn, CapButton, CapCard, CapSpin, CapInput, CapHeading, CapDivider, CapIcon, CapLink } from '@capillarytech/cap-ui-library';
 import makeSelectCreate, {makeSelectTemplates, getAssetDetails, getContentAssetDetails} from './selectors';
 import * as actions from './actions';
@@ -925,11 +923,11 @@ export class Create extends React.Component { // eslint-disable-line react/prefe
             />
             <div className="wechat-container">
               <CapRow className="wechat-form-container">
-                <CapColumn span={8}>
+                <CapColumn span={9}>
                   {cardLayout}
                   {!this.state.isIframe && contentMenu}
                 </CapColumn>
-                <CapColumn span={16}>
+                <CapColumn span={15}>
                   { !isIframe && <CapInput
                     label="Name of the template"
                     value={this.state.templateName}

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());
-//   });
-// });