@plusscommunities/pluss-circles-web 1.0.17 → 1.0.19

package/dist/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/regenerator'), require('react'), require('react-redux'), require('lodash'), require('moment'), require('react-router-dom'), require('@plusscommunities/pluss-core-web'), require('react-bootstrap'), require('react-fontawesome'), require('@babel/runtime/helpers/toConsumableArray'), require('react-router')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/regenerator', 'react', 'react-redux', 'lodash', 'moment', 'react-router-dom', '@plusscommunities/pluss-core-web', 'react-bootstrap', 'react-fontawesome', '@babel/runtime/helpers/toConsumableArray', 'react-router'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-circles-web'] = {}, global._defineProperty, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._regeneratorRuntime, global.React, global.reactRedux, global._, global.moment, global.reactRouterDom, global.PlussCore, global.reactBootstrap, global.FontAwesome, global._toConsumableArray, global.reactRouter));
-}(this, (function (exports, _defineProperty, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _regeneratorRuntime, React, reactRedux, _, moment, reactRouterDom, PlussCore, reactBootstrap, FontAwesome, _toConsumableArray, reactRouter) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@babel/runtime/helpers/defineProperty'), require('@babel/runtime/helpers/asyncToGenerator'), require('@babel/runtime/helpers/classCallCheck'), require('@babel/runtime/helpers/createClass'), require('@babel/runtime/helpers/assertThisInitialized'), require('@babel/runtime/helpers/inherits'), require('@babel/runtime/helpers/possibleConstructorReturn'), require('@babel/runtime/helpers/getPrototypeOf'), require('@babel/runtime/regenerator'), require('react'), require('react-redux'), require('lodash'), require('moment'), require('react-router-dom'), require('@plusscommunities/pluss-core-web'), require('react-bootstrap'), require('react-fontawesome'), require('@babel/runtime/helpers/toConsumableArray'), require('react-router'), require('@babel/runtime/helpers/slicedToArray'), require('@fortawesome/free-solid-svg-icons')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@babel/runtime/helpers/defineProperty', '@babel/runtime/helpers/asyncToGenerator', '@babel/runtime/helpers/classCallCheck', '@babel/runtime/helpers/createClass', '@babel/runtime/helpers/assertThisInitialized', '@babel/runtime/helpers/inherits', '@babel/runtime/helpers/possibleConstructorReturn', '@babel/runtime/helpers/getPrototypeOf', '@babel/runtime/regenerator', 'react', 'react-redux', 'lodash', 'moment', 'react-router-dom', '@plusscommunities/pluss-core-web', 'react-bootstrap', 'react-fontawesome', '@babel/runtime/helpers/toConsumableArray', 'react-router', '@babel/runtime/helpers/slicedToArray', '@fortawesome/free-solid-svg-icons'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['@plusscommunities/pluss-circles-web'] = {}, global._defineProperty, global._asyncToGenerator, global._classCallCheck, global._createClass, global._assertThisInitialized, global._inherits, global._possibleConstructorReturn, global._getPrototypeOf, global._regeneratorRuntime, global.React, global.reactRedux, global._, global.moment, global.reactRouterDom, global.PlussCore, global.reactBootstrap, global.FontAwesome, global._toConsumableArray, global.reactRouter, global._slicedToArray, global.freeSolidSvgIcons));
+}(this, (function (exports, _defineProperty, _asyncToGenerator, _classCallCheck, _createClass, _assertThisInitialized, _inherits, _possibleConstructorReturn, _getPrototypeOf, _regeneratorRuntime, React, reactRedux, _, moment, reactRouterDom, PlussCore, reactBootstrap, FontAwesome, _toConsumableArray, reactRouter, _slicedToArray, freeSolidSvgIcons) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -41,6 +41,7 @@
   var PlussCore__namespace = /*#__PURE__*/_interopNamespace(PlussCore);
   var FontAwesome__default = /*#__PURE__*/_interopDefaultLegacy(FontAwesome);
   var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
+  var _slicedToArray__default = /*#__PURE__*/_interopDefaultLegacy(_slicedToArray);
 
   var values = {
     featureKey: 'circles',
@@ -175,10 +176,10 @@
   };
 
   var Helper$3 = PlussCore__namespace.Helper,
-      Session$3 = PlussCore__namespace.Session;
+      Session$4 = PlussCore__namespace.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
@@ -186,7 +187,7 @@
       });
     },
     getFiles: function getFiles(circleId) {
-      return Session$3.authedFunction({
+      return Session$4.authedFunction({
         method: 'GET',
         url: Helper$3.getUrl(values.serviceKey, 'get/files', {
           circleId: circleId
@@ -194,7 +195,7 @@
       });
     },
     getImages: function getImages(circleId) {
-      return Session$3.authedFunction({
+      return Session$4.authedFunction({
         method: 'GET',
         url: Helper$3.getUrl(values.serviceKey, 'get/images', {
           circleId: circleId
@@ -202,7 +203,7 @@
       });
     },
     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: {
@@ -215,7 +216,7 @@
       });
     },
     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: {
@@ -228,7 +229,7 @@
       });
     },
     delete: function _delete(circleId) {
-      return Session$3.authedFunction({
+      return Session$4.authedFunction({
         method: 'POST',
         url: Helper$3.getUrl(values.serviceKey, 'update/delete'),
         data: {
@@ -237,7 +238,7 @@
       });
     },
     addAdmin: function addAdmin(circleId, userId) {
-      return Session$3.authedFunction({
+      return Session$4.authedFunction({
         method: 'POST',
         url: Helper$3.getUrl(values.serviceKey, 'update/addadmin'),
         data: {
@@ -247,7 +248,7 @@
       });
     },
     removeAdmin: function removeAdmin(circleId, userId) {
-      return Session$3.authedFunction({
+      return Session$4.authedFunction({
         method: 'POST',
         url: Helper$3.getUrl(values.serviceKey, 'update/removeadmin'),
         data: {
@@ -279,7 +280,7 @@
                   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)
                 }));
@@ -304,7 +305,7 @@
           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: {
@@ -329,11 +330,14 @@
     }()
   };
 
+  var Apis$1 = PlussCore__namespace.Apis;
+  var analyticsActions = Apis$1.analyticsActions;
+
   function _createSuper$7(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$7(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](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__namespace.Components,
-      Session$2 = PlussCore__namespace.Session,
+  var Components$4 = PlussCore__namespace.Components,
+      Session$3 = PlussCore__namespace.Session,
       Helper$2 = PlussCore__namespace.Helper;
 
   var Circles = /*#__PURE__*/function (_Component) {
@@ -396,13 +400,13 @@
 
       _defineProperty__default['default'](_assertThisInitialized__default['default'](_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__default['default'](_assertThisInitialized__default['default'](_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"));
         }
       });
@@ -559,7 +563,7 @@
       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;
         }
 
@@ -583,7 +587,7 @@
         }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
           to: "/".concat(values.featureKey, "/").concat(values.entityKey, "/").concat(circle.Id)
         }, this.getTitle(circle))), /*#__PURE__*/React__default['default'].createElement("td", null, moment__default['default'](circle.Changed).local().format('D MMM YYYY')), /*#__PURE__*/React__default['default'].createElement("td", null, circle.Audience.map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$3.ProfilePic, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$4.ProfilePic, {
             size: 30,
             image: user.profilePic,
             hoverText: user.displayName,
@@ -623,24 +627,24 @@
     }, {
       key: "renderFilters",
       value: function renderFilters() {
-        var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
+        var userFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           className: "marginRight-10",
           onClick: this.openUserFilter,
           text: "User"
         });
-        var typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
+        var typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           className: "marginRight-10",
           onClick: this.openTypeFilter,
           text: "Type"
         });
 
         if (this.state.selectedUserFilter) {
-          userFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
+          userFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
             className: "marginRight-10",
             onClick: this.openUserFilter,
             rightIcon: "close",
             rightClick: this.removeUserFilter
-          }, /*#__PURE__*/React__default['default'].createElement(Components$3.UserListing, {
+          }, /*#__PURE__*/React__default['default'].createElement(Components$4.UserListing, {
             size: 15,
             user: this.state.selectedUserFilter,
             textClass: "tag_text"
@@ -648,7 +652,7 @@
         }
 
         if (this.state.selectedTypeFilter) {
-          typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
+          typeFilter = /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
             className: "marginRight-10",
             onClick: this.openTypeFilter,
             rightIcon: "close",
@@ -659,7 +663,7 @@
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-center marginTop-20"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
           type: "h5",
           className: "marginRight-20"
         }, "Filter by"), userFilter, typeFilter);
@@ -673,14 +677,14 @@
           return null;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$3.Popup, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$4.Popup, {
           title: "Select User",
           maxWidth: 600,
           minWidth: 400,
           minHeight: 400,
           hasPadding: true,
           onClose: this.closeUserFilter
-        }, /*#__PURE__*/React__default['default'].createElement(Components$3.GenericInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$4.GenericInput, {
           id: "userSearch",
           type: "text",
           label: "Search",
@@ -691,7 +695,7 @@
           },
           alwaysShowLabel: true
         }), this.getUsers().map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$3.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$4.UserListing, {
             key: user.userId,
             user: user,
             onClick: function onClick() {
@@ -709,19 +713,19 @@
           return null;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$3.Popup, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$4.Popup, {
           title: "Select Type",
           maxWidth: 600,
           minWidth: 400,
           hasPadding: true,
           onClose: this.closeTypeFilter
-        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           onClick: function onClick() {
             _this7.selectTypeFilter('circle');
           },
           text: ___default['default'].capitalize(values.entityName),
           className: "marginRight-10"
-        }), /*#__PURE__*/React__default['default'].createElement(Components$3.Tag, {
+        }), /*#__PURE__*/React__default['default'].createElement(Components$4.Tag, {
           onClick: function onClick() {
             _this7.selectTypeFilter('private');
           },
@@ -733,12 +737,12 @@
       value: function render() {
         var _this8 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$3.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$3.AddButton, {
+        return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$4.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$4.AddButton, {
           onClick: this.onAddNew,
           text: "NEW ".concat(___default['default'].upperCase(values.entityName))
         })), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "pageContainer paddingVertical-20 paddingHorizontal-40"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$4.Text, {
           type: "h1",
           className: ""
         }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
@@ -765,7 +769,7 @@
     return Circles;
   }(React.Component);
 
-  var mapStateToProps$2 = function mapStateToProps(state) {
+  var mapStateToProps$3 = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
     var auth = state.auth;
     return {
@@ -775,17 +779,21 @@
     };
   };
 
-  var Circles$1 = reactRedux.connect(mapStateToProps$2, {
+  var Circles$1 = reactRedux.connect(mapStateToProps$3, {
     circlesLoaded: circlesLoaded,
     circleRemoved: circleRemoved
   })(Circles);
 
+  function ownKeys$3(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$3(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys$3(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
   function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](this, result); }; }
 
   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__namespace.Actions,
-      Components$2 = PlussCore__namespace.Components,
-      Session$1 = PlussCore__namespace.Session,
+      Components$3 = PlussCore__namespace.Components,
+      Session$2 = PlussCore__namespace.Session,
       Apis = PlussCore__namespace.Apis,
       Colours$2 = PlussCore__namespace.Colours,
       Helper$1 = PlussCore__namespace.Helper;
@@ -816,6 +824,10 @@
             _this.setState({
               users: ___default['default'].sortBy(res.data.results.Items, function (u) {
                 return (u.displayName || '').toLowerCase();
+              }).map(function (u) {
+                return _objectSpread$3(_objectSpread$3({}, u), {}, {
+                  userId: u.userId || u.Id
+                });
               })
             });
           }
@@ -1061,7 +1073,7 @@
     _createClass__default['default'](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();
@@ -1107,7 +1119,7 @@
       key: "renderSuccess",
       value: function renderSuccess() {
         if (!this.state.success) return null;
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.SuccessPopup, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$3.SuccessPopup, {
           text: "".concat(___default['default'].capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? 'added' : 'edited'),
           buttons: [{
             type: 'outlined',
@@ -1124,12 +1136,12 @@
         var _this4 = this;
 
         if (this.state.updating) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$3.Button, {
             buttonType: "secondary"
           }, "Saving...");
         }
 
-        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
+        return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$3.Button, {
           inline: true,
           buttonType: "tertiary",
           onClick: function onClick() {
@@ -1139,7 +1151,7 @@
           style: {
             marginRight: 16
           }
-        }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Components$2.Button, {
+        }, "Cancel"), /*#__PURE__*/React__default['default'].createElement(Components$3.Button, {
           inline: true,
           buttonType: "primary",
           onClick: this.onSave,
@@ -1153,7 +1165,7 @@
 
         return /*#__PURE__*/React__default['default'].createElement("div", {
           className: "optionsContent_bottom"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.RadioButton, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.RadioButton, {
           label: "Do you want to make this ".concat(values.entityName, " a public ").concat(values.entityName, "?"),
           isActive: this.state.isPublic,
           options: [{
@@ -1208,7 +1220,7 @@
           return null;
         }
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.OptionsSection, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$3.OptionsSection, {
           options: options,
           selected: this.state.selectedOption,
           selectOption: this.selectOption
@@ -1221,12 +1233,12 @@
 
         return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "padding-60 paddingVertical-40 bottomDivideBorder"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
           type: "formTitleLarge",
           className: "marginBottom-24"
         }, this.state.circleId == null ? 'New' : 'Edit', " ", ___default['default'].capitalize(values.entityName)), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-reverse"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.ImageInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.ImageInput, {
           ref: function ref(_ref2) {
             _this6.imageInput = _ref2;
           },
@@ -1238,7 +1250,7 @@
           }
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.GenericInput, {
           id: "title",
           type: "text",
           label: "Title",
@@ -1257,16 +1269,16 @@
           }
         })))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "padding-60 paddingVertical-40 bottomDivideBorder"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
           type: "formTitleMedium"
         }, "Members"), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex marginTop-20"
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
           type: "formTitleSmall",
           className: "marginBottom-10"
-        }, "Select Users"), /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
+        }, "Select Users"), /*#__PURE__*/React__default['default'].createElement(Components$3.GenericInput, {
           id: "userSearch",
           type: "text",
           label: "Search",
@@ -1277,7 +1289,7 @@
           },
           alwaysShowLabel: true
         }), this.getShownUsers().map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$2.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$3.UserListing, {
             key: user.userId,
             user: user,
             onClick: function onClick() {
@@ -1286,23 +1298,23 @@
           });
         })), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.Text, {
           type: "formTitleSmall",
           className: "marginBottom-10"
         }, "Selected"), this.state.selectedUsers.map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$2.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$3.UserListing, {
             key: user.userId,
             user: user,
             rightContent: /*#__PURE__*/React__default['default'].createElement("div", {
               className: "flex flex-reverse flex-center"
-            }, /*#__PURE__*/React__default['default'].createElement(Components$2.SVGIcon, {
+            }, /*#__PURE__*/React__default['default'].createElement(Components$3.SVGIcon, {
               className: "removeIcon marginLeft-8",
               icon: "close",
               colour: Colours$2.COLOUR_DUSK,
               onClick: function onClick() {
                 _this6.onSelectUser(user);
               }
-            }), /*#__PURE__*/React__default['default'].createElement(Components$2.StatusButton, {
+            }), /*#__PURE__*/React__default['default'].createElement(Components$3.StatusButton, {
               isActive: user.isAdmin,
               activate: function activate() {
                 _this6.addAdmin(user);
@@ -1322,18 +1334,18 @@
       key: "render",
       value: function render() {
         var success = this.state.success;
-        return /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPage, null, /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageContents, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$3.OverlayPage, null, /*#__PURE__*/React__default['default'].createElement(Components$3.OverlayPageContents, {
           noBottomButtons: success
-        }, /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageSection, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$3.OverlayPageSection, {
           className: "pageSectionWrapper--newPopup"
-        }, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPageBottomButtons, null, this.renderSubmit()));
+        }, /*#__PURE__*/React__default['default'].createElement("div", null, this.renderSuccess(), !success && this.renderMain()))), /*#__PURE__*/React__default['default'].createElement(Components$3.OverlayPageBottomButtons, null, this.renderSubmit()));
       }
     }]);
 
     return AddCircle;
   }(React.Component);
 
-  var mapStateToProps$1 = function mapStateToProps(state) {
+  var mapStateToProps$2 = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
     var auth = state.auth;
     return {
@@ -1343,7 +1355,7 @@
     };
   };
 
-  var AddCircle$1 = reactRedux.connect(mapStateToProps$1, {
+  var AddCircle$1 = reactRedux.connect(mapStateToProps$2, {
     circlesLoaded: circlesLoaded,
     circleUpdated: circleUpdated,
     addRecentlyCreated: Actions$1.addRecentlyCreated
@@ -1352,10 +1364,10 @@
   function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function _createSuperInternal() { var Super = _getPrototypeOf__default['default'](Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf__default['default'](this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn__default['default'](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__namespace.Components,
+  var Components$2 = PlussCore__namespace.Components,
       Helper = PlussCore__namespace.Helper,
       Actions = PlussCore__namespace.Actions,
-      Session = PlussCore__namespace.Session,
+      Session$1 = PlussCore__namespace.Session,
       Colours$1 = PlussCore__namespace.Colours;
 
   var Circle = /*#__PURE__*/function (_Component) {
@@ -1776,7 +1788,7 @@
       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;
         }
 
@@ -1790,7 +1802,7 @@
         var _this5 = this;
 
         if (!this.isMember()) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
             type: "highlightedHelp",
             className: "chat_noMessage"
           }, "You can't send a message to this ", ___default['default'].capitalize(values.entityName), " as you are not a member.");
@@ -1804,7 +1816,7 @@
           onClick: this.sendMessage
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_inputContainer"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
           id: "messageInput",
           type: "textarea",
           className: "chat_input",
@@ -1831,7 +1843,7 @@
           style: {
             display: this.state.imageInputShowing ? 'block' : 'none'
           }
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.ImageInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.ImageInput, {
           ref: function ref(_ref4) {
             _this5.imageInput = _ref4;
           },
@@ -1846,7 +1858,7 @@
           style: {
             display: this.state.fileInputShowing ? 'block' : 'none'
           }
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.FileInput, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.FileInput, {
           ref: function ref(_ref5) {
             _this5.fileInput = _ref5;
           },
@@ -1867,7 +1879,7 @@
           return /*#__PURE__*/React__default['default'].createElement("div", {
             key: m._id,
             className: "message"
-          }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+          }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
             type: "h5",
             className: "message_system"
           }, m.text));
@@ -1877,28 +1889,28 @@
         return /*#__PURE__*/React__default['default'].createElement("div", {
           key: m._id,
           className: "message".concat(isSelf ? ' message-self' : '').concat(m.uploading ? ' message-uploading' : '')
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "h5-noUpper",
           className: "message_time"
         }, moment__default['default'].utc(m.createdAt).local().format('D MMM YYYY • h:mma')), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_inner"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.ProfilePic, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.ProfilePic, {
           size: 40,
           image: m.user.avatar,
           className: "message_profilePic"
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_bubbleContainer"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
           className: "message_replyBubble"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body",
           className: "message_text"
         }, Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100)))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_bubble"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body",
           className: "message_text"
         }, Helper.toParagraphed(m.text)), /*#__PURE__*/React__default['default'].createElement("div", null, (m.image || []).map(function (url, i) {
@@ -1912,14 +1924,14 @@
             alt: Helper.getFileName(url)
           }));
         })), /*#__PURE__*/React__default['default'].createElement("div", null, (m.attachments || []).map(function (url, i) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.Attachment, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$2.Attachment, {
             source: url,
             key: i,
             white: isSelf
           });
         }))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "message_reply"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "button",
           onClick: function onClick() {
             _this6.onReply(m);
@@ -1968,12 +1980,12 @@
           onClick: this.toggleMembers
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleMedium"
         }, "Member", Helper.getPluralS(members.length), " (", members.length, ")"))), this.state.membersExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "paddingTop-8"
         }, members.map(function (user) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.UserListing, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$2.UserListing, {
             user: user
           });
         }))), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -1986,7 +1998,7 @@
           onClick: this.toggleImages
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleMedium"
         }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "paddingTop-8"
@@ -2009,12 +2021,12 @@
           onClick: this.toggleFiles
         }), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleMedium"
         }, "File", Helper.getPluralS(this.state.files.length), " (", this.state.files.length, ")"))), this.state.filesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
           className: "paddingTop-8"
         }, this.state.files.map(function (file, i) {
-          return /*#__PURE__*/React__default['default'].createElement(Components$1.Attachment, {
+          return /*#__PURE__*/React__default['default'].createElement(Components$2.Attachment, {
             source: file.Url,
             key: i
           });
@@ -2034,13 +2046,13 @@
           className: "chat_replyTo"
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_replyTo_container"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "h5"
-        }, "Replying to ", m && m.user && !___default['default'].isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !___default['default'].isEmpty(m.text) && /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, "Replying to ", m && m.user && !___default['default'].isEmpty(m.user.displayName) ? m.user.displayName : ''), m && !___default['default'].isEmpty(m.text) && /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "body"
         }, m.text.substr(0, 50))), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "chat_replyTo_remove"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.SVGIcon, {
           className: "removeIcon",
           icon: "close",
           onClick: function onClick() {
@@ -2054,13 +2066,13 @@
       value: function render() {
         var _this8 = this;
 
-        return /*#__PURE__*/React__default['default'].createElement(Components$1.OverlayPage, {
+        return /*#__PURE__*/React__default['default'].createElement(Components$2.OverlayPage, {
           fullPage: true,
           fullPageStyle: {
             display: 'flex',
             flexDirection: 'column'
           }
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Header, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Header, {
           rightContent: this.renderHeaderRight()
         }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
           className: "header_back",
@@ -2068,21 +2080,21 @@
           onClick: function onClick() {
             window.history.back();
           }
-        }), /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }), /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "formTitleLarge",
           className: "header_title"
         }, this.getTitle())), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-1 flex-reverse overflow-hidden"
         }, this.renderSideBar(), /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex-1 flex flex-column overflow-hidden"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Header, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Header, {
           onlyContainer: true
         }, /*#__PURE__*/React__default['default'].createElement("div", {
           className: "flex flex-center flex-1 paddingHorizontal-16"
-        }, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+        }, /*#__PURE__*/React__default['default'].createElement(Components$2.Text, {
           type: "h5",
           className: "marginRight-20"
-        }, "Filter by"), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$1.GenericInput, {
+        }, "Filter by"), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$2.GenericInput, {
           id: "messageDate",
           label: "Date",
           alwaysShowLabel: true,
@@ -2093,13 +2105,13 @@
               showMessageDate: !_this8.state.showMessageDate
             });
           },
-          rightContent: !___default['default'].isEmpty(this.state.messageDate) && /*#__PURE__*/React__default['default'].createElement(Components$1.SVGIcon, {
+          rightContent: !___default['default'].isEmpty(this.state.messageDate) && /*#__PURE__*/React__default['default'].createElement(Components$2.SVGIcon, {
             colour: Colours$1.COLOUR_DUSK_LIGHT,
             icon: "close",
             className: "timepicker_clear",
             onClick: this.onClearDate
           })
-        }), this.state.showMessageDate && /*#__PURE__*/React__default['default'].createElement(Components$1.DatePicker, {
+        }), this.state.showMessageDate && /*#__PURE__*/React__default['default'].createElement(Components$2.DatePicker, {
           hideTop: true,
           selectedDate: this.state.messageDate,
           selectDate: this.handleMessageDateChange
@@ -2121,7 +2133,7 @@
     return Circle;
   }(React.Component);
 
-  var mapStateToProps = function mapStateToProps(state) {
+  var mapStateToProps$1 = function mapStateToProps(state) {
     var circles = state[values.reducerKey].circles;
     var auth = state.auth;
     return {
@@ -2131,11 +2143,259 @@
     };
   };
 
-  var Circle$1 = reactRedux.connect(mapStateToProps, {
+  var Circle$1 = reactRedux.connect(mapStateToProps$1, {
     circlesLoaded: circlesLoaded,
     setNavData: Actions.setNavData
   })(Circle);
 
+  var Analytics$1 = PlussCore__namespace.Analytics,
+      Session = PlussCore__namespace.Session,
+      Components$1 = PlussCore__namespace.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 = React.useState(getInitialState()),
+        _useState2 = _slicedToArray__default['default'](_useState, 2),
+        analyticsData = _useState2[0],
+        setAnalyticsData = _useState2[1];
+
+    var _useState3 = React.useState(false),
+        _useState4 = _slicedToArray__default['default'](_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'
+    }];
+    React.useEffect(function () {
+      getData();
+    }, [startTime, endTime]);
+
+    var getData = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator__default['default']( /*#__PURE__*/_regeneratorRuntime__default['default'].mark(function _callee() {
+        var timeDifference, _yield$Promise$all, _yield$Promise$all2, currentStatsResponse, prevStatsResponse, data;
+
+        return _regeneratorRuntime__default['default'].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__default['default'](_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__default['default'](startTime + 1).format('D-MM-YYYY'),
+        endDate: moment__default['default'](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__default['default'].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__default['default'].createElement("div", {
+      className: "dashboardSection"
+    }, csvPopup(), /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(Components$1.Text, {
+      type: "h4",
+      className: "inlineBlock marginRight-40"
+    }, featureTitle), /*#__PURE__*/React__default['default'].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__default['default'].createElement("div", {
+      className: "analyticsSection dashboardSection_content"
+    }, /*#__PURE__*/React__default['default'].createElement(Components$1.StatBox, {
+      title: "Groups with Messages",
+      icon: freeSolidSvgIcons.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__default['default'].createElement(Components$1.StatBox, {
+      title: "Messages",
+      icon: freeSolidSvgIcons.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__default['default'].createElement(Components$1.StatBox, {
+      title: "Messages by Staff",
+      icon: freeSolidSvgIcons.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__default['default'].createElement(Components$1.StatBox, {
+      title: "Messages by Primary Users",
+      icon: freeSolidSvgIcons.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__default['default'].createElement(Components$1.StatBox, {
+      title: "Group Messages",
+      icon: freeSolidSvgIcons.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__default['default'].createElement(Components$1.StatBox, {
+      title: "Private Messages",
+      icon: freeSolidSvgIcons.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 = reactRedux.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__default['default'](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; }
@@ -2440,7 +2700,9 @@
   var _Screens;
   var Reducers = _defineProperty__default['default']({}, values.reducerKey, CircleReducer);
   var Screens = (_Screens = {}, _defineProperty__default['default'](_Screens, values.componentCircles, Circles$1), _defineProperty__default['default'](_Screens, values.componentAddCircle, AddCircle$1), _defineProperty__default['default'](_Screens, values.componentCircle, Circle$1), _Screens);
+  var Analytics = [toExport];
 
+  exports.Analytics = Analytics;
   exports.Config = FeatureConfig;
   exports.FeaturePickerContent = FeaturePickerContent;
   exports.PreviewFull = PreviewFull;