@plusscommunities/pluss-core-web 1.0.5 → 1.0.6

package/src/apis/utilityActions.js

@@ -0,0 +1,35 @@
+import Config from '../config';
+import { authedFunction, unauthedFunction } from '../session';
+import { getUrl } from '../helper';
+
+export const utilityActions = {
+  getUpvotyToken: () => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('utility', 'upvoty/usertoken'),
+    });
+  },
+  getBoardHash: () => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('utility', 'upvoty/boardhash'),
+    });
+  },
+  getRoadmapHash: () => {
+    return authedFunction({
+      method: 'GET',
+      url: getUrl('utility', 'upvoty/roadmap'),
+    });
+  },
+  generateMake: (templateId, data) => {
+    return unauthedFunction({
+      method: 'POST',
+      url: `https://api.make.cm/make/t/${templateId}/sync`,
+      data,
+      headers: {
+        'Content-Type': 'application/json',
+        'X-MAKE-API-KEY': Config.env.makeApiKey,
+      },
+    });
+  },
+};

package/src/colours.js

@@ -2,11 +2,11 @@
 // const COLOUR_2 = '#3179cb';
 // const COLOUR_3 = '#1bb7ee';
 
-// const COLOUR_BRANDING_MAIN = '#4a57b7';
+const COLOUR_BRANDING_MAIN = '#4a57b7';
 // const COLOUR_BRANDING_DARK = '#364196';
 // const COLOUR_BRANDING_LIGHT = '#597db4';
-// const COLOUR_BRANDING_OFF = '#597db4';
-// const COLOUR_BRANDING_ACTION = '#5c90df';
+const COLOUR_BRANDING_OFF = '#597db4';
+const COLOUR_BRANDING_ACTION = '#5c90df';
 const COLOUR_BRANDING_INACTIVE = '#dbddf1';
 
 // const TEXT_DARKEST = '#262a2d';
@@ -16,9 +16,9 @@ const COLOUR_BRANDING_INACTIVE = '#dbddf1';
 // const TEXT_DARK_ALPHA10 = 'rgba(60, 60, 80, .1)';
 // const TEXT_MID = '#5a5a6e';
 // const TEXT_MID_ALPHA50 = 'rgba(90, 90, 110, .5)';
-// const TEXT_LIGHT = '#717b81';
+const TEXT_LIGHT = '#717b81';
 // const TEXT_SUPER_LIGHT = '#d2d9e5';
-// const COLOUR_DUSK = '#536280';
+const COLOUR_DUSK = '#536280';
 const COLOUR_DUSK_LIGHT = '#67758f';
 // const COLOUR_DUSK_LIGHTER = '#a1afcc';
 
@@ -42,11 +42,11 @@ const LINEGREY = COLOUR_BRANDING_INACTIVE;
 // const COLOUR_NAV_GREY = '#f6f6f6';
 // const COLOUR_TRANSPARENT = 'rgba(0,0,0,0)';
 // const COLOUR_SIDEBAR = '#303030';
-// const COLOUR_LIGHTGREY = '#8695b2';
+const COLOUR_LIGHTGREY = '#8695b2';
 
-// const INACTIVE_TEXT = COLOUR_LIGHTGREY;
+const INACTIVE_TEXT = COLOUR_LIGHTGREY;
 
-// const COLOUR_BRANDING_APP = '#4a57b7';
+const COLOUR_BRANDING_APP = '#4a57b7';
 
 // const hexToRGB = (hex) => {
 //   // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
@@ -96,9 +96,9 @@ export {
   // TEXT_DARK_ALPHA10,
   // TEXT_MID,
   // TEXT_MID_ALPHA50,
-  // TEXT_LIGHT,
+  TEXT_LIGHT,
   // TEXT_SUPER_LIGHT,
-  // COLOUR_DUSK,
+  COLOUR_DUSK,
   COLOUR_DUSK_LIGHT,
   // COLOUR_DUSK_LIGHTER,
   LINEGREY,
@@ -121,14 +121,14 @@ export {
   // COLOUR_NAV_GREY,
   // COLOUR_TRANSPARENT,
   // COLOUR_SIDEBAR,
-  // COLOUR_BRANDING_MAIN,
-  // COLOUR_BRANDING_OFF,
+  COLOUR_BRANDING_MAIN,
+  COLOUR_BRANDING_OFF,
   // COLOUR_BRANDING_LIGHT,
   // COLOUR_BRANDING_DARK,
-  // COLOUR_BRANDING_ACTION,
+  COLOUR_BRANDING_ACTION,
   // COLOUR_GREEN,
-  // INACTIVE_TEXT,
-  // COLOUR_LIGHTGREY,
-  // COLOUR_BRANDING_APP,
+  INACTIVE_TEXT,
+  COLOUR_LIGHTGREY,
+  COLOUR_BRANDING_APP,
   COLOUR_BRANDING_INACTIVE,
 };

package/src/components/AnalyticsFilter.js

@@ -0,0 +1,110 @@
+import React, { PureComponent } from 'react';
+import { DropdownButton, MenuItem } from 'react-bootstrap';
+import _ from 'lodash';
+import moment from 'moment';
+import { getAnalyticsFilterOptions } from '../analytics';
+import { GenericInput, DatePicker } from './';
+
+class AnalyticsFilter extends PureComponent {
+  constructor(props) {
+    super(props);
+    const filterOptions = getAnalyticsFilterOptions();
+    const selectedFilter = this.props.defaultFilter || filterOptions[1];
+    this.state = {
+      filterOptions,
+      selectedFilter,
+      dateRangeText: 'Select date range',
+      startDate: moment(),
+      endDate: moment(),
+      calendarVisible: true,
+    };
+  }
+
+  renderOptions = () => {
+    return this.state.filterOptions.map((ev) => {
+      return (
+        <MenuItem key={ev.dayCount} eventKey={ev.dayCount} active={this.state.selectedFilter === ev}>
+          {ev.text}
+        </MenuItem>
+      );
+    });
+  };
+
+  selectFilter = (key) => {
+    const selectedFilter = _.find(this.state.filterOptions, (o) => {
+      return o.dayCount === key;
+    });
+    this.setState(
+      {
+        selectedFilter,
+        dateRangeText: 'Select date range',
+        startDate: moment(),
+        endDate: moment(),
+        calendarVisible: true,
+      },
+      () => {
+        this.props.filterChanged(selectedFilter);
+      },
+    );
+  };
+
+  getDateRangeText = (start, end) => {
+    return `${moment(start).format('DD/MM/YYYY')}  to  ${moment(end).format('DD/MM/YYYY')}`;
+  };
+
+  toggleDateSelectors = () => {
+    this.setState({ calendarVisible: !this.state.calendarVisible });
+  };
+
+  startDateChanged = (date) => {
+    if (moment(date).isSameOrBefore(this.state.endDate)) {
+      this.setState({ startDate: date, dateRangeText: this.getDateRangeText(date, this.state.endDate) }, () => {
+        this.props.filterDateRangeChanged(this.state.startDate, this.state.endDate);
+      });
+    }
+  };
+
+  endDateChanged = (date) => {
+    if (moment(date).isSameOrAfter(this.state.startDate)) {
+      this.setState({ endDate: date, dateRangeText: this.getDateRangeText(this.state.startDate, date) }, () => {
+        this.props.filterDateRangeChanged(this.state.startDate, this.state.endDate);
+      });
+    }
+  };
+
+  render() {
+    return (
+      <div>
+        <div className="analyticsFilter__dropDown">
+          <DropdownButton
+            id="secondLevelSort"
+            bsSize="xsmall"
+            className="siteSelector__button analyticsFilter__dropDown__button"
+            title={this.state.selectedFilter.text}
+            onSelect={this.selectFilter}
+          >
+            {this.renderOptions()}
+          </DropdownButton>
+          {this.state.selectedFilter.dayCount === 0 && (
+            <GenericInput
+              id="customDateRange"
+              placeholder={'Select date range'}
+              className="analyticsFilter__dropDown__input"
+              value={this.state.dateRangeText}
+              onClick={this.toggleDateSelectors}
+              readOnly
+            />
+          )}
+        </div>
+        {this.state.selectedFilter.dayCount === 0 && this.state.calendarVisible && (
+          <div className="analyticsFilter__dateRange">
+            <DatePicker hideTop selectedDate={this.state.startDate} selectDate={this.startDateChanged} />
+            <DatePicker hideTop selectedDate={this.state.endDate} selectDate={this.endDateChanged} />
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+
+export { AnalyticsFilter };

package/src/components/AudienceIncluder.js

@@ -0,0 +1,174 @@
+import React, { Component } from 'react';
+import _ from 'lodash';
+import { withRouter } from 'react-router';
+import { connect } from 'react-redux';
+import { GenericInput, Text } from './';
+import Config from '../config';
+import { SVGIcon } from './SVGIcon';
+import { COLOUR_DUSK } from '../colours';
+
+class AudienceIncluder extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showUserAdd: false,
+      userSearch: '',
+      returnList: [],
+      userList: [],
+
+      selectionList: [],
+    };
+  }
+
+  UNSAFE_componentWillMount() {
+    this.updateProps(this.props);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.updateProps(nextProps);
+  }
+
+  updateProps(props) {
+    var stateChange = { selectionList: props.selectionList, userList: props.userList };
+
+    if (!_.isEmpty(this.state.userSearch) && this.state.userSearch.length > 1) {
+      stateChange.returnList = _.filter(props.userList, (ev) => {
+        return ev.displayName.toLowerCase().indexOf(this.state.userSearch.toLowerCase()) > -1;
+      });
+
+      stateChange.returnList = _.reject(stateChange.returnList, (item) =>
+        _.find(props.selectionList, (t) => {
+          return t.Id === item.Id;
+        }),
+      );
+    }
+    this.setState(stateChange);
+  }
+
+  showUserAdd() {
+    this.setState({ showUserAdd: true });
+  }
+
+  handleChange(event) {
+    if (this.state.searchUserLoading) {
+      return;
+    }
+    var stateChange = { returnList: [] };
+    stateChange[event.target.getAttribute('id')] = event.target.value;
+
+    if (!_.isEmpty(event.target.value) && event.target.value.length > 1) {
+      stateChange.returnList = _.filter(this.props.userList, (ev) => {
+        return ev.displayName.toLowerCase().indexOf(event.target.value.toLowerCase()) > -1;
+      });
+
+      stateChange.returnList = _.reject(stateChange.returnList, (item) =>
+        _.find(this.state.selectionList, (t) => {
+          return t.Id === item.Id;
+        }),
+      );
+    }
+
+    this.setState(stateChange);
+  }
+
+  renderSearch() {
+    return (
+      <div style={{}}>
+        {this.state.returnList.map((user, index) => {
+          return (
+            <div
+              onClick={() => {
+                this.props.add(user);
+              }}
+              key={user.Id}
+              className="pointer"
+              style={{ marginBottom: 8, display: 'flex', flexDirection: 'row', alignItems: 'center' }}
+            >
+              <img
+                style={{ height: 30, width: 30, borderRadius: 15, marginRight: 16 }}
+                src={user.profilePic != null ? user.profilePic : Config.env.defaultProfileImage}
+                alt="user profilePic"
+              />
+              <div className={`fontMedium fontSize-16 text-dark'`}>{user.displayName}</div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  renderUserAdd() {
+    return (
+      <div className="" style={{ backgroundColor: '#fff' }}>
+        {' '}
+        {/* Search for peeps */}
+        <GenericInput
+          id="userSearch"
+          type="text"
+          label="Search for User"
+          placeholder="Search for user"
+          value={this.state.userSearch}
+          onChange={(e) => this.handleChange(e)}
+          alwaysShowLabel
+        />
+        {this.renderSearch()}
+      </div>
+    );
+  }
+
+  renderAttendees() {
+    if (this.state.selectionList && !_.isEmpty(this.state.selectionList)) {
+      return (
+        <div style={{ marginTop: 16 }}>
+          <Text type="formLabel" className="marginBottom-8">
+            Selected Users
+          </Text>
+          {this.state.selectionList.map((user, index) => {
+            return (
+              <div
+                key={user.Id}
+                style={{ marginBottom: 8, display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}
+              >
+                <div className="flex" style={{ alignItems: 'center' }}>
+                  <img
+                    style={{ height: 30, width: 30, borderRadius: 15, marginRight: 16 }}
+                    src={user.profilePic != null ? user.profilePic : Config.env.defaultProfileImage}
+                    alt="user profilePic"
+                  />
+                  <div className={`fontMedium fontSize-16 text-dark'`}>{user.displayName}</div>
+                </div>
+                <SVGIcon
+                  className="removeIcon"
+                  icon="close"
+                  onClick={() => {
+                    this.props.remove(user);
+                  }}
+                  colour={COLOUR_DUSK}
+                />
+                {/* <ConfirmActions declineOnly onDecline={() => {}} /> */}
+              </div>
+            );
+          })}
+        </div>
+      );
+    }
+    return null;
+  }
+
+  render() {
+    return (
+      <div>
+        <div>{this.renderUserAdd()}</div>
+        <div>{this.renderAttendees()}</div>
+      </div>
+    );
+  }
+}
+
+const mapStateToProps = (state) => {
+  return { auth: state.auth };
+};
+
+let exportObj = connect(mapStateToProps, {})(withRouter(AudienceIncluder));
+
+export { exportObj as AudienceIncluder };

package/src/components/AudienceSelector.js

@@ -0,0 +1,549 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+import _ from 'lodash';
+import { connect } from 'react-redux';
+import { setAuth } from '../actions';
+import { RadioButton, DropdownInput } from './';
+import { profileActions, typeActions, userActions } from '../apis';
+import { COLOUR_DUSK } from '../colours';
+import { AudienceIncluder } from './AudienceIncluder';
+import { Text } from './';
+
+class AudienceSelector extends Component {
+  state = {
+    categories: [
+      {
+        Title: 'All Primary Users',
+        Key: 'resident',
+        ShortName: 'Primary',
+      },
+      {
+        Title: 'All Staff Users',
+        Key: 'staff',
+        ShortName: 'Staff',
+      },
+      {
+        Title: 'All Linked Users',
+        Key: 'family',
+        ShortName: 'Linked',
+      },
+    ],
+    types: [],
+    AudienceType: 'All',
+
+    showInclude: false,
+    includeList: [],
+    showExclude: false,
+    excludeList: [],
+    Type: '',
+    Category: '',
+
+    userList: [],
+    tagList: [],
+  };
+
+  componentDidMount() {
+    if (!this.props.disallowUserType) {
+      this.getUserTypes();
+    }
+    if (!this.props.disallowSingleUsers) {
+      this.getUsers();
+    }
+    if (this.props.allowTags) {
+      this.getUserTags();
+    }
+  }
+
+  onSubmit() {
+    if (this.state.AudienceType === 'User' && _.isEmpty(this.state.includeList)) {
+      this.setState({ showInclude: true });
+    }
+  }
+
+  getAudienceType() {
+    return this.state.AudienceType;
+  }
+
+  getAudienceTypeSelection() {
+    if (this.state.AudienceType === 'Category') {
+      return this.state.Category;
+    }
+    if (this.state.AudienceType === 'UserTags') {
+      return this.state.Tag;
+    }
+    return this.state.Type;
+  }
+
+  getIncludeList() {
+    return this.state.includeList;
+  }
+
+  getExcludeList() {
+    return this.state.excludeList;
+  }
+
+  getUsers() {
+    userActions
+      .fetchUsers(this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          userList: res.data.results.Items,
+        });
+      })
+      .catch((error) => {});
+  }
+
+  getUserTags() {
+    profileActions
+      .getUserTagsBySite(this.props.auth.site)
+      .then((res) => {
+        this.setState({
+          tagList: res.data.map((t) => {
+            return { ...t, Key: t.Id };
+          }),
+        });
+      })
+      .catch((error) => {});
+  }
+
+  setType(type, selection) {
+    const newState = {
+      AudienceType: type,
+    };
+    if (type === 'UserType') {
+      newState.Type = selection;
+    }
+    if (type === 'Category') {
+      newState.Category = selection;
+    }
+    this.setState(newState);
+  }
+
+  onChangeOption(type) {
+    this.setState({
+      AudienceType: type,
+      Type: '',
+      Category: '',
+      includeList: [],
+      excludeList: [],
+    });
+    setTimeout(() => {
+      this.props.updateValidation(this.validateAudienceSelection());
+    }, 50);
+  }
+
+  getOptions() {
+    const options = [
+      {
+        Label: 'All users',
+        Value: 'All',
+        onChange: () => this.onChangeOption('All'),
+      },
+      {
+        Label: 'By user category',
+        Value: 'Category',
+        onChange: () => this.onChangeOption('Category'),
+      },
+    ];
+    if (!this.props.disallowUserType) {
+      options.push({
+        Label: 'By user type',
+        Value: 'UserType',
+        onChange: () => this.onChangeOption('UserType'),
+      });
+    }
+    if (this.props.allowTags) {
+      options.push({
+        Label: 'By user tag',
+        Value: 'UserTags',
+        onChange: () => this.onChangeOption('UserTags'),
+      });
+    }
+    if (!this.props.disallowSingleUsers) {
+      options.push({
+        Label: 'To single users',
+        Value: 'User',
+        onChange: () => this.onChangeOption('User'),
+      });
+    }
+    return options;
+  }
+
+  validateAudienceSelection() {
+    if (this.state.AudienceType === 'Category' && !this.validateCategory()) {
+      return false;
+    }
+    if (this.state.AudienceType === 'UserType' && !this.validateType()) {
+      return false;
+    }
+    if (this.state.AudienceType === 'User' && _.isEmpty(this.state.includeList)) {
+      return false;
+    }
+    if (this.state.AudienceType === 'UserTag' && !this.validateTag()) {
+      return false;
+    }
+    return true;
+  }
+
+  selectType(key) {
+    this.setState({
+      Type: key,
+      includeList: [],
+      excludeList: [],
+    });
+    setTimeout(() => {
+      this.props.updateValidation(this.validateAudienceSelection());
+    }, 50);
+  }
+
+  getTypeTitle() {
+    const typeObject = _.find(this.state.types, (t) => {
+      return t.typeName === this.state.Type;
+    });
+    if (typeObject) {
+      return typeObject.displayName;
+    }
+    return '';
+  }
+
+  selectTag = (key) => {
+    this.setState({
+      Tag: key,
+      includeList: [],
+      excludeList: [],
+    });
+    setTimeout(() => {
+      this.props.updateValidation(this.validateAudienceSelection());
+    }, 50);
+  };
+
+  getTagTitle() {
+    const tag = _.find(this.state.tagList, (t) => {
+      return t.Id === this.state.Tag;
+    });
+    if (tag) {
+      return tag.Title;
+    }
+    return '';
+  }
+
+  getUserTypes() {
+    typeActions
+      .getUserTypes(this.props.auth.site)
+      .then((res) => {
+        this.props.setAuth({ userTypes: _.cloneDeep(res.data) });
+        res.data.forEach((e) => {
+          e.Title = e.displayName;
+          e.Key = e.typeName;
+
+          if (e.category) {
+            const category = _.find(this.state.categories, (c) => {
+              return c.Key === e.category;
+            });
+            const shortName = category ? `(${category.ShortName}) ` : '';
+            e.Title = `${shortName} ${e.Title}`;
+          }
+        });
+        this.setState({
+          types: res.data,
+        });
+      })
+      .catch((error) => {});
+  }
+
+  getUserList() {
+    if (this.state.AudienceType === 'UserType' && !_.isEmpty(this.state.Type)) {
+      let users = [];
+      this.state.userList.forEach((element) => {
+        if (element.type !== this.state.Type) users.push(element);
+      });
+      return _.sortBy(users, 'displayName');
+    }
+    if (this.state.AudienceType === 'Category' && !_.isEmpty(this.state.Category)) {
+      let users = [];
+      let types = _.filter(this.state.types, (type) => {
+        return type.category === this.state.Category;
+      }).map((type) => {
+        return type.typeName;
+      });
+      this.state.userList.forEach((element) => {
+        if (types.indexOf(element.type) === -1) {
+          users.push(element);
+        }
+      });
+      return _.sortBy(users, 'displayName');
+    }
+    return _.sortBy(this.state.userList, 'displayName');
+  }
+
+  selectCat(key, e) {
+    this.setState({
+      Category: key,
+      includeList: [],
+      excludeList: [],
+    });
+    setTimeout(() => {
+      this.props.updateValidation(this.validateAudienceSelection());
+    }, 50);
+  }
+
+  getCatTitle() {
+    const typeObject = _.find(this.state.categories, (t) => {
+      return t.Key === this.state.Category;
+    });
+    if (typeObject) {
+      return typeObject.Title;
+    }
+    return '';
+  }
+
+  validateCategory() {
+    return !_.isUndefined(this.state.Category) && !_.isEmpty(this.state.Category);
+  }
+
+  validateType() {
+    return !_.isUndefined(this.state.Type) && !_.isEmpty(this.state.Type);
+  }
+
+  validateTag() {
+    return !_.isEmpty(this.state.Tag);
+  }
+
+  showUserPickers(isInclude) {
+    if (isInclude && this.state.AudienceType === 'User') {
+      return true;
+    }
+    if (isInclude && !this.props.allowIncludes) {
+      return false;
+    }
+    if (!isInclude && !this.props.allowExcludes) {
+      return false;
+    }
+    if (isInclude && this.state.AudienceType === 'All') {
+      return false;
+    }
+    if (!isInclude && this.state.AudienceType === 'User') {
+      return false;
+    }
+    if (
+      (this.state.AudienceType === 'Category' && _.isEmpty(this.state.Category)) ||
+      (this.state.AudienceType === 'UserType' && _.isEmpty(this.state.Type))
+    ) {
+      return false;
+    }
+    return true;
+  }
+
+  getUserExcludeList() {
+    if (this.state.AudienceType === 'UserType' && !_.isEmpty(this.state.Type)) {
+      let users = [];
+      this.state.userList.forEach((element) => {
+        if (element.type === this.state.Type) users.push(element);
+      });
+      return _.sortBy(users, 'displayName');
+    }
+    if (this.state.AudienceType === 'Category' && !_.isEmpty(this.state.Category)) {
+      let users = [];
+      let types = _.filter(this.state.types, (type) => {
+        return type.category === this.state.Category;
+      }).map((type) => {
+        return type.typeName;
+      });
+      this.state.userList.forEach((element) => {
+        if (types.indexOf(element.type) > -1) {
+          users.push(element);
+        }
+      });
+      return _.sortBy(users, 'displayName');
+    }
+    return _.sortBy(this.state.userList, 'displayName');
+  }
+
+  addToInc(user) {
+    let list = [...this.state.includeList];
+    list.push({
+      Id: user.Id,
+      displayName: user.displayName,
+      profilePic: user.profilePic,
+    });
+    this.setState({ includeList: list });
+    setTimeout(() => {
+      this.props.updateValidation(this.validateAudienceSelection());
+    }, 50);
+  }
+
+  removeUserInc(user) {
+    this.setState({
+      includeList: _.filter(this.state.includeList, (ev) => {
+        return ev.Id !== user.Id;
+      }),
+    });
+    setTimeout(() => {
+      this.props.updateValidation(this.validateAudienceSelection());
+    }, 50);
+  }
+
+  addToEx(user) {
+    let list = [...this.state.excludeList];
+    list.push({
+      Id: user.Id,
+      displayName: user.displayName,
+      profilePic: user.profilePic,
+    });
+    this.setState({ excludeList: list });
+  }
+
+  removeUserEx(user) {
+    this.setState({
+      excludeList: _.filter(this.state.excludeList, (ev) => {
+        return ev.Id !== user.Id;
+      }),
+    });
+  }
+
+  renderExcludes() {
+    if (!this.showUserPickers(false)) {
+      return null;
+    }
+    return (
+      <div key="excludes" className="marginTop-16">
+        <div
+          className="flex flex-between pointer"
+          onClick={() => {
+            this.setState({ showExclude: !this.state.showExclude });
+          }}
+        >
+          <div className="flex">
+            <Text type="formTitleSmall" className="marginBottom-16">
+              Exclude Users From Selection {`(${this.state.excludeList.length})`}
+            </Text>
+          </div>
+          <FontAwesome style={{ color: COLOUR_DUSK, fontSize: 12 }} name={this.state.showExclude ? 'chevron-up' : 'chevron-down'} />
+        </div>
+        {this.state.showExclude && (
+          <AudienceIncluder
+            add={this.addToEx.bind(this)}
+            remove={this.removeUserEx.bind(this)}
+            selectionList={this.state.excludeList}
+            userList={this.getUserExcludeList()}
+          />
+        )}
+      </div>
+    );
+  }
+
+  renderIncludes() {
+    if (!this.showUserPickers(true)) {
+      return null;
+    }
+    return (
+      <div key="includes" className="marginTop-16">
+        <div
+          className="flex flex-between pointer"
+          onClick={() => {
+            this.setState({ showInclude: !this.state.showInclude });
+          }}
+        >
+          <div className="flex">
+            <Text type="formTitleSmall" className="marginBottom-16">
+              {this.state.AudienceType !== 'User' ? 'Add Other' : 'Select'} Users {`(${this.state.includeList.length})`}
+            </Text>
+          </div>
+          <FontAwesome style={{ color: COLOUR_DUSK, fontSize: 12 }} name={this.state.showInclude ? 'chevron-up' : 'chevron-down'} />
+        </div>
+        {this.state.showInclude && (
+          <AudienceIncluder
+            add={this.addToInc.bind(this)}
+            remove={this.removeUserInc.bind(this)}
+            selectionList={this.state.includeList}
+            userList={this.getUserList()}
+          />
+        )}
+      </div>
+    );
+  }
+
+  render() {
+    return (
+      <div>
+        {/* <div className={this.props.className || 'padding-32 paddingVertical-40 bottomDivideBorder'}> */}
+        <Text type="formTitleSmall" className="marginBottom-16">
+          {this.props.title || 'Target Audience'}
+        </Text>
+        <RadioButton
+          isActive={this.state.AudienceType}
+          rowStyle={{ flexDirection: 'column' }}
+          buttonStyle={{ marginBottom: 8 }}
+          options={this.getOptions()}
+          disabled={this.props.disabled}
+        />
+        {this.state.AudienceType === 'Category' && (
+          <DropdownInput
+            id="typeSelect"
+            // label='User Category'
+            alwaysShowLabel
+            placeholder="User Category"
+            value={this.getCatTitle()}
+            isValid={() => {
+              return this.validateCategory();
+            }}
+            showError={() => {
+              return this.state.showWarnings && !this.validateCategory();
+            }}
+            options={this.state.categories}
+            onSelect={this.selectCat.bind(this)}
+            style={{ width: 325, marginTop: 16 }}
+            isRequired
+            disabled={this.props.disabled}
+          />
+        )}
+        {this.state.AudienceType === 'UserType' && (
+          <DropdownInput
+            id="typeSelect"
+            // label='User Type'
+            alwaysShowLabel
+            placeholder="User Type"
+            value={this.getTypeTitle()}
+            isValid={() => {
+              return this.validateType();
+            }}
+            showError={() => {
+              return this.state.showWarnings && !this.validateType();
+            }}
+            options={this.state.types}
+            onSelect={this.selectType.bind(this)}
+            style={{ width: 325, marginTop: 16 }}
+            isRequired
+            disabled={this.props.disabled}
+          />
+        )}
+        {this.state.AudienceType === 'UserTags' && (
+          <DropdownInput
+            id="tagSelect"
+            alwaysShowLabel
+            placeholder="User Tag"
+            value={this.getTagTitle()}
+            isValid={() => {
+              return this.validateTag();
+            }}
+            showError={() => {
+              return this.state.showWarnings && !this.validateTag();
+            }}
+            options={this.state.tagList}
+            onSelect={this.selectTag}
+            style={{ width: 325, marginTop: 16 }}
+            isRequired
+            disabled={this.props.disabled}
+          />
+        )}
+        {/* </div> */}
+        {this.renderIncludes()}
+        {this.renderExcludes()}
+      </div>
+    );
+  }
+}
+
+const toExport = connect(null, { setAuth }, null, { withRef: true })(AudienceSelector);
+
+export { toExport as AudienceSelector };