@plusscommunities/pluss-circles-web 1.0.17 → 1.0.18

package/dist/index.esm.js

@@ -7,7 +7,7 @@ import _inherits from '@babel/runtime/helpers/inherits';
 import _possibleConstructorReturn from '@babel/runtime/helpers/possibleConstructorReturn';
 import _getPrototypeOf from '@babel/runtime/helpers/getPrototypeOf';
 import _regeneratorRuntime from '@babel/runtime/regenerator';
-import React, { Component } from 'react';
+import React, { Component, useState, useEffect } from 'react';
 import { connect } from 'react-redux';
 import _ from 'lodash';
 import moment from 'moment';
@@ -17,6 +17,8 @@ import { Table } from 'react-bootstrap';
 import FontAwesome from 'react-fontawesome';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { withRouter } from 'react-router';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { faUserGroup, faMessage, faUserTie, faUsers, faUsersRectangle, faPeopleArrows } from '@fortawesome/free-solid-svg-icons';
 
 var values = {
   featureKey: 'circles',
@@ -151,10 +153,10 @@ var circleRemoved = function circleRemoved(circleId) {
 };
 
 var Helper$3 = PlussCore.Helper,
-    Session$3 = PlussCore.Session;
+    Session$4 = PlussCore.Session;
 var circleActions = {
   getAll: function getAll(site) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'GET',
       url: Helper$3.getUrl(values.serviceKey, 'get/all', {
         site: site
@@ -162,7 +164,7 @@ var circleActions = {
     });
   },
   getFiles: function getFiles(circleId) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'GET',
       url: Helper$3.getUrl(values.serviceKey, 'get/files', {
         circleId: circleId
@@ -170,7 +172,7 @@ var circleActions = {
     });
   },
   getImages: function getImages(circleId) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'GET',
       url: Helper$3.getUrl(values.serviceKey, 'get/images', {
         circleId: circleId
@@ -178,7 +180,7 @@ var circleActions = {
     });
   },
   add: function add(site, title, image, audience, isPublic) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'POST',
       url: Helper$3.getUrl(values.serviceKey, 'update/add'),
       data: {
@@ -191,7 +193,7 @@ var circleActions = {
     });
   },
   edit: function edit(circleId, title, image, audience, isPublic) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'POST',
       url: Helper$3.getUrl(values.serviceKey, 'update/edit'),
       data: {
@@ -204,7 +206,7 @@ var circleActions = {
     });
   },
   delete: function _delete(circleId) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'POST',
       url: Helper$3.getUrl(values.serviceKey, 'update/delete'),
       data: {
@@ -213,7 +215,7 @@ var circleActions = {
     });
   },
   addAdmin: function addAdmin(circleId, userId) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'POST',
       url: Helper$3.getUrl(values.serviceKey, 'update/addadmin'),
       data: {
@@ -223,7 +225,7 @@ var circleActions = {
     });
   },
   removeAdmin: function removeAdmin(circleId, userId) {
-    return Session$3.authedFunction({
+    return Session$4.authedFunction({
       method: 'POST',
       url: Helper$3.getUrl(values.serviceKey, 'update/removeadmin'),
       data: {
@@ -255,7 +257,7 @@ var circleActions = {
                 query.limit = limit;
               }
 
-              return _context.abrupt("return", Session$3.authedFunction({
+              return _context.abrupt("return", Session$4.authedFunction({
                 method: 'GET',
                 url: Helper$3.getUrl(values.serviceKey, 'getMessages', query)
               }));
@@ -280,7 +282,7 @@ var circleActions = {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
-              return _context2.abrupt("return", Session$3.authedFunction({
+              return _context2.abrupt("return", Session$4.authedFunction({
                 method: 'post',
                 url: Helper$3.getUrl(values.serviceKey, 'sendMessage'),
                 data: {
@@ -305,11 +307,14 @@ var circleActions = {
   }()
 };
 
+var Apis$1 = PlussCore.Apis;
+var analyticsActions = Apis$1.analyticsActions;
+
 function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$7() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Components$3 = PlussCore.Components,
-    Session$2 = PlussCore.Session,
+var Components$4 = PlussCore.Components,
+    Session$3 = PlussCore.Session,
     Helper$2 = PlussCore.Helper;
 
 var Circles = /*#__PURE__*/function (_Component) {
@@ -372,13 +377,13 @@ var Circles = /*#__PURE__*/function (_Component) {
 
     _defineProperty(_assertThisInitialized(_this), "canAddNew", function () {
       var auth = _this.props.auth;
-      return Session$2.validateAccess(auth.site, values.permission, auth);
+      return Session$3.validateAccess(auth.site, values.permission, auth);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onAddNew", function () {
       var auth = _this.props.auth;
 
-      if (Session$2.validateAccess(auth.site, values.permission, auth)) {
+      if (Session$3.validateAccess(auth.site, values.permission, auth)) {
         _this.props.history.push("/".concat(values.featureKey, "/add"));
       }
     });
@@ -535,7 +540,7 @@ var Circles = /*#__PURE__*/function (_Component) {
     value: function validateCircleAdmin(circle, onlyCreator) {
       var _this4 = this;
 
-      if (Session$2.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
+      if (Session$3.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
         return true;
       }
 
@@ -559,7 +564,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React.createElement(Link, {
         to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
       }, this.getTitle(circle))), /*#__PURE__*/React.createElement("td", null, moment(circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React.createElement("td", null, circle.Audience.map(function (user) {
-        return /*#__PURE__*/React.createElement(Components$3.ProfilePic, {
+        return /*#__PURE__*/React.createElement(Components$4.ProfilePic, {
           size: 30,
           image: user.profilePic,
           hoverText: user.displayName,
@@ -599,24 +604,24 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     key: "renderFilters",
     value: function renderFilters() {
-      var userFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
+      var userFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
         className: "marginRight-10",
         onClick: this.openUserFilter,
         text: "User"
       });
-      var typeFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
+      var typeFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
         className: "marginRight-10",
         onClick: this.openTypeFilter,
         text: "Type"
       });
 
       if (this.state.selectedUserFilter) {
-        userFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
+        userFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
           className: "marginRight-10",
           onClick: this.openUserFilter,
           rightIcon: "close",
           rightClick: this.removeUserFilter
-        }, /*#__PURE__*/React.createElement(Components$3.UserListing, {
+        }, /*#__PURE__*/React.createElement(Components$4.UserListing, {
           size: 15,
           user: this.state.selectedUserFilter,
           textClass: "tag_text"
@@ -624,7 +629,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }
 
       if (this.state.selectedTypeFilter) {
-        typeFilter = /*#__PURE__*/React.createElement(Components$3.Tag, {
+        typeFilter = /*#__PURE__*/React.createElement(Components$4.Tag, {
           className: "marginRight-10",
           onClick: this.openTypeFilter,
           rightIcon: "close",
@@ -635,7 +640,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React.createElement("div", {
         className: "flex flex-center marginTop-20"
-      }, /*#__PURE__*/React.createElement(Components$3.Text, {
+      }, /*#__PURE__*/React.createElement(Components$4.Text, {
         type: "h5",
         className: "marginRight-20"
       }, "Filter by"), userFilter, typeFilter);
@@ -649,14 +654,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Components$3.Popup, {
+      return /*#__PURE__*/React.createElement(Components$4.Popup, {
         title: "Select User",
         maxWidth: 600,
         minWidth: 400,
         minHeight: 400,
         hasPadding: true,
         onClose: this.closeUserFilter
-      }, /*#__PURE__*/React.createElement(Components$3.GenericInput, {
+      }, /*#__PURE__*/React.createElement(Components$4.GenericInput, {
         id: "userSearch",
         type: "text",
         label: "Search",
@@ -667,7 +672,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         },
         alwaysShowLabel: true
       }), this.getUsers().map(function (user) {
-        return /*#__PURE__*/React.createElement(Components$3.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$4.UserListing, {
           key: user.userId,
           user: user,
           onClick: function onClick() {
@@ -685,19 +690,19 @@ var Circles = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Components$3.Popup, {
+      return /*#__PURE__*/React.createElement(Components$4.Popup, {
         title: "Select Type",
         maxWidth: 600,
         minWidth: 400,
         hasPadding: true,
         onClose: this.closeTypeFilter
-      }, /*#__PURE__*/React.createElement(Components$3.Tag, {
+      }, /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
           _this7.selectTypeFilter('circle');
         },
         text: _.capitalize(values.entityName),
         className: "marginRight-10"
-      }), /*#__PURE__*/React.createElement(Components$3.Tag, {
+      }), /*#__PURE__*/React.createElement(Components$4.Tag, {
         onClick: function onClick() {
           _this7.selectTypeFilter('private');
         },
@@ -709,12 +714,12 @@ var Circles = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this8 = this;
 
-      return /*#__PURE__*/React.createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React.createElement(Components$3.Header, null, this.canAddNew() && /*#__PURE__*/React.createElement(Components$3.AddButton, {
+      return /*#__PURE__*/React.createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React.createElement(Components$4.Header, null, this.canAddNew() && /*#__PURE__*/React.createElement(Components$4.AddButton, {
         onClick: this.onAddNew,
         text: "NEW ".concat(_.upperCase(values.entityName))
       })), /*#__PURE__*/React.createElement("div", {
         className: "pageContainer paddingVertical-20 paddingHorizontal-40"
-      }, /*#__PURE__*/React.createElement(Components$3.Text, {
+      }, /*#__PURE__*/React.createElement(Components$4.Text, {
         type: "h1",
         className: ""
       }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React.createElement(Table, {
@@ -741,7 +746,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   return Circles;
 }(Component);
 
-var mapStateToProps$2 = function mapStateToProps(state) {
+var mapStateToProps$3 = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
   var auth = state.auth;
   return {
@@ -751,7 +756,7 @@ var mapStateToProps$2 = function mapStateToProps(state) {
   };
 };
 
-var Circles$1 = connect(mapStateToProps$2, {
+var Circles$1 = connect(mapStateToProps$3, {
   circlesLoaded: circlesLoaded,
   circleRemoved: circleRemoved
 })(Circles);
@@ -760,8 +765,8 @@ function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeRefl
 
 function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var Actions$1 = PlussCore.Actions,
-    Components$2 = PlussCore.Components,
-    Session$1 = PlussCore.Session,
+    Components$3 = PlussCore.Components,
+    Session$2 = PlussCore.Session,
     Apis = PlussCore.Apis,
     Colours$2 = PlussCore.Colours,
     Helper$1 = PlussCore.Helper;
@@ -1037,7 +1042,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
   _createClass(AddCircle, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      Session$1.checkLoggedIn(this, this.props.auth);
+      Session$2.checkLoggedIn(this, this.props.auth);
       this.props.addRecentlyCreated(values.entityKey);
       this.getUsers();
       this.checkGetCircle();
@@ -1083,7 +1088,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     key: "renderSuccess",
     value: function renderSuccess() {
       if (!this.state.success) return null;
-      return /*#__PURE__*/React.createElement(Components$2.SuccessPopup, {
+      return /*#__PURE__*/React.createElement(Components$3.SuccessPopup, {
         text: "".concat(_.capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? 'added' : 'edited'),
         buttons: [{
           type: 'outlined',
@@ -1100,12 +1105,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       var _this4 = this;
 
       if (this.state.updating) {
-        return /*#__PURE__*/React.createElement(Components$2.Button, {
+        return /*#__PURE__*/React.createElement(Components$3.Button, {
           buttonType: "secondary"
         }, "Saving...");
       }
 
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$2.Button, {
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$3.Button, {
         inline: true,
         buttonType: "tertiary",
         onClick: function onClick() {
@@ -1115,7 +1120,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         style: {
           marginRight: 16
         }
-      }, "Cancel"), /*#__PURE__*/React.createElement(Components$2.Button, {
+      }, "Cancel"), /*#__PURE__*/React.createElement(Components$3.Button, {
         inline: true,
         buttonType: "primary",
         onClick: this.onSave,
@@ -1129,7 +1134,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React.createElement("div", {
         className: "optionsContent_bottom"
-      }, /*#__PURE__*/React.createElement(Components$2.RadioButton, {
+      }, /*#__PURE__*/React.createElement(Components$3.RadioButton, {
         label: "Do you want to make this ".concat(values.entityName, " a public ").concat(values.entityName, "?"),
         isActive: this.state.isPublic,
         options: [{
@@ -1184,7 +1189,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         return null;
       }
 
-      return /*#__PURE__*/React.createElement(Components$2.OptionsSection, {
+      return /*#__PURE__*/React.createElement(Components$3.OptionsSection, {
         options: options,
         selected: this.state.selectedOption,
         selectOption: this.selectOption
@@ -1197,12 +1202,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
         className: "padding-60 paddingVertical-40 bottomDivideBorder"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$3.Text, {
         type: "formTitleLarge",
         className: "marginBottom-24"
       }, this.state.circleId == null ? 'New' : 'Edit', " ", _.capitalize(values.entityName)), /*#__PURE__*/React.createElement("div", {
         className: "flex flex-reverse"
-      }, /*#__PURE__*/React.createElement(Components$2.ImageInput, {
+      }, /*#__PURE__*/React.createElement(Components$3.ImageInput, {
         ref: function ref(_ref2) {
           _this6.imageInput = _ref2;
         },
@@ -1214,7 +1219,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         }
       }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React.createElement(Components$2.GenericInput, {
+      }, /*#__PURE__*/React.createElement(Components$3.GenericInput, {
         id: "title",
         type: "text",
         label: "Title",
@@ -1233,16 +1238,16 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         }
       })))), /*#__PURE__*/React.createElement("div", {
         className: "padding-60 paddingVertical-40 bottomDivideBorder"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$3.Text, {
         type: "formTitleMedium"
       }, "Members"), /*#__PURE__*/React.createElement("div", {
         className: "flex marginTop-20"
       }, /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$3.Text, {
         type: "formTitleSmall",
         className: "marginBottom-10"
-      }, "Select Users"), /*#__PURE__*/React.createElement(Components$2.GenericInput, {
+      }, "Select Users"), /*#__PURE__*/React.createElement(Components$3.GenericInput, {
         id: "userSearch",
         type: "text",
         label: "Search",
@@ -1253,7 +1258,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         },
         alwaysShowLabel: true
       }), this.getShownUsers().map(function (user) {
-        return /*#__PURE__*/React.createElement(Components$2.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$3.UserListing, {
           key: user.userId,
           user: user,
           onClick: function onClick() {
@@ -1262,23 +1267,23 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         });
       })), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React.createElement(Components$2.Text, {
+      }, /*#__PURE__*/React.createElement(Components$3.Text, {
         type: "formTitleSmall",
         className: "marginBottom-10"
       }, "Selected"), this.state.selectedUsers.map(function (user) {
-        return /*#__PURE__*/React.createElement(Components$2.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$3.UserListing, {
           key: user.userId,
           user: user,
           rightContent: /*#__PURE__*/React.createElement("div", {
             className: "flex flex-reverse flex-center"
-          }, /*#__PURE__*/React.createElement(Components$2.SVGIcon, {
+          }, /*#__PURE__*/React.createElement(Components$3.SVGIcon, {
             className: "removeIcon marginLeft-8",
             icon: "close",
             colour: Colours$2.COLOUR_DUSK,
             onClick: function onClick() {
               _this6.onSelectUser(user);
             }
-          }), /*#__PURE__*/React.createElement(Components$2.StatusButton, {
+          }), /*#__PURE__*/React.createElement(Components$3.StatusButton, {
             isActive: user.isAdmin,
             activate: function activate() {
               _this6.addAdmin(user);
@@ -1298,18 +1303,18 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var success = this.state.success;
-      return /*#__PURE__*/React.createElement(Components$2.OverlayPage, null, /*#__PURE__*/React.createElement(Components$2.OverlayPageContents, {
+      return /*#__PURE__*/React.createElement(Components$3.OverlayPage, null, /*#__PURE__*/React.createElement(Components$3.OverlayPageContents, {
         noBottomButtons: success
-      }, /*#__PURE__*/React.createElement(Components$2.OverlayPageSection, {
+      }, /*#__PURE__*/React.createElement(Components$3.OverlayPageSection, {
         className: "pageSectionWrapper--newPopup"
-      }, /*#__PURE__*/React.createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React.createElement(Components$2.OverlayPageBottomButtons, null, this.renderSubmit()));
+      }, /*#__PURE__*/React.createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React.createElement(Components$3.OverlayPageBottomButtons, null, this.renderSubmit()));
     }
   }]);
 
   return AddCircle;
 }(Component);
 
-var mapStateToProps$1 = function mapStateToProps(state) {
+var mapStateToProps$2 = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
   var auth = state.auth;
   return {
@@ -1319,7 +1324,7 @@ var mapStateToProps$1 = function mapStateToProps(state) {
   };
 };
 
-var AddCircle$1 = connect(mapStateToProps$1, {
+var AddCircle$1 = connect(mapStateToProps$2, {
   circlesLoaded: circlesLoaded,
   circleUpdated: circleUpdated,
   addRecentlyCreated: Actions$1.addRecentlyCreated
@@ -1328,10 +1333,10 @@ var AddCircle$1 = connect(mapStateToProps$1, {
 function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
 function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var Components$1 = PlussCore.Components,
+var Components$2 = PlussCore.Components,
     Helper = PlussCore.Helper,
     Actions = PlussCore.Actions,
-    Session = PlussCore.Session,
+    Session$1 = PlussCore.Session,
     Colours$1 = PlussCore.Colours;
 
 var Circle = /*#__PURE__*/function (_Component) {
@@ -1752,7 +1757,7 @@ var Circle = /*#__PURE__*/function (_Component) {
     value: function validateCircleAdmin() {
       var _this4 = this;
 
-      if (Session.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
+      if (Session$1.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
         return true;
       }
 
@@ -1766,7 +1771,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       var _this5 = this;
 
       if (!this.isMember()) {
-        return /*#__PURE__*/React.createElement(Components$1.Text, {
+        return /*#__PURE__*/React.createElement(Components$2.Text, {
           type: "highlightedHelp",
           className: "chat_noMessage"
         }, "You can't send a message to this ", _.capitalize(values.entityName), " as you are not a member.");
@@ -1780,7 +1785,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         onClick: this.sendMessage
       }), /*#__PURE__*/React.createElement("div", {
         className: "chat_inputContainer"
-      }, /*#__PURE__*/React.createElement(Components$1.GenericInput, {
+      }, /*#__PURE__*/React.createElement(Components$2.GenericInput, {
         id: "messageInput",
         type: "textarea",
         className: "chat_input",
@@ -1807,7 +1812,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         style: {
           display: this.state.imageInputShowing ? 'block' : 'none'
         }
-      }, /*#__PURE__*/React.createElement(Components$1.ImageInput, {
+      }, /*#__PURE__*/React.createElement(Components$2.ImageInput, {
         ref: function ref(_ref4) {
           _this5.imageInput = _ref4;
         },
@@ -1822,7 +1827,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         style: {
           display: this.state.fileInputShowing ? 'block' : 'none'
         }
-      }, /*#__PURE__*/React.createElement(Components$1.FileInput, {
+      }, /*#__PURE__*/React.createElement(Components$2.FileInput, {
         ref: function ref(_ref5) {
           _this5.fileInput = _ref5;
         },
@@ -1843,7 +1848,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/React.createElement("div", {
           key: m._id,
           className: "message"
-        }, /*#__PURE__*/React.createElement(Components$1.Text, {
+        }, /*#__PURE__*/React.createElement(Components$2.Text, {
           type: "h5",
           className: "message_system"
         }, m.text));
@@ -1853,28 +1858,28 @@ var Circle = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React.createElement("div", {
         key: m._id,
         className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '')
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "h5-noUpper",
         className: "message_time"
       }, moment.utc(m.createdAt).local().format('D MMM YYYY • h:mma')), /*#__PURE__*/React.createElement("div", {
         className: "message_inner"
-      }, /*#__PURE__*/React.createElement(Components$1.ProfilePic, {
+      }, /*#__PURE__*/React.createElement(Components$2.ProfilePic, {
         size: 40,
         image: m.user.avatar,
         className: "message_profilePic"
       }), /*#__PURE__*/React.createElement("div", {
         className: "message_bubbleContainer"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_name"
       }, m.user.name, m.replyingTo ? " replied to ".concat(m.replyingTo.user.name) : ''), m.replyingTo && /*#__PURE__*/React.createElement("div", {
         className: "message_replyBubble"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_text"
       }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React.createElement("div", {
         className: "message_bubble"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body",
         className: "message_text"
       }, Helper.toParagraphed(m.text)), /*#__PURE__*/React.createElement("div", null, (m.image || []).map(function (url, i) {
@@ -1888,14 +1893,14 @@ var Circle = /*#__PURE__*/function (_Component) {
           alt: Helper.getFileName(url)
         }));
       })), /*#__PURE__*/React.createElement("div", null, (m.attachments || []).map(function (url, i) {
-        return /*#__PURE__*/React.createElement(Components$1.Attachment, {
+        return /*#__PURE__*/React.createElement(Components$2.Attachment, {
           source: url,
           key: i,
           white: isSelf
         });
       }))), /*#__PURE__*/React.createElement("div", {
         className: "message_reply"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "button",
         onClick: function onClick() {
           _this6.onReply(m);
@@ -1944,12 +1949,12 @@ var Circle = /*#__PURE__*/function (_Component) {
         onClick: this.toggleMembers
       }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleMedium"
       }, "Member", Helper.getPluralS(members.length), " (", members.length, ")"))), this.state.membersExpanded && /*#__PURE__*/React.createElement("div", {
         className: "paddingTop-8"
       }, members.map(function (user) {
-        return /*#__PURE__*/React.createElement(Components$1.UserListing, {
+        return /*#__PURE__*/React.createElement(Components$2.UserListing, {
           user: user
         });
       }))), /*#__PURE__*/React.createElement("div", {
@@ -1962,7 +1967,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         onClick: this.toggleImages
       }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleMedium"
       }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React.createElement("div", {
         className: "paddingTop-8"
@@ -1985,12 +1990,12 @@ var Circle = /*#__PURE__*/function (_Component) {
         onClick: this.toggleFiles
       }), /*#__PURE__*/React.createElement("div", {
         className: "flex-1"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleMedium"
       }, "File", Helper.getPluralS(this.state.files.length), " (", this.state.files.length, ")"))), this.state.filesExpanded && /*#__PURE__*/React.createElement("div", {
         className: "paddingTop-8"
       }, this.state.files.map(function (file, i) {
-        return /*#__PURE__*/React.createElement(Components$1.Attachment, {
+        return /*#__PURE__*/React.createElement(Components$2.Attachment, {
           source: file.Url,
           key: i
         });
@@ -2010,13 +2015,13 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "chat_replyTo"
       }, /*#__PURE__*/React.createElement("div", {
         className: "chat_replyTo_container"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "h5"
-      }, "Replying to ", m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !_.isEmpty(m.text) && /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, "Replying to ", m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !_.isEmpty(m.text) && /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "body"
       }, m.text.substr(0, 50))), /*#__PURE__*/React.createElement("div", {
         className: "chat_replyTo_remove"
-      }, /*#__PURE__*/React.createElement(Components$1.SVGIcon, {
+      }, /*#__PURE__*/React.createElement(Components$2.SVGIcon, {
         className: "removeIcon",
         icon: "close",
         onClick: function onClick() {
@@ -2030,13 +2035,13 @@ var Circle = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this8 = this;
 
-      return /*#__PURE__*/React.createElement(Components$1.OverlayPage, {
+      return /*#__PURE__*/React.createElement(Components$2.OverlayPage, {
         fullPage: true,
         fullPageStyle: {
           display: 'flex',
           flexDirection: 'column'
         }
-      }, /*#__PURE__*/React.createElement(Components$1.Header, {
+      }, /*#__PURE__*/React.createElement(Components$2.Header, {
         rightContent: this.renderHeaderRight()
       }, /*#__PURE__*/React.createElement(FontAwesome, {
         className: "header_back",
@@ -2044,21 +2049,21 @@ var Circle = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           window.history.back();
         }
-      }), /*#__PURE__*/React.createElement(Components$1.Text, {
+      }), /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "formTitleLarge",
         className: "header_title"
       }, this.getTitle())), /*#__PURE__*/React.createElement("div", {
         className: "flex flex-1 flex-reverse overflow-hidden"
       }, this.renderSideBar(), /*#__PURE__*/React.createElement("div", {
         className: "flex-1 flex flex-column overflow-hidden"
-      }, /*#__PURE__*/React.createElement(Components$1.Header, {
+      }, /*#__PURE__*/React.createElement(Components$2.Header, {
         onlyContainer: true
       }, /*#__PURE__*/React.createElement("div", {
         className: "flex flex-center flex-1 paddingHorizontal-16"
-      }, /*#__PURE__*/React.createElement(Components$1.Text, {
+      }, /*#__PURE__*/React.createElement(Components$2.Text, {
         type: "h5",
         className: "marginRight-20"
-      }, "Filter by"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$1.GenericInput, {
+      }, "Filter by"), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$2.GenericInput, {
         id: "messageDate",
         label: "Date",
         alwaysShowLabel: true,
@@ -2069,13 +2074,13 @@ var Circle = /*#__PURE__*/function (_Component) {
             showMessageDate: !_this8.state.showMessageDate
           });
         },
-        rightContent: !_.isEmpty(this.state.messageDate) && /*#__PURE__*/React.createElement(Components$1.SVGIcon, {
+        rightContent: !_.isEmpty(this.state.messageDate) && /*#__PURE__*/React.createElement(Components$2.SVGIcon, {
           colour: Colours$1.COLOUR_DUSK_LIGHT,
           icon: "close",
           className: "timepicker_clear",
           onClick: this.onClearDate
         })
-      }), this.state.showMessageDate && /*#__PURE__*/React.createElement(Components$1.DatePicker, {
+      }), this.state.showMessageDate && /*#__PURE__*/React.createElement(Components$2.DatePicker, {
         hideTop: true,
         selectedDate: this.state.messageDate,
         selectDate: this.handleMessageDateChange
@@ -2097,7 +2102,7 @@ var Circle = /*#__PURE__*/function (_Component) {
   return Circle;
 }(Component);
 
-var mapStateToProps = function mapStateToProps(state) {
+var mapStateToProps$1 = function mapStateToProps(state) {
   var circles = state[values.reducerKey].circles;
   var auth = state.auth;
   return {
@@ -2107,11 +2112,259 @@ var mapStateToProps = function mapStateToProps(state) {
   };
 };
 
-var Circle$1 = connect(mapStateToProps, {
+var Circle$1 = connect(mapStateToProps$1, {
   circlesLoaded: circlesLoaded,
   setNavData: Actions.setNavData
 })(Circle);
 
+var Analytics$1 = PlussCore.Analytics,
+    Session = PlussCore.Session,
+    Components$1 = PlussCore.Components;
+
+var getInitialState = function getInitialState() {
+  return {
+    isLoading: true,
+    messages: 0,
+    prevMessages: 0,
+    staffMessages: 0,
+    prevStaffMessages: 0,
+    residentMessages: 0,
+    prevResidentMessages: 0,
+    groupMessages: 0,
+    prevGroupMessages: 0,
+    privateMessages: 0,
+    prevPrivateMessages: 0,
+    activeGroups: 0,
+    prevActiveGroups: 0
+  };
+}; // AnalyticsHub Component
+
+
+var AnalyticsHub = function AnalyticsHub(_ref) {
+  var startTime = _ref.startTime,
+      endTime = _ref.endTime,
+      auth = _ref.auth,
+      prevText = _ref.prevText,
+      dayCount = _ref.dayCount,
+      strings = _ref.strings;
+
+  var _useState = useState(getInitialState()),
+      _useState2 = _slicedToArray(_useState, 2),
+      analyticsData = _useState2[0],
+      setAnalyticsData = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isExportOpen = _useState4[0],
+      setIsExportOpen = _useState4[1];
+
+  var hasAccess = Session.validateAccess(auth.site, values.permissionNewsletter, auth);
+
+  if (!hasAccess) {
+    return null;
+  }
+
+  var featureTitle = function (key) {
+    if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+      return values.textFeatureTitle;
+    }
+
+    return strings.sideNav[key];
+  }();
+
+  var exportColumns = [{
+    label: 'Select All',
+    key: ''
+  }, {
+    label: 'Start Date',
+    key: 'startDate'
+  }, {
+    label: 'End Date',
+    key: 'endDate'
+  }, {
+    label: 'Messages',
+    key: 'messages'
+  }, {
+    label: 'Messages by Staff',
+    key: 'staffMessages'
+  }, {
+    label: 'Messages by Primary Users',
+    key: 'residentMessages'
+  }, {
+    label: 'Group Messages',
+    key: 'groupMessages'
+  }, {
+    label: 'Private Messages',
+    key: 'privateMessages'
+  }, {
+    label: 'Groups with Messages',
+    key: 'activeGroups'
+  }];
+  useEffect(function () {
+    getData();
+  }, [startTime, endTime]);
+
+  var getData = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var timeDifference, _yield$Promise$all, _yield$Promise$all2, currentStatsResponse, prevStatsResponse, data;
+
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setAnalyticsData(getInitialState()); // Load analytics data here using startTime and endTime
+
+              timeDifference = endTime - startTime;
+              _context.next = 4;
+              return Promise.all([analyticsActions.getAggregateEntityStats(auth.site, values.entityKey, startTime, endTime, true), analyticsActions.getAggregateEntityStats(auth.site, values.entityKey, startTime - timeDifference, startTime, true)]);
+
+            case 4:
+              _yield$Promise$all = _context.sent;
+              _yield$Promise$all2 = _slicedToArray(_yield$Promise$all, 2);
+              currentStatsResponse = _yield$Promise$all2[0];
+              prevStatsResponse = _yield$Promise$all2[1];
+              data = {
+                messages: Analytics$1.countActivities(currentStatsResponse.data, 'Message', 'total'),
+                prevMessages: Analytics$1.countActivities(prevStatsResponse.data, 'Message', 'total'),
+                staffMessages: Analytics$1.countActivities(currentStatsResponse.data, 'StaffMessage', 'total'),
+                prevStaffMessages: Analytics$1.countActivities(prevStatsResponse.data, 'StaffMessage', 'total'),
+                residentMessages: Analytics$1.countActivities(currentStatsResponse.data, 'ResidentMessage', 'total'),
+                prevResidentMessages: Analytics$1.countActivities(prevStatsResponse.data, 'ResidentMessage', 'total'),
+                groupMessages: Analytics$1.countActivities(currentStatsResponse.data, 'GroupMessage', 'total'),
+                prevGroupMessages: Analytics$1.countActivities(prevStatsResponse.data, 'GroupMessage', 'total'),
+                privateMessages: Analytics$1.countActivities(currentStatsResponse.data, 'PrivateMessage', 'total'),
+                prevPrivateMessages: Analytics$1.countActivities(prevStatsResponse.data, 'PrivateMessage', 'total'),
+                activeGroups: Analytics$1.countActivities(currentStatsResponse.data, 'GroupMessage', 'unique'),
+                prevActiveGroups: Analytics$1.countActivities(prevStatsResponse.data, 'GroupMessage', 'unique'),
+                // uniquePageView: Analytics.countActivities(currentStatsResponse.data, 'UniquePageView', 'uniquearray'),
+                // prevUniquePageView: Analytics.countActivities(prevStatsResponse.data, 'UniquePageView', 'uniquearray'),
+                isLoading: false
+              };
+              setAnalyticsData(data);
+
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    }));
+
+    return function getData() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  var isReadyToOpenCSV = function isReadyToOpenCSV() {
+    return !analyticsData.isLoading;
+  };
+
+  var getExportSource = function getExportSource() {
+    return [{
+      startDate: moment(startTime + 1).format('D-MM-YYYY'),
+      endDate: moment(endTime).format('D-MM-YYYY'),
+      messages: analyticsData.messages,
+      staffMessages: analyticsData.staffMessages,
+      residentMessages: analyticsData.residentMessages,
+      groupMessages: analyticsData.groupMessages,
+      privateMessages: analyticsData.privateMessages,
+      activeGroups: analyticsData.activeGroups
+    }];
+  };
+
+  var csvPopup = function csvPopup() {
+    if (!isExportOpen) {
+      return null;
+    }
+
+    var source = getExportSource();
+    return /*#__PURE__*/React.createElement(Components$1.ExportCsvPopup, {
+      onClose: function onClose() {
+        setIsExportOpen(false);
+      },
+      columns: exportColumns,
+      source: source,
+      filename: "".concat(values.analyticsKey, "analytics_").concat(source[0].startDate, "_").concat(source[0].endDate, ".csv")
+    });
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "dashboardSection"
+  }, csvPopup(), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Components$1.Text, {
+    type: "h4",
+    className: "inlineBlock marginRight-40"
+  }, featureTitle), /*#__PURE__*/React.createElement(Components$1.Button, {
+    inline: true,
+    buttonType: "primaryAction",
+    onClick: function onClick() {
+      if (!isReadyToOpenCSV()) return;
+      setIsExportOpen(true);
+    },
+    isActive: isReadyToOpenCSV(),
+    leftIcon: "file-code-o"
+  }, "Export CSV")), /*#__PURE__*/React.createElement("div", {
+    className: "analyticsSection dashboardSection_content"
+  }, /*#__PURE__*/React.createElement(Components$1.StatBox, {
+    title: "Groups with Messages",
+    icon: faUserGroup,
+    value: analyticsData.activeGroups,
+    previousValue: analyticsData.prevActiveGroups,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.entityKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=GroupMessage&countType=unique&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components$1.StatBox, {
+    title: "Messages",
+    icon: faMessage,
+    value: analyticsData.messages,
+    previousValue: analyticsData.prevMessages,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.entityKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=Message&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components$1.StatBox, {
+    title: "Messages by Staff",
+    icon: faUserTie,
+    value: analyticsData.staffMessages,
+    previousValue: analyticsData.prevStaffMessages,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.entityKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=StaffMessage&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components$1.StatBox, {
+    title: "Messages by Primary Users",
+    icon: faUsers,
+    value: analyticsData.residentMessages,
+    previousValue: analyticsData.prevResidentMessages,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.entityKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=ResidentMessage&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components$1.StatBox, {
+    title: "Group Messages",
+    icon: faUsersRectangle,
+    value: analyticsData.groupMessages,
+    previousValue: analyticsData.prevGroupMessages,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.entityKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=GroupMessage&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  }), /*#__PURE__*/React.createElement(Components$1.StatBox, {
+    title: "Private Messages",
+    icon: faPeopleArrows,
+    value: analyticsData.privateMessages,
+    previousValue: analyticsData.prevPrivateMessages,
+    prevText: prevText,
+    viewGraphLink: "/chart?entity=".concat(values.entityKey, "&startTime=").concat(startTime, "&endTime=").concat(endTime, "&key=PrivateMessage&countType=total&dayCount=").concat(dayCount),
+    isLoading: analyticsData.isLoading
+  })));
+};
+
+var mapStateToProps = function mapStateToProps(state) {
+  var auth = state.auth;
+  return {
+    auth: auth,
+    strings: state.strings && state.strings.config || {}
+  };
+};
+
+var toExport = connect(mapStateToProps, {})(AnalyticsHub);
+
 function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$2(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -2416,5 +2669,6 @@ var FeaturePickerContent = (function () {
 var _Screens;
 var Reducers = _defineProperty({}, values.reducerKey, CircleReducer);
 var Screens = (_Screens = {}, _defineProperty(_Screens, values.componentCircles, Circles$1), _defineProperty(_Screens, values.componentAddCircle, AddCircle$1), _defineProperty(_Screens, values.componentCircle, Circle$1), _Screens);
+var Analytics = [toExport];
 
-export { FeatureConfig as Config, FeaturePickerContent, PreviewFull, PreviewGrid, PreviewWidget, Reducers, Screens, ViewFull, ViewWidget };
+export { Analytics, FeatureConfig as Config, FeaturePickerContent, PreviewFull, PreviewGrid, PreviewWidget, Reducers, Screens, ViewFull, ViewWidget };