@capillarytech/creatives-library 3.0.35 → 3.1.0

package/utils/smsCharCountV2.js

@@ -1,9 +1,4 @@
 import React from 'react';
-import * as Api from './../services/api';
-let optoutUrl;
-let showOptoutCount = true;
-let responseState = "REQUEST";
-
 function getURLParameter(name) {
   return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null
 }
@@ -54,26 +49,13 @@ export function checkUnicode(content) {
   return false;
 }
 export function updateCharCount(content, isUnicodeEnabled) {
-  if (showOptoutCount && optoutUrl === undefined && responseState === 'REQUEST') {
-    Api.getUnsubscribeUrl().then((res) => {
-      optoutUrl = res.response.response;
-      responseState = "SUCCESS";
-    }).catch((err) => {
-      showOptoutCount = false;
-      responseState = "FAIL";
-      optoutUrl = undefined;
-    });
-  }
-  const optoutTag = /{{optout}}/g;
-  const optoutTagLength = 14;
-  const contentOriginal = content;
-  const noOfOptout = (content.match(optoutTag) || []).length;
-  content = showOptoutCount ? content.replace(optoutTag, "") : content;
-  var chars_arr = contentOriginal.split("");
+  console.log(content);
+  var chars_arr = content.split("");
+  console.log(chars_arr);
   var coding = '7bit';
   var parts = 1;
   var part = 1;
-  var chars_used = showOptoutCount ? ((optoutUrl && optoutUrl.length || 0) * noOfOptout) : 0;
+  var chars_used = 0;
   var chars_sms = 160;
   var sms_parts_container = [];
   var partc = [];
@@ -145,15 +127,17 @@ export function updateCharCount(content, isUnicodeEnabled) {
     }
   }
 
-  chars_used = showOptoutCount ? (chars_used - (optoutTagLength * noOfOptout)) : chars_used;
+  console.log('Type:', (coding == '7bit' ? '7bit' : 'Unicode'));
+  console.log('Parts:', parts);
+  console.log('SMS Chars:', chars_sms);
+  console.log('SMS Char total:', chars_used);
+
   return {
     unicode: (coding === '7bit' ? false : true),
     parts,
     chars_sms,
     chars_used,
     char_list: partc,
-    optouturlLength: (optoutUrl && optoutUrl.length) || 0,
-    optoutUrlPresent: noOfOptout > 0,
-    responseState,
   };
 }
+

package/v2Components/BreadCrumbs/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.componentsV2.BreadCrumbs.header',
+    id: 'app.components.BreadCrumbs.header',
     defaultMessage: 'This is the BreadCrumbs component !',
   },
 });

package/v2Components/CallTaskPreview/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.componentsV2.CallTaskPreview.header',
+    id: 'app.components.CallTaskPreview.header',
     defaultMessage: 'This is the CallTaskPreview component !',
   },
 });

package/v2Components/CapTagList/index.js

@@ -139,7 +139,6 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
         supportedTagsString += `${supportedTag} ,`;
       });
       supportedTagsString = supportedTagsString.replace(/,\s*$/, "");
-      console.log(supportedTagsString);
       if (_.has(val, 'subtags')) {
         const temp = this.renderTags(val.subtags);
         list.push((
@@ -160,17 +159,17 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
     const options = [
       {
         value: "All",
-        label: this.props.intl.formatMessage(messages.all),
+        label: "All",
         key: 'all',
       },
       {
         value: "Outbound",
-        label: this.props.intl.formatMessage(messages.outbound),
+        label: "Outbound",
         key: 'outbound',
       },
       {
         value: "Loyalty",
-        label: this.props.intl.formatMessage(messages.loyalty),
+        label: "Loyalty",
         key: 'loyalty',
       },
     ];
@@ -180,8 +179,8 @@ class CapTagList extends React.Component { // eslint-disable-line react/prefer-s
           visible={this.state.visible}
           onVisibleChange={this.togglePopoverVisibility}
           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} />
+            <CapSpin tip="Getting tags..." spinning={this.props.loading}>
+              <Search style={{ marginBottom: 8, width: '250px'}} placeholder="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}>
               </CapSelect> : ''}
               <CapTree

package/v2Components/CapTagList/messages.js

@@ -7,39 +7,19 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   "Ok": {
-    id: 'creatives.componentsV2.CapTagList.Ok',
+    id: 'app.components.CapTagList.Ok',
     defaultMessage: 'Ok',
   },
   "numberOfDaysBeforeExpiry": {
-    id: 'creatives.componentsV2.CapTagList.numberOfDaysBeforeExpiry',
+    id: 'app.components.CapTagList.numberOfDaysBeforeExpiry',
     defaultMessage: 'Number of days before expiry',
   },
   "Cancel": {
-    id: 'creatives.componentsV2.CapTagList.Cancel',
+    id: 'app.components.CapTagList.Cancel',
     defaultMessage: 'Cancel',
   },
   "Dynamic Days before Expiry": {
-    id: 'creatives.componentsV2.CapTagList.dynamic_days_before_expiry',
+    id: 'app.components.CapTagList.dynamic_days_before_expiry',
     defaultMessage: 'Dynamic days before expiry',
   },
-  "all": {
-    id: 'creatives.componentsV2.CapTagList.all',
-    defaultMessage: 'Dynamic days before expiry',
-  },
-  "outbound": {
-    id: 'creatives.componentsV2.CapTagList.outbound',
-    defaultMessage: 'Outbound',
-  },
-  "loyalty": {
-    id: 'creatives.componentsV2.CapTagList.loyalty',
-    defaultMessage: 'Loyalty',
-  },
-  "gettingTags": {
-    id: 'creatives.componentsV2.CapTagList.gettingTags',
-    defaultMessage: 'Getting tags...',
-  },
-  "search": {
-    id: 'creatives.componentsV2.CapTagList.search',
-    defaultMessage: 'Search',
-  },
 });

package/v2Components/Ckeditor/index.js

@@ -74,7 +74,6 @@ class Ckeditor extends React.Component { // eslint-disable-line react/prefer-sta
     if (this.props.channel && this.props.channel.toLowerCase() === 'wechat') {
       config.startupFocus = false;
       config.toolbar[6].items = ['Table', 'HorizontalRule', 'Smiley'];
-      config.width = 'calc(100% - 70px)';
       config.height = 'calc(100vh - 450px)';
     }
     //State initialization

package/v2Components/Ckeditor/messages.js

@@ -7,7 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.componentsV2.Ckeditor.header',
+    id: 'app.components.Ckeditor.header',
     defaultMessage: 'This is the Ckeditor component !',
   },
 });

package/v2Components/CmsTemplatesComponent/messages.js

@@ -7,11 +7,11 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.componentsV2.CmsTemplatesComponent.header',
+    id: 'app.components.CmsTemplatesComponent.header',
     defaultMessage: 'This is the CmsTemplatesComponent component !',
   },
   select: {
-    id: 'creatives.componentsV2.CmsTemplatesComponent.select',
+    id: 'app.components.CmsTemplatesComponent.select',
     defaultMessage: 'Select',
   },
 });

package/v2Components/CustomPopOver/index.js

@@ -9,12 +9,10 @@ import PropTypes from 'prop-types';
 import React from 'react';
 // import styled from 'styled-components';
 import {CapPopover} from '@capillarytech/cap-ui-library';
-import { FormattedMessage } from 'react-intl';
+// import { FormattedMessage } from 'react-intl';
 // import messages from './messages';
 import _ from "lodash";
 
-import messages from './messages';
-
 class CustomPopOver extends React.Component { // eslint-disable-line react/prefer-stateless-function
   componentWillMount() {
     console.log('popOver List ', this.props.popOverList, this.props.excludeList);
@@ -53,7 +51,7 @@ class CustomPopOver extends React.Component { // eslint-disable-line react/prefe
             this.renderPopoverContent()
           }
         >
-          <p style={{fontFamily: "open-sans", fontWeight: '600', display: `${this.props.popOverList.length === this.props.excludeList.length ? 'none' : ''}`}}><FormattedMessage {...messages.languages} /></p>
+          <p style={{fontFamily: "open-sans", fontWeight: '600', display: `${this.props.popOverList.length === this.props.excludeList.length ? 'none' : ''}`}}>+ Languages</p>
         </CapPopover>
       </div>
     );

package/v2Components/CustomPopOver/messages.js

@@ -7,11 +7,7 @@ import { defineMessages } from 'react-intl';
 
 export default defineMessages({
   header: {
-    id: 'creatives.componentsV2.CustomPopOver.header',
+    id: 'app.components.CustomPopOver.header',
     defaultMessage: 'This is the CustomPopOver component !',
   },
-  languages: {
-    id: 'creatives.componentsV2.CustomPopOver.languages',
-    defaultMessage: '+ Languages',
-  },
 });

package/v2Components/DateFilter/index.js

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

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

@@ -0,0 +1,15 @@
+// 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());
+//   });
+// });