@plusscommunities/pluss-circles-web 1.0.9 → 1.0.12

package/dist/index.cjs.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _classCallCheck = require('@babel/runtime/helpers/classCallCheck');
 var _createClass = require('@babel/runtime/helpers/createClass');
@@ -9,7 +10,6 @@ var _assertThisInitialized = require('@babel/runtime/helpers/assertThisInitializ
 var _inherits = require('@babel/runtime/helpers/inherits');
 var _possibleConstructorReturn = require('@babel/runtime/helpers/possibleConstructorReturn');
 var _getPrototypeOf = require('@babel/runtime/helpers/getPrototypeOf');
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _regeneratorRuntime = require('@babel/runtime/regenerator');
 var React = require('react');
 var reactRedux = require('react-redux');
@@ -44,6 +44,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _asyncToGenerator__default = /*#__PURE__*/_interopDefaultLegacy(_asyncToGenerator);
 var _classCallCheck__default = /*#__PURE__*/_interopDefaultLegacy(_classCallCheck);
 var _createClass__default = /*#__PURE__*/_interopDefaultLegacy(_createClass);
@@ -51,7 +52,6 @@ var _assertThisInitialized__default = /*#__PURE__*/_interopDefaultLegacy(_assert
 var _inherits__default = /*#__PURE__*/_interopDefaultLegacy(_inherits);
 var _possibleConstructorReturn__default = /*#__PURE__*/_interopDefaultLegacy(_possibleConstructorReturn);
 var _getPrototypeOf__default = /*#__PURE__*/_interopDefaultLegacy(_getPrototypeOf);
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _regeneratorRuntime__default = /*#__PURE__*/_interopDefaultLegacy(_regeneratorRuntime);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
@@ -60,46 +60,85 @@ var PlussCore__namespace = /*#__PURE__*/_interopNamespace(PlussCore);
 var FontAwesome__default = /*#__PURE__*/_interopDefaultLegacy(FontAwesome);
 var _toConsumableArray__default = /*#__PURE__*/_interopDefaultLegacy(_toConsumableArray);
 
+var values = {
+  featureKey: 'circles',
+  entityKey: 'circle',
+  entityName: 'circle',
+  serviceKey: 'circles',
+  permission: 'circles',
+  menuIcon: 'circle-o',
+  isFontAwesome: true,
+  reducerKey: 'circles',
+  actionCircleKey: 'CIRCLE',
+  textFeatureTitle: 'Circles',
+  textAddMenuTitle: 'Circle',
+  textEmptyGroups: "You aren't in any Circles",
+  textEmptyPeople: 'Contacts will show here',
+  componentCircles: 'Circles',
+  componentAddCircle: 'AddCircle',
+  componentCircle: 'Circle',
+  inviteKey: 'circleInvite',
+  messageKey: 'circleMessage',
+  chatRoute: 'circleChat',
+  updateKeyUserCircles: 'userCircles',
+  allowPublicKey: 'circleAllowPublicCircles',
+  allowPublicKeyDefault: false,
+  settings: {
+    allowAnyCreate: false
+  }
+};
+
 // import * as PlussCore from '../../pluss-core/src';
 var FeatureConfig = {
-  key: 'circles',
-  singularName: 'Circle',
-  description: 'App users can create circles and message each other.',
-  emptyText: "You aren't in any Circles",
-  widgetOptions: [],
+  key: values.featureKey,
+  singularName: ___default['default'].capitalize(values.entityName),
+  description: "App users can create ".concat(values.entityName, "s and message each other."),
+  emptyText: "You aren't in any ".concat(___default['default'].capitalize(values.entityName), "s"),
+  widgetOptions: [{
+    widget: true,
+    main: true,
+    hideOnTabNumbers: [],
+    optionKey: values.allowPublicKey,
+    type: 'toggle',
+    inverseOption: false,
+    title: "Allow for public ".concat(values.entityName, "s"),
+    description: "Public ".concat(values.entityName, "s can be viewed and joined by anyone in the community."),
+    defaultNew: values.allowPublicKeyDefault,
+    default: values.allowPublicKeyDefault
+  }],
   menu: {
     order: 11,
-    text: 'Circles',
-    icon: 'circle-o',
-    isFontAwesome: true,
-    url: '/circles',
+    text: values.textFeatureTitle,
+    icon: values.menuIcon,
+    isFontAwesome: values.isFontAwesome,
+    url: "/".concat(values.featureKey),
     countProps: null,
     visibleExps: {
       type: 'feature',
-      value: 'circles'
+      value: values.featureKey
     }
   },
-  addUrl: '/circles/add',
-  addPermission: 'circles',
+  addUrl: "/".concat(values.featureKey, "/add"),
+  addPermission: values.permission,
   permissions: [{
-    displayName: 'Manage and View Circles',
-    key: 'circles'
+    displayName: "Manage and View ".concat(___default['default'].capitalize(values.entityName), "s"),
+    key: values.permission
   }],
   routes: [{
-    path: '/circles',
-    component: 'Circles',
+    path: "/".concat(values.featureKey),
+    component: values.componentCircles,
     exact: false
   }, {
-    path: '/circles/add',
-    component: 'AddCircle',
+    path: "/".concat(values.featureKey, "/add"),
+    component: values.componentAddCircle,
     exact: true
   }, {
-    path: '/circles/circle/:circleId',
-    component: 'Circle',
+    path: "/".concat(values.featureKey, "/").concat(values.entityKey, "/:circleId"),
+    component: values.componentCircle,
     exact: true
   }, {
-    path: '/circles/edit/:circleId',
-    component: 'AddCircle',
+    path: "/".concat(values.featureKey, "/edit/:circleId"),
+    component: values.componentAddCircle,
     exact: true
   }],
   env: {
@@ -125,9 +164,9 @@ var FeatureConfig = {
   }
 };
 
-var CIRCLES_LOADED = 'CIRCLES_LOADED';
-var CIRCLE_UPDATED = 'CIRCLE_UPDATED';
-var CIRCLE_REMOVED = 'CIRCLE_REMOVED';
+var CIRCLES_LOADED = "".concat(values.actionCircleKey, "S_LOADED");
+var CIRCLE_UPDATED = "".concat(values.actionCircleKey, "_UPDATED");
+var CIRCLE_REMOVED = "".concat(values.actionCircleKey, "_REMOVED");
 
 var circlesLoaded = function circlesLoaded(circles) {
   return {
@@ -154,7 +193,7 @@ var circleActions = {
   getAll: function getAll(site) {
     return Session$3.authedFunction({
       method: 'GET',
-      url: Helper$3.getUrl('circles', 'get/all', {
+      url: Helper$3.getUrl(values.serviceKey, 'get/all', {
         site: site
       })
     });
@@ -162,7 +201,7 @@ var circleActions = {
   getFiles: function getFiles(circleId) {
     return Session$3.authedFunction({
       method: 'GET',
-      url: Helper$3.getUrl('circles', 'get/files', {
+      url: Helper$3.getUrl(values.serviceKey, 'get/files', {
         circleId: circleId
       })
     });
@@ -170,39 +209,41 @@ var circleActions = {
   getImages: function getImages(circleId) {
     return Session$3.authedFunction({
       method: 'GET',
-      url: Helper$3.getUrl('circles', 'get/images', {
+      url: Helper$3.getUrl(values.serviceKey, 'get/images', {
         circleId: circleId
       })
     });
   },
-  add: function add(site, title, image, audience) {
+  add: function add(site, title, image, audience, isPublic) {
     return Session$3.authedFunction({
       method: 'POST',
-      url: Helper$3.getUrl('circles', 'update/add'),
+      url: Helper$3.getUrl(values.serviceKey, 'update/add'),
       data: {
         site: site,
         title: title,
         image: image,
-        audience: audience
+        audience: audience,
+        isPublic: isPublic
       }
     });
   },
-  edit: function edit(circleId, title, image, audience) {
+  edit: function edit(circleId, title, image, audience, isPublic) {
     return Session$3.authedFunction({
       method: 'POST',
-      url: Helper$3.getUrl('circles', 'update/edit'),
+      url: Helper$3.getUrl(values.serviceKey, 'update/edit'),
       data: {
         circleId: circleId,
         title: title,
         image: image,
-        audience: audience
+        audience: audience,
+        isPublic: isPublic
       }
     });
   },
   delete: function _delete(circleId) {
     return Session$3.authedFunction({
       method: 'POST',
-      url: Helper$3.getUrl('circles', 'update/delete'),
+      url: Helper$3.getUrl(values.serviceKey, 'update/delete'),
       data: {
         circleId: circleId
       }
@@ -211,7 +252,7 @@ var circleActions = {
   addAdmin: function addAdmin(circleId, userId) {
     return Session$3.authedFunction({
       method: 'POST',
-      url: Helper$3.getUrl('circles', 'update/addadmin'),
+      url: Helper$3.getUrl(values.serviceKey, 'update/addadmin'),
       data: {
         circleId: circleId,
         userId: userId
@@ -221,7 +262,7 @@ var circleActions = {
   removeAdmin: function removeAdmin(circleId, userId) {
     return Session$3.authedFunction({
       method: 'POST',
-      url: Helper$3.getUrl('circles', 'update/removeadmin'),
+      url: Helper$3.getUrl(values.serviceKey, 'update/removeadmin'),
       data: {
         circleId: circleId,
         userId: userId
@@ -253,7 +294,7 @@ var circleActions = {
 
               return _context.abrupt("return", Session$3.authedFunction({
                 method: 'GET',
-                url: Helper$3.getUrl('circles', 'getMessages', query)
+                url: Helper$3.getUrl(values.serviceKey, 'getMessages', query)
               }));
 
             case 5:
@@ -278,7 +319,7 @@ var circleActions = {
             case 0:
               return _context2.abrupt("return", Session$3.authedFunction({
                 method: 'post',
-                url: Helper$3.getUrl('circles', 'sendMessage'),
+                url: Helper$3.getUrl(values.serviceKey, 'sendMessage'),
                 data: {
                   groupId: circleId,
                   message: message
@@ -368,14 +409,14 @@ 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, 'circles', auth);
+      return Session$2.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, 'circles', auth)) {
-        _this.props.history.push("/circles/add");
+      if (Session$2.validateAccess(auth.site, values.permission, auth)) {
+        _this.props.history.push("/".concat(values.featureKey, "/add"));
       }
     });
 
@@ -441,7 +482,7 @@ var Circles = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "removeCircle", function (circle) {
-      if (window.confirm("Are you sure you want to delete that circle? You will no longer be able to access the messages in the circle.")) {
+      if (window.confirm("Are you sure you want to delete that ".concat(values.entityName, "? You will no longer be able to access the messages in the ").concat(values.entityName, "."))) {
         _this.props.circleRemoved(circle.Id);
 
         circleActions.delete(circle.Id).then(function (res) {
@@ -457,7 +498,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         return 'Private Message';
       }
 
-      return 'Circle';
+      return ___default['default'].capitalize(values.entityName);
     });
 
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "getTitle", function (circle) {
@@ -531,7 +572,7 @@ var Circles = /*#__PURE__*/function (_Component) {
     value: function validateCircleAdmin(circle, onlyCreator) {
       var _this4 = this;
 
-      if (Session$2.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
+      if (Session$2.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
         return true;
       }
 
@@ -553,7 +594,7 @@ var Circles = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/React__default['default'].createElement("td", {
         className: "table-TitleColumn"
       }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
-        to: "/circles/circle/".concat(circle.Id)
+        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$2.ProfilePic, {
           size: 30,
@@ -569,7 +610,7 @@ var Circles = /*#__PURE__*/function (_Component) {
           alignItems: 'center'
         }
       }, this.validateCircleAdmin(circle) && !circle.IsPrivate && /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
-        to: "/circles/edit/".concat(circle.Id)
+        to: "/".concat(values.featureKey, "/edit/").concat(circle.Id)
       }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
         style: {
           fontSize: 20,
@@ -691,7 +732,7 @@ var Circles = /*#__PURE__*/function (_Component) {
         onClick: function onClick() {
           _this7.selectTypeFilter('circle');
         },
-        text: "Circle",
+        text: ___default['default'].capitalize(values.entityName),
         className: "marginRight-10"
       }), /*#__PURE__*/React__default['default'].createElement(Components$2.Tag, {
         onClick: function onClick() {
@@ -707,13 +748,13 @@ var Circles = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React__default['default'].createElement("div", null, this.renderTypeFilterPopup(), this.renderUserFilterPopup(), /*#__PURE__*/React__default['default'].createElement(Components$2.Header, null, this.canAddNew() && /*#__PURE__*/React__default['default'].createElement(Components$2.AddButton, {
         onClick: this.onAddNew,
-        text: "NEW CIRCLE"
+        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$2.Text, {
         type: "h1",
         className: ""
-      }, "Circles"), this.renderFilters(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
+      }, values.textFeatureTitle), this.renderFilters(), /*#__PURE__*/React__default['default'].createElement(reactBootstrap.Table, {
         className: "plussTable",
         striped: true,
         bordered: true,
@@ -738,7 +779,7 @@ var Circles = /*#__PURE__*/function (_Component) {
 }(React.Component);
 
 var mapStateToProps$2 = function mapStateToProps(state) {
-  var circles = state.circles.circles;
+  var circles = state[values.reducerKey].circles;
   var auth = state.auth;
   return {
     circles: circles,
@@ -825,6 +866,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       });
       var newState = {
         title: circle.Title,
+        isPublic: !!circle.IsPublic,
         selectedUsers: selectedUsers
       };
 
@@ -955,7 +997,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       });
 
       if (_this.state.circleId) {
-        circleActions.edit(_this.state.circleId, _this.state.title, _this.state.image, audience).then(function (res) {
+        circleActions.edit(_this.state.circleId, _this.state.title, _this.state.image, audience, _this.state.isPublic).then(function (res) {
           _this.setState({
             success: true,
             updating: false
@@ -974,7 +1016,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
           alert('Something went wrong with the request. Please try again.');
         });
       } else {
-        circleActions.add(_this.props.auth.site, _this.state.title, _this.state.image, audience).then(function (res) {
+        circleActions.add(_this.props.auth.site, _this.state.title, _this.state.image, audience, _this.state.isPublic).then(function (res) {
           _this.setState({
             success: true,
             updating: false
@@ -1022,7 +1064,9 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       success: false,
       users: [],
       selectedUsers: [],
-      userSearch: ''
+      userSearch: '',
+      isPublic: false,
+      selectedOption: 'visibility'
     };
     return _this;
   }
@@ -1031,7 +1075,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       Session$1.checkLoggedIn(this, this.props.auth);
-      this.props.addRecentlyCreated('circle');
+      this.props.addRecentlyCreated(values.entityKey);
       this.getUsers();
       this.checkGetCircle();
     }
@@ -1077,13 +1121,13 @@ var AddCircle = /*#__PURE__*/function (_Component) {
     value: function renderSuccess() {
       if (!this.state.success) return null;
       return /*#__PURE__*/React__default['default'].createElement(Components$1.SuccessPopup, {
-        text: "Circle has been ".concat(this.state.circleId == null ? 'added' : 'edited'),
+        text: "".concat(___default['default'].capitalize(values.entityName), " has been ").concat(this.state.circleId == null ? 'added' : 'edited'),
         buttons: [{
           type: 'outlined',
           onClick: function onClick() {
             window.history.back();
           },
-          text: "Back to Circles"
+          text: "Back to ".concat(values.textFeatureTitle)
         }]
       });
     }
@@ -1102,7 +1146,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         inline: true,
         buttonType: "tertiary",
         onClick: function onClick() {
-          return _this4.props.history.push('/circles');
+          return _this4.props.history.push("/".concat(values.featureKey));
         },
         isActive: true,
         style: {
@@ -1116,24 +1160,88 @@ var AddCircle = /*#__PURE__*/function (_Component) {
       }, "Save"));
     }
   }, {
-    key: "renderMain",
-    value: function renderMain() {
+    key: "renderVisibility",
+    value: function renderVisibility() {
       var _this5 = this;
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "optionsContent_bottom"
+      }, /*#__PURE__*/React__default['default'].createElement(Components$1.RadioButton, {
+        label: "Do you want to make this ".concat(values.entityName, " a public ").concat(values.entityName, "?"),
+        isActive: this.state.isPublic,
+        options: [{
+          Label: 'Yes',
+          Value: true,
+          onChange: function onChange() {
+            return _this5.setState({
+              isPublic: true
+            });
+          }
+        }, {
+          Label: 'No',
+          Value: false,
+          onChange: function onChange() {
+            return _this5.setState({
+              isPublic: false
+            });
+          }
+        }]
+      }), /*#__PURE__*/React__default['default'].createElement("div", {
+        className: "genericInput-help",
         style: {
-          marginBottom: 15
+          marginTop: 4
         }
-      }, /*#__PURE__*/React__default['default'].createElement("div", {
+      }, "This will allow anyone in the community to view and join the ".concat(values.entityName, ".")));
+    }
+  }, {
+    key: "renderSelectedOption",
+    value: function renderSelectedOption() {
+      return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+        style: {
+          display: this.state.selectedOption === 'visibility' ? 'block' : 'none'
+        }
+      }, this.renderVisibility()));
+    }
+  }, {
+    key: "renderOptionsSection",
+    value: function renderOptionsSection() {
+      var options = [{
+        key: 'visibility',
+        icon: 'people3',
+        text: 'Visibility'
+      }];
+
+      if (!this.props.circleAllowPublicCircles) {
+        options = ___default['default'].filter(options, function (o) {
+          return o.key !== 'visibility';
+        });
+      }
+
+      if (___default['default'].isEmpty(options)) {
+        return null;
+      }
+
+      return /*#__PURE__*/React__default['default'].createElement(Components$1.OptionsSection, {
+        options: options,
+        selected: this.state.selectedOption,
+        selectOption: this.selectOption
+      }, this.renderSelectedOption());
+    }
+  }, {
+    key: "renderMain",
+    value: function renderMain() {
+      var _this6 = this;
+
+      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$1.Text, {
         type: "formTitleLarge",
         className: "marginBottom-24"
-      }, this.state.circleId == null ? 'New' : 'Edit', " Circle"), /*#__PURE__*/React__default['default'].createElement("div", {
+      }, 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$1.ImageInput, {
         ref: function ref(_ref2) {
-          _this5.imageInput = _ref2;
+          _this6.imageInput = _ref2;
         },
         label: "IMAGE",
         limit: 1,
@@ -1147,18 +1255,18 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         id: "title",
         type: "text",
         label: "Title",
-        placeholder: "Name the Circle",
+        placeholder: "Name the ".concat(___default['default'].capitalize(values.entityName)),
         value: this.state.title,
         onChange: function onChange(e) {
-          return _this5.onHandleChange(e);
+          return _this6.onHandleChange(e);
         },
         isRequired: true,
         alwaysShowLabel: true,
         isValid: function isValid() {
-          return !___default['default'].isEmpty(_this5.state.title);
+          return !___default['default'].isEmpty(_this6.state.title);
         },
         showError: function showError() {
-          return _this5.state.showWarnings && ___default['default'].isEmpty(_this5.state.title);
+          return _this6.state.showWarnings && ___default['default'].isEmpty(_this6.state.title);
         }
       })))), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "padding-60 paddingVertical-40 bottomDivideBorder"
@@ -1178,7 +1286,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
         placeholder: "Enter name",
         value: this.state.userSearch,
         onChange: function onChange(e) {
-          return _this5.onHandleChange(e);
+          return _this6.onHandleChange(e);
         },
         alwaysShowLabel: true
       }), this.getShownUsers().map(function (user) {
@@ -1186,7 +1294,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
           key: user.userId,
           user: user,
           onClick: function onClick() {
-            _this5.onSelectUser(user);
+            _this6.onSelectUser(user);
           }
         });
       })), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -1205,15 +1313,15 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             icon: "close",
             colour: Colours$1.COLOUR_DUSK,
             onClick: function onClick() {
-              _this5.onSelectUser(user);
+              _this6.onSelectUser(user);
             }
           }), /*#__PURE__*/React__default['default'].createElement(Components$1.StatusButton, {
             isActive: user.isAdmin,
             activate: function activate() {
-              _this5.addAdmin(user);
+              _this6.addAdmin(user);
             },
             deactivate: function deactivate() {
-              _this5.removeAdmin(user);
+              _this6.removeAdmin(user);
             },
             activeText: "Admin",
             activateText: "Make Admin",
@@ -1221,7 +1329,7 @@ var AddCircle = /*#__PURE__*/function (_Component) {
             inactiveText: "Not Admin"
           }))
         });
-      })))));
+      })))), this.renderOptionsSection());
     }
   }, {
     key: "render",
@@ -1239,11 +1347,12 @@ var AddCircle = /*#__PURE__*/function (_Component) {
 }(React.Component);
 
 var mapStateToProps$1 = function mapStateToProps(state) {
-  var circles = state.circles.circles;
+  var circles = state[values.reducerKey].circles;
   var auth = state.auth;
   return {
     circles: circles,
-    auth: auth
+    auth: auth,
+    circleAllowPublicCircles: Helper$1.getSiteSettingFromState(state, values.allowPublicKey)
   };
 };
 
@@ -1253,619 +1362,6 @@ var AddCircle$1 = reactRedux.connect(mapStateToProps$1, {
   addRecentlyCreated: Actions$1.addRecentlyCreated
 })(reactRouter.withRouter(AddCircle));
 
-var getFileName = function getFileName(url, noExtension) {
-  if (!url) {
-    return null;
-  }
-
-  var fileSplit = url.split('/');
-  var name = fileSplit[fileSplit.length - 1].toLowerCase();
-
-  if (!noExtension) {
-    return name;
-  }
-
-  return name.split('.')[0];
-};
-
-var getPluralS = function getPluralS(count) {
-  if (count === 1) {
-    return '';
-  }
-
-  return 's';
-};
-//   if (!count) {
-//     return '0%';
-//   }
-//   if (!total) {
-//     return '100%';
-//   }
-//   return `${Math.round((100 * count) / total)}%`;
-// };
-// export const getUserPreview = (user) => {
-//   return {
-//     displayName: user.displayName,
-//     id: user.Id,
-//     profilePic: user.profilePic || defaultProfileImage,
-//   };
-// };
-// export const usersToPreviews = (users) => {
-//   return _.map(users, getUserPreview);
-// };
-// export const getSiteNameFromRoles = (site, roles) => {
-//   return getSiteName(
-//     site,
-//     roles.map((r) => {
-//       return r.siteInfo;
-//     }),
-//   );
-// };
-// export const getSiteName = (site, sites) => {
-//   if (site === 'hq') {
-//     return 'HQ';
-//   }
-//   const siteObject = _.find(sites, (t) => {
-//     return t.Id === site;
-//   });
-//   if (siteObject) {
-//     return siteObject.siteName;
-//   }
-//   return site;
-// };
-// export const formatCurrency = (number, locale = 'en-AU', curencyCode = 'AUD', shouldFix = false) => {
-//   const formatter = Intl.NumberFormat(locale, { style: 'currency', currency: curencyCode, minimumFractionDigits: 2 });
-//   let formattedNumber = number;
-//   if (shouldFix && formatter.format(formattedNumber).indexOf('NaN') > -1) {
-//     formattedNumber = number.replace(/[^\d.-]/g, '');
-//   }
-//   return formatter.format(formattedNumber);
-// };
-// export const currencyToFloat = (number) => {
-//   let result = parseFloat(number);
-//   if (isNaN(result)) {
-//     result = parseFloat(number.replace(/[^\d.-]/g, ''));
-//     if (isNaN(result)) {
-//       result = 0;
-//     }
-//   }
-//   return result;
-// };
-// export const getCurrencySymbol = () => {
-//   return formatCurrency(0).replace(/[0-9.]+/g, '');
-// };
-// export const isCurrency = (text) => {
-//   if (!text) return false;
-//   const price = parseFloat(typeof text === 'string' ? text.replace(getCurrencySymbol(), '') : text, 10);
-//   return _.isNumber(price) && !Number.isNaN(price) ? price : false;
-// };
-// export const isPaidItem = (enabled, tickets) => {
-//   // console.log('isPaidItem', enabled, tickets);
-//   return (
-//     enabled &&
-//     tickets &&
-//     tickets.merchant &&
-//     tickets.categories &&
-//     tickets.categories.length > 0 &&
-//     tickets.categories.every((t) => !t.price || _.isNumber(t.price))
-//   );
-// };
-// export const getTotalQuantity = (tickets) => _.sumBy(tickets, (t) => t.quantity || 0);
-// export const getTotalPrice = (tickets) => _.sumBy(tickets, (t) => t.price * (t.quantity || 0));
-// export const parseTickets = (tickets, merchant) => {
-//   if (Array.isArray(tickets)) return { merchant, categories: tickets };
-//   if (tickets && typeof tickets === 'object') return tickets;
-//   return { merchant, categories: [{ category: 'Default', price: tickets }] };
-// };
-// export const compileTickets = (tickets, merchant) => {
-//   const newTickets = _.cloneDeep(tickets);
-//   newTickets.merchant = merchant;
-//   newTickets.categories = newTickets.categories.map((ticket) => {
-//     ticket.price = isCurrency(ticket.price);
-//     return ticket;
-//   });
-//   return newTickets;
-// };
-// export const getTicketPriceText = (ticket) => {
-//   return typeof ticket.price === 'string' ? ticket.price : formatCurrency(ticket.price);
-// };
-// export const isTicketCategoryValid = (ticket, ticketDetail) => {
-//   return !_.isEmpty(ticket.category) && ticketDetail.categories.filter((t) => t.category === ticket.category).length === 1;
-// };
-// export const isTicketPriceValid = (ticket) => {
-//   return ticket.price && isCurrency(ticket.price) !== false;
-// };
-// export const isTicketsValid = (tickets) => {
-//   if (tickets && tickets.categories && tickets.categories.length > 0) {
-//     return tickets.categories.every((ticket) => isTicketCategoryValid(ticket, tickets) && isTicketPriceValid(ticket));
-//   }
-//   return true;
-// };
-// export const getFee = (feeInfo, amount) => {
-//   if (!feeInfo.fee) return 0;
-//   return feeInfo.isPercentage ? (feeInfo.fee / 100) * amount : feeInfo.fee;
-// };
-// export const isRefund = (transaction) => transaction.TransactionType === 'REFUND';
-// export const combineTickets = (ticketsArray, diff = false) => {
-//   if (_.isNil(ticketsArray) || ticketsArray.length === 0) return [];
-//   const combined = ticketsArray.reduce((a, c) => {
-//     if (_.isNil(a) || a.length === 0) return c;
-//     const summed = a.map((cat) => {
-//       const cloned = _.clone(cat);
-//       const match = c.find((i) => i.category === cloned.category);
-//       cloned.quantity = (diff ? -1 : 1) * (cloned.quantity || 0) + (match ? match.quantity || 0 : 0);
-//       return cloned;
-//     });
-//     return summed;
-//   });
-//   return combined;
-// };
-// export const combineTransactions = (transactionsArray) => {
-//   if (_.isNil(transactionsArray) || transactionsArray.length === 0) return null;
-//   const combined = _.orderBy(transactionsArray, 'UnixTimestamp', 'desc').reduce((a, c) => {
-//     // console.log('transaction a', a.TransactionType, a.TransactionId, a.Amount, a.Fee.amount);
-//     // console.log('transaction c', c.TransactionType, c.TransactionId, c.Amount, c.Fee.amount);
-//     const cloned = _.cloneDeep(c);
-//     cloned.Amount = cloned.Amount + a.Amount;
-//     cloned.Fee.amount = cloned.Fee.amount + a.Fee.amount;
-//     cloned.Item.categories = combineTickets([cloned.Item.categories, a.Item.categories]);
-//     return cloned;
-//   });
-//   // console.log('combined', combined.TransactionType, combined.TransactionId, combined.Amount, combined.Fee.amount);
-//   return combined;
-// };
-// export const consolidateTransactions = (transactionsArray) => {
-//   const transactions = transactionsArray
-//     .filter((pt) => pt.TransactionType === 'PAYMENT')
-//     .map((p) => {
-//       // Combine with all refunds for the transaction
-//       const refunds = transactionsArray.filter((rt) => rt.TransactionType === 'REFUND' && rt.TransactionId === p.TransactionId);
-//       return combineTransactions([...refunds, p]);
-//     })
-//     .filter((p) => getTotalQuantity(p.Item.categories) > 0);
-//   return transactions;
-// };
-// export const isKiosk = (type) => {
-//   return type === 'KIOSK' || type === 'FORMKIOSK' || type === 'SIGNINKIOSK';
-// };
-// export const isContentSource = (site) => {
-//   if (`${baseClient}-${baseStage}` !== contentSource) {
-//     return false;
-//   }
-//   return site === contentSourceSite;
-// };
-// export const formatDuration = (msDuration) => {
-//   const diff = moment.duration(msDuration);
-//   let result = '';
-//   const days = Math.floor(diff.asDays());
-//   if (days > 0) {
-//     result += `${days} day${getPluralS(days)} `;
-//     diff.add(-days, 'd');
-//   }
-//   const hours = Math.floor(diff.asHours());
-//   if (hours > 0) {
-//     result += `${hours} hour${getPluralS(hours)} `;
-//     diff.add(-hours, 'h');
-//   }
-//   const minutes = Math.floor(diff.asMinutes());
-//   if (minutes > 0) {
-//     result += `${minutes} minute${getPluralS(minutes)} `;
-//     diff.add(-minutes, 'm');
-//   }
-//   if (_.isEmpty(result)) {
-//     return 'Less than a minute';
-//   }
-//   return result.trim();
-// };
-// export const readJSONFromStorage = (storage, key, fallback) => {
-//   const value = storage.getItem(key);
-//   if (value) {
-//     return JSON.parse(value);
-//   }
-//   return fallback;
-// };
-// export const readStorageWithCookie = (key, isJson) => {
-//   const value = window.localStorage.getItem(key);
-//   if (value) {
-//     if (isJson) {
-//       try {
-//         return JSON.parse(value);
-//       } catch (e) {
-//         console.log('parse error', e);
-//       }
-//       return null;
-//     }
-//     return value;
-//   }
-//   if (isJson) {
-//     return Cookies.getJSON(key);
-//   }
-//   return Cookies.get(key);
-// };
-// export const clearLocalStorage = (key) => {
-//   window.localStorage.removeItem(key);
-//   Cookies.remove(key);
-// };
-// export const setLocalStorage = (key, value, isJson) => {
-//   window.localStorage.setItem(key, isJson ? JSON.stringify(value) : value);
-// };
-// export const TIMESTAMPFORMAT = 'D MMM YYYY h:mma';
-// export const featureInfo = [
-//   ...extensionFeatureInfo,
-//   {
-//     key: 'dashboard',
-//     order: 1,
-//     text: 'Dashboard',
-//     icon: 'dashboard',
-//     isFontAwesome: false,
-//     url: '/mastermenu',
-//     countProps: null,
-//     visibleExps: null,
-//   },
-//   {
-//     key: 'events',
-//     order: 2,
-//     text: 'Events',
-//     icon: 'event',
-//     isFontAwesome: false,
-//     url: '/events',
-//     addUrl: '/events/event',
-//     addPermission: 'events',
-//     singularName: 'event',
-//     countProps: ['eventSubmissions', 'length'],
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'events' },
-//         {
-//           type: 'or',
-//           exps: [
-//             { type: 'permission', value: 'events' },
-//             { type: 'permission', value: 'eventAttendance' },
-//             { type: 'permission', value: 'eventSubmit' },
-//           ],
-//         },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'news',
-//     order: 3,
-//     text: 'News',
-//     icon: 'news',
-//     isFontAwesome: false,
-//     url: '/news',
-//     addUrl: '/news/article',
-//     addPermission: 'newsletter',
-//     singularName: 'news',
-//     countProps: ['newsSubmissions', 'length'],
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'news' },
-//         {
-//           type: 'or',
-//           exps: [
-//             { type: 'permission', value: 'newsletter' },
-//             { type: 'permission', value: 'newsletterSubmit' },
-//           ],
-//         },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'alerts',
-//     order: 4,
-//     text: 'Alerts',
-//     icon: 'exclamation-triangle',
-//     isFontAwesome: true,
-//     url: '/alerts',
-//     addUrl: '/alerts/addalert',
-//     addPermission: 'alerts',
-//     singularName: 'alert',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'alerts' },
-//         { type: 'permission', value: 'alerts' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'users',
-//     order: 5,
-//     text: 'Users',
-//     icon: 'people',
-//     isFontAwesome: false,
-//     url: '/usershub',
-//     addUrl: '/usershub/adduser',
-//     addPermission: 'userManagement',
-//     singularName: 'user',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'users' },
-//         { type: 'permission', value: 'userManagement' },
-//         { type: 'state', value: 'adminOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'gallery',
-//     order: 6,
-//     text: 'Gallery',
-//     icon: 'picture-o',
-//     isFontAwesome: true,
-//     url: '/imageLibrary',
-//     addPermission: 'addToPublishingImageLibrary',
-//     singularName: 'gallery image',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'gallery' },
-//         { type: 'permission', value: 'addToPublishingImageLibrary' },
-//         { type: 'state', value: 'adminOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'services',
-//     order: 7,
-//     text: 'Services',
-//     icon: 'stethoscope',
-//     isFontAwesome: true,
-//     url: '/services',
-//     addUrl: '/services/service',
-//     addPermission: 'services',
-//     singularName: 'service',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'services' },
-//         { type: 'permission', value: 'services' },
-//         { type: 'state', value: 'adminOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'sponsors',
-//     order: 8,
-//     text: 'Sponsors',
-//     icon: 'star-o',
-//     isFontAwesome: true,
-//     url: '/sponsors',
-//     addUrl: '/sponsors/sponsor',
-//     addPermission: 'services',
-//     singularName: 'sponsor',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'services' },
-//         { type: 'permission', value: 'services' },
-//         { type: 'state', value: 'adminOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'info',
-//     order: 9,
-//     text: 'Information',
-//     icon: 'info',
-//     isFontAwesome: false,
-//     url: '/info',
-//     addUrl: '/info/infopage',
-//     addPermission: 'infoPages',
-//     singularName: CONST_STRINGS.FAQ_ENTRY,
-//     countProps: null,
-//     visibleExps: {
-//       type: 'or',
-//       exps: [
-//         {
-//           type: 'and',
-//           exps: [
-//             { type: 'feature', value: 'importantContacts' },
-//             { type: 'permission', value: 'importantContacts' },
-//           ],
-//         },
-//         {
-//           type: 'and',
-//           exps: [
-//             { type: 'feature', value: 'maps' },
-//             { type: 'permission', value: 'maps' },
-//           ],
-//         },
-//         {
-//           type: 'and',
-//           exps: [
-//             { type: 'feature', value: 'infoPages' },
-//             { type: 'permission', value: 'infoPages' },
-//           ],
-//         },
-//         {
-//           type: 'and',
-//           exps: [
-//             { type: 'feature', value: 'news' },
-//             { type: 'permission', value: 'welcomePages' },
-//           ],
-//         },
-//         { type: 'permission', value: 'terms' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'surveys',
-//     order: 11,
-//     text: 'Surveys',
-//     icon: 'pie-chart',
-//     isFontAwesome: true,
-//     url: '/polls',
-//     addUrl: '/polls/poll',
-//     addPermission: 'polls',
-//     singularName: 'survey',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'surveys' },
-//         { type: 'permission', value: 'polls' },
-//         { type: 'state', value: 'conciergeOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'facilities',
-//     order: 12,
-//     text: CONST_STRINGS.FACILITIES,
-//     icon: 'facility',
-//     isFontAwesome: false,
-//     url: '/facilities',
-//     addUrl: '/facilities/facility',
-//     addPermission: 'facilities',
-//     singularName: 'facility',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'facilities' },
-//         { type: 'permission', value: 'facilities' },
-//         { type: 'state', value: 'conciergeOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'offers',
-//     order: 13,
-//     text: 'Offers',
-//     icon: 'shopping-bag',
-//     isFontAwesome: true,
-//     url: '/offers',
-//     addUrl: '/offers/offer',
-//     addPermission: 'offers',
-//     singularName: 'offer',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'offers' },
-//         { type: 'permission', value: 'offers' },
-//         { type: 'state', value: 'conciergeOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'signin',
-//     order: 14,
-//     text: 'Sign Ins',
-//     icon: 'signin',
-//     isFontAwesome: false,
-//     url: '/signinHub',
-//     addUrl: null,
-//     addPermission: 'visitors',
-//     singularName: 'visitor',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'visitors' },
-//         { type: 'permission', value: 'visitors' },
-//         { type: 'state', value: 'conciergeOpen' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'food',
-//     order: 15,
-//     text: 'Restaurant Manager',
-//     icon: 'cutlery',
-//     isFontAwesome: true,
-//     url: '/food',
-//     addUrl: null,
-//     addPermission: 'food',
-//     singularName: 'dish',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'feature', value: 'food' },
-//         { type: 'permission', value: 'food' },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'payment',
-//     order: 16,
-//     text: 'Payment',
-//     icon: 'usd',
-//     isFontAwesome: true,
-//     url: '/payment',
-//     addUrl: null,
-//     addPermission: null,
-//     singularName: 'payment',
-//     countProps: null,
-//     visibleExps: {
-//       type: 'and',
-//       exps: [
-//         { type: 'props', value: 'paymentEnabled' },
-//         {
-//           type: 'or',
-//           exps: [
-//             { type: 'feature', value: 'managePayments' },
-//             { type: 'permission', value: 'viewPayments' },
-//           ],
-//         },
-//       ],
-//     },
-//   },
-//   {
-//     key: 'automation',
-//     order: 17,
-//     text: 'Automation',
-//     icon: 'bolt',
-//     isFontAwesome: true,
-//     url: '/automationHub',
-//     addUrl: null,
-//     addPermission: null,
-//     singularName: 'automation',
-//     countProps: null,
-//     visibleExps: { type: 'master', value: true },
-//   },
-// ];
-// export const getFeatureInfo = (type) => {
-//   switch (type) {
-//     case 'maps':
-//       return {
-//         key: 'maps',
-//         icon: 'map',
-//         isFontAwesome: true,
-//         url: '/info',
-//         addUrl: '/info/map',
-//         addPermission: 'maps',
-//         singularName: 'map',
-//       };
-//     case 'importantContacts':
-//       return {
-//         key: 'importantContacts',
-//         icon: 'address-card-o',
-//         isFontAwesome: true,
-//         url: '/info',
-//         addUrl: '/info/importantcontact',
-//         addPermission: 'importantContacts',
-//         singularName: 'contact',
-//       };
-//     case 'info':
-//     case 'infoPages':
-//       return featureInfo.find((n) => n.key === 'info');
-//     default:
-//       const info = featureInfo.find((n) => n.key === type);
-//       return info || { key: type, icon: type };
-//   }
-// };
-
 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; } }
@@ -2275,7 +1771,7 @@ var Circle = /*#__PURE__*/function (_Component) {
     value: function validateCircleAdmin() {
       var _this4 = this;
 
-      if (Session.validateAccess(this.props.auth.site, 'circles', this.props.auth)) {
+      if (Session.validateAccess(this.props.auth.site, values.permission, this.props.auth)) {
         return true;
       }
 
@@ -2292,7 +1788,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         return /*#__PURE__*/React__default['default'].createElement(Components.Text, {
           type: "highlightedHelp",
           className: "chat_noMessage"
-        }, "You can't send a message to this Circle as you are not a member.");
+        }, "You can't send a message to this ", ___default['default'].capitalize(values.entityName), " as you are not a member.");
       }
 
       return /*#__PURE__*/React__default['default'].createElement("div", {
@@ -2423,7 +1919,7 @@ var Circle = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/React__default['default'].createElement("div", {
         className: "flex flex-center"
       }, /*#__PURE__*/React__default['default'].createElement(reactRouterDom.Link, {
-        to: "/circles/edit/".concat(this.state.circleId)
+        to: "/".concat(values.featureKey, "/edit/").concat(this.state.circleId)
       }, /*#__PURE__*/React__default['default'].createElement(FontAwesome__default['default'], {
         className: "header_back",
         name: "cog"
@@ -2455,7 +1951,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "flex-1"
       }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
         type: "formTitleMedium"
-      }, "Member", getPluralS(members.length), " (", members.length, ")"))), this.state.membersExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
+      }, "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.UserListing, {
@@ -2473,7 +1969,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "flex-1"
       }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
         type: "formTitleMedium"
-      }, "Image", getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
+      }, "Image", Helper.getPluralS(this.state.images.length), " (", this.state.images.length, ")"))), this.state.imagesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
         className: "paddingTop-8"
       }, this.state.images.map(function (image, i) {
         return /*#__PURE__*/React__default['default'].createElement("a", {
@@ -2482,7 +1978,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         }, /*#__PURE__*/React__default['default'].createElement("img", {
           src: image.Url,
           className: "chat_section_image",
-          alt: getFileName(image.Url)
+          alt: Helper.getFileName(image.Url)
         }));
       }))), /*#__PURE__*/React__default['default'].createElement("div", {
         className: "chat_section"
@@ -2496,7 +1992,7 @@ var Circle = /*#__PURE__*/function (_Component) {
         className: "flex-1"
       }, /*#__PURE__*/React__default['default'].createElement(Components.Text, {
         type: "formTitleMedium"
-      }, "File", getPluralS(this.state.files.length), " (", this.state.files.length, ")"))), this.state.filesExpanded && /*#__PURE__*/React__default['default'].createElement("div", {
+      }, "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.Attachment, {
@@ -2578,7 +2074,7 @@ var Circle = /*#__PURE__*/function (_Component) {
 }(React.Component);
 
 var mapStateToProps = function mapStateToProps(state) {
-  var circles = state.circles.circles;
+  var circles = state[values.reducerKey].circles;
   var auth = state.auth;
   return {
     circles: circles,
@@ -2846,14 +2342,9 @@ var PreviewGrid = /*#__PURE__*/function (_Component) {
   return PreviewGrid;
 }(React.Component);
 
-var Reducers = {
-  circles: CircleReducer
-};
-var Screens = {
-  Circles: Circles$1,
-  AddCircle: AddCircle$1,
-  Circle: Circle$1
-};
+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);
 
 exports.Config = FeatureConfig;
 exports.PreviewFull = PreviewFull;