@capillarytech/creatives-library 3.0.8 → 3.0.9

package/containers/Email/index.js

@@ -2537,13 +2537,15 @@ export class Email extends React.Component { // eslint-disable-line react/prefer
         });
       }
     });
-    _.forEach(temp.standalone.sections[1].inputFields[0].cols, (inputField) => {
-      if (inputField.id === "template-version") {
-        const iF = inputField;
-        iF.colStyle = {};
-        iF.colStyle.display = "none";
-      }
-    });
+    if (temp.standalone.sections && temp.standalone.sections.length > 0) {
+      _.forEach(temp.standalone.sections[1].inputFields[0].cols, (inputField) => {
+        if (inputField.id === "template-version") {
+          const iF = inputField;
+          iF.colStyle = {};
+          iF.colStyle.display = "none";
+        }
+      });
+    }
     //}
     temp = type === 'embedded' ? this.removeStandAlone(temp) : temp;
     this.setState({schema: temp, isSchemaChanged: true, loadingStatus: this.state.loadingStatus + 1}, () => {

package/containers/MobilePush/Edit/index.js

@@ -803,7 +803,6 @@ export class Edit extends React.Component { // eslint-disable-line react/prefer-
   };
 
   getCurrentWindow = (e) => {
-    console.log('in sms create', e);
     const response = {
       action: e.action,
       value: 'edit',

package/containers/Templates/index.js

@@ -1128,7 +1128,7 @@ export class Templates extends React.Component { // eslint-disable-line react/pr
             {template._id === this.state.hoveredItem ? <CapButton onClick={(e) => this.handleEditClick(e, template._id)} className="edit-button" type="secondary">{type === 'embedded' ? this.props.intl.formatMessage(messages.selectButton) : this.props.intl.formatMessage(messages.editButton)}</CapButton> : ''}
             {template._id === this.state.hoveredItem ? <CapButton onClick={() => this.handlePreviewClick(template)} className="preview-button" type="cancel">{this.props.intl.formatMessage(messages.previewButton)}</CapButton> : ''}
           </div>);
-      } else if (this.state.channel.toLowerCase() === 'line') {
+      } else if (this.state.channel.toLowerCase() === 'line' && template.type.toLowerCase() === 'line') {
         //content = template.versions.base.messages[0].Text;
         content = {
           bodyText: template.versions.base.content.messages[0].text ? template.versions.base.content.messages[0].text : '',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@capillarytech/creatives-library",
   "author": "meharaj",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "description": "Capillary creatives ui",
   "main": "./index.js",
   "module": "./index.es.js",

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

package/v2Components/DateRange/index.js

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

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

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

@@ -30,6 +30,14 @@ const deviceAspectRatio = {
 };
 
 class EmailMobilePreview extends React.Component {
+  static getDerivedStateFromProps(props) {
+    if (props.showAllDevices) {
+      return {
+        showAllDevices: true,
+      };
+    }
+    return null;
+  }
   constructor() {
     super();
     this.state = {
@@ -115,6 +123,7 @@ EmailMobilePreview.propTypes = {
 
 EmailMobilePreview.defaultProps = {
   showDeviceSelection: true,
+  showAllDevices: false,
 };
 
 const mapStateToProps = (state, props) => createStructuredSelector({

package/v2Components/NavigationBar/index.js

@@ -7,7 +7,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { isEmpty, forEach } from 'lodash';
+import { isEmpty, forEach, find } from 'lodash';
 import { loadItem } from 'services/localStorageApi';
 import { intlShape, injectIntl } from 'react-intl';
 import TopBar from '../TopBar';
@@ -104,9 +104,10 @@ class NavigationBar extends React.Component {
   };
 
   getProductsList = () => {
+    const { campaignOrgV2Status } = this.props;
     const { currentOrgDetails } = this.props.userData;
     const productsList = [];
-    if (currentOrgDetails) {
+    if (!isEmpty(currentOrgDetails)) {
       forEach(currentOrgDetails.module_details, (module) => {
         if (module.name.toLowerCase() !== PRODUCT_MASTERS) {
           productsList.push({
@@ -116,14 +117,22 @@ class NavigationBar extends React.Component {
           });
         }
       });
+      //below changes are temporary and should be fixed once we get correct modules list
+      //changing campaigns module name to engage+
+      if ( !campaignOrgV2Status ) {
+        const campaignsModule = find(productsList, ['value', 'campaigns']);
+        campaignsModule.value = 'Engage+';
+      }
+      //adding insights+ to module list
+      productsList.push({
+        value: 'Insights+',
+        url: 'analytics/v2/',
+        key: 'analytics/v2/',
+      });
     }
     return productsList;
   };
 
-  setDefaultSelectedProduct = () => {
-    const { intl, campaignOrgV2Status } = this.props;
-    return campaignOrgV2Status ? intl.formatMessage(messages.selectedProductDefaultEngage) : intl.formatMessage(messages.selectedProductDefaultCampaigns);
-  }
   getTopbarIcons = () => [
     {
       iconType: 'help',
@@ -181,6 +190,7 @@ class NavigationBar extends React.Component {
       topbarMenuData,
       loggedIn,
       type,
+      intl,
     } = this.props;
     const productsList = this.getProductsList();
     const proxyOrgList = this.getProxyOrgList();
@@ -195,7 +205,8 @@ class NavigationBar extends React.Component {
           <TopBar
             productsList={productsList}
             selectedProduct={
-              selectedProduct || this.setDefaultSelectedProduct()
+              selectedProduct ||
+              intl.formatMessage(messages.selectedProductDefault)
             }
             handleProductChange={this.handleProductChange}
             proxyOrgList={proxyOrgList}

package/v2Components/NavigationBar/messages.js

@@ -13,12 +13,8 @@ export default defineMessages({
     id: `${scope}.header`,
     defaultMessage: 'This is the NavigationBar component!',
   },
-  selectedProductDefaultEngage: {
-    id: `${scope}.selectedProductDefaultEngage`,
+  selectedProductDefault: {
+    id: `${scope}.selectedProductDefault`,
     defaultMessage: 'Engage+',
   },
-  selectedProductDefaultCampaigns: {
-    id: `${scope}.selectedProductDefaultCampaigns`,
-    defaultMessage: 'Campaigns',
-  },
 });

package/v2Components/PageHeader/_pageHeader.scss

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

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

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

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

package/v2Components/Sidebar/_sidebar.scss

@@ -0,0 +1,115 @@
+#cap-sidebar{
+  padding: 8px 0 8px 0;
+  max-width: 200px;
+  min-width: 200px;
+  width: 16%;
+  overflow-y: hidden;
+  // height: 100%;
+  // display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  // display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  // display: -ms-flexbox;      /* TWEENER - IE 10 */
+  // display: -webkit-flex;     /* NEW - Chrome */
+  // display: flex;
+  overflow-x: hidden;
+  .header.item{
+    padding-left: 8px !important;
+  }
+}
+
+.sidebar-container {
+  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
+  display: -ms-flexbox;      /* TWEENER - IE 10 */
+  display: -webkit-flex;     /* NEW - Chrome */
+  display: flex;
+  flex: 1;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -ms-flex: 1;
+}
+
+.sidebar-accordian .content .item.menu-item:hover{
+  margin-left: 0 !important;
+  text-indent: 0 !important;
+}
+.sidebar-accordian .content .item.menu-item.selected{
+  margin-left: 0 !important;
+  text-indent: 0 !important;
+}
+.ui.accordion.sidebar-accordian .content .item.selected{
+  background: #F2F3F7 !important;
+  padding-left: 40px !important;
+}
+
+.item.menu-item{
+  // margin-left: 0px;
+  padding-left: 40px !important;
+  border-left-width: 0 !important;
+  text-decoration: none;
+}
+.item.menu-item.selected{
+  border-left: 4px solid #2e89df !important;
+}
+
+.item.menu-item.assetItem{
+  padding-left: 28px !important;
+  line-height: 28px;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+.ui.accordion.sidebar-accordian {
+  padding-top: 8px !important;
+  margin-left: 0;
+}
+
+.ui.accordion.sidebar-accordian .title{
+  font-size: 12px !important;
+  line-height: 32px !important;
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.sidebar-width {
+  // width: 200px !important;
+  max-width: 250px;
+  min-width: 190px;
+  width: 200px;
+}
+.module-menu-header {
+  padding-top: 8px!important;
+  line-height: 32px!important;
+  font-size: 16px!important;
+  margin-left: 0!important;
+  padding-left: 8px;
+}
+
+// .searchbar {
+//   height: 32px;
+//   padding-left: 8px;
+// }
+
+.menu-header {
+  font-size: 12px!important;
+  line-height: 32px!important;
+  margin: 0!important;
+  padding: 0 0 0 8px!important;
+  width: 100%;
+}
+.menu-title {
+  flex: 0 0 90%!important;
+}
+
+.product-select-menu {
+  width: 100%;
+  padding-left: 2px;
+  background: #F2F3F7;
+  font-family: proxima-nova;
+  font-size: 16px !important;
+  font-weight: 600;
+
+  .ant-select-selection {
+    background: #F2F3F7;
+    border: none !important;
+  }
+}

package/v2Components/Sidebar/index.js

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

package/v2Components/Sidebar/messages.js

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

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

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

package/v2Components/SmsEditor/index.js

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

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

@@ -0,0 +1,46 @@
+.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;
+}