@plusscommunities/pluss-circles-web 1.0.17 → 1.0.19

package/dist/index.cjs.js

@@ -21,6 +21,8 @@ var reactBootstrap = require('react-bootstrap');
 var FontAwesome = require('react-fontawesome');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var reactRouter = require('react-router');
+var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -59,6 +61,7 @@ var moment__default = /*#__PURE__*/_interopDefaultLegacy(moment);
 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',
@@ -193,10 +196,10 @@ var circleRemoved = function circleRemoved(circleId) {
 };
 
 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
@@ -204,7 +207,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
@@ -212,7 +215,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
@@ -220,7 +223,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: {
@@ -233,7 +236,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: {
@@ -246,7 +249,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: {
@@ -255,7 +258,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: {
@@ -265,7 +268,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: {
@@ -297,7 +300,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)
               }));
@@ -322,7 +325,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: {
@@ -347,11 +350,14 @@ var circleActions = {
   }()
 };
 
+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) {
@@ -414,13 +420,13 @@ var Circles = /*#__PURE__*/function (_Component) {
 
     _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"));
       }
     });
@@ -577,7 +583,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;
       }
 
@@ -601,7 +607,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__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,
@@ -641,24 +647,24 @@ var Circles = /*#__PURE__*/function (_Component) {
   }, {
     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"
@@ -666,7 +672,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }
 
       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",
@@ -677,7 +683,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       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);
@@ -691,14 +697,14 @@ var Circles = /*#__PURE__*/function (_Component) {
         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",
@@ -709,7 +715,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         },
         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() {
@@ -727,19 +733,19 @@ var Circles = /*#__PURE__*/function (_Component) {
         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');
         },
@@ -751,12 +757,12 @@ var Circles = /*#__PURE__*/function (_Component) {
     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, {
@@ -783,7 +789,7 @@ var Circles = /*#__PURE__*/function (_Component) {
   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 {
@@ -793,17 +799,21 @@ var mapStateToProps$2 = function mapStateToProps(state) {
   };
 };
 
-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;
@@ -834,6 +844,10 @@ var AddCircle = /*#__PURE__*/function (_Component) {
           _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
+              });
             })
           });
         }
@@ -1079,7 +1093,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
   _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();
@@ -1125,7 +1139,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     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',
@@ -1142,12 +1156,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       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() {
@@ -1157,7 +1171,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         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,
@@ -1171,7 +1185,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
       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: [{
@@ -1226,7 +1240,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         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
@@ -1239,12 +1253,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 
       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;
         },
@@ -1256,7 +1270,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         }
       }), /*#__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",
@@ -1275,16 +1289,16 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         }
       })))), /*#__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",
@@ -1295,7 +1309,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         },
         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() {
@@ -1304,23 +1318,23 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         });
       })), /*#__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);
@@ -1340,18 +1354,18 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     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 {
@@ -1361,7 +1375,7 @@ var mapStateToProps$1 = function mapStateToProps(state) {
   };
 };
 
-var AddCircle$1 = reactRedux.connect(mapStateToProps$1, {
+var AddCircle$1 = reactRedux.connect(mapStateToProps$2, {
   circlesLoaded: circlesLoaded,
   circleUpdated: circleUpdated,
   addRecentlyCreated: Actions$1.addRecentlyCreated
@@ -1370,10 +1384,10 @@ var AddCircle$1 = reactRedux.connect(mapStateToProps$1, {
 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) {
@@ -1794,7 +1808,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;
       }
 
@@ -1808,7 +1822,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       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.");
@@ -1822,7 +1836,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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",
@@ -1849,7 +1863,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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;
         },
@@ -1864,7 +1878,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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;
         },
@@ -1885,7 +1899,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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));
@@ -1895,28 +1909,28 @@ var Circle = /*#__PURE__*/function (_Component) {
       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) {
@@ -1930,14 +1944,14 @@ var Circle = /*#__PURE__*/function (_Component) {
           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);
@@ -1986,12 +2000,12 @@ var Circle = /*#__PURE__*/function (_Component) {
         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", {
@@ -2004,7 +2018,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         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"
@@ -2027,12 +2041,12 @@ var Circle = /*#__PURE__*/function (_Component) {
         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
         });
@@ -2052,13 +2066,13 @@ var Circle = /*#__PURE__*/function (_Component) {
         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() {
@@ -2072,13 +2086,13 @@ var Circle = /*#__PURE__*/function (_Component) {
     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",
@@ -2086,21 +2100,21 @@ var Circle = /*#__PURE__*/function (_Component) {
         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,
@@ -2111,13 +2125,13 @@ var Circle = /*#__PURE__*/function (_Component) {
             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
@@ -2139,7 +2153,7 @@ var Circle = /*#__PURE__*/function (_Component) {
   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 {
@@ -2149,11 +2163,259 @@ var mapStateToProps = function mapStateToProps(state) {
   };
 };
 
-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; }
@@ -2458,7 +2720,9 @@ var FeaturePickerContent = (function () {
 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;