@plusscommunities/pluss-circles-web-groups 1.0.17-beta.0 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@plusscommunities/pluss-circles-web-groups",
-  "version": "1.0.17-beta.0",
+  "version": "1.0.18",
   "description": "Extension package to enable circles on Pluss Communities Platform",
   "main": "dist/index.cjs.js",
   "scripts": {
@@ -35,7 +35,10 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.14.0",
-    "@plusscommunities/pluss-core-web": "1.4.14-beta.0",
+    "@plusscommunities/pluss-core-web": "1.4.22",
+    "@fortawesome/fontawesome-svg-core": "^6.4.0",
+    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "lodash": "^4.17.4",
     "moment": "^2.18.1",
     "react": "^16.14.0",

package/src/apis/index.js

@@ -1 +1,7 @@
+import { PlussCore } from '../feature.config';
+
+const { Apis } = PlussCore;
+
+export const analyticsActions = Apis.analyticsActions;
+
 export * from './circleActions';

package/src/components/AnalyticsHub.js

@@ -0,0 +1,214 @@
+import React, { useState, useEffect } from 'react';
+import moment from 'moment';
+import { faEye, faMessage, faPeopleArrows, faUserGroup, faUserTie, faUsers, faUsersRectangle } from '@fortawesome/free-solid-svg-icons';
+import { connect } from 'react-redux';
+import { analyticsActions } from '../apis';
+import { values } from '../values.config';
+import { PlussCore } from '../feature.config';
+
+const { Analytics, Session, Components } = PlussCore;
+
+const getInitialState = () => ({
+  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
+const AnalyticsHub = ({ startTime, endTime, auth, prevText, dayCount, strings }) => {
+  const [analyticsData, setAnalyticsData] = useState(getInitialState());
+  const [isExportOpen, setIsExportOpen] = useState(false);
+
+  const hasAccess = Session.validateAccess(auth.site, values.permissionNewsletter, auth);
+  if (!hasAccess) {
+    return null;
+  }
+
+  const featureTitle = ((key) => {
+    if (!strings || !strings.sideNav || !strings.sideNav[key]) {
+      return values.textFeatureTitle;
+    }
+    return strings.sideNav[key];
+  })();
+
+  const exportColumns = [
+    { label: 'Select All', key: '' },
+    { label: 'Start Date', key: 'startDate' },
+    { label: 'End Date', key: 'endDate' },
+    { label: 'Messages', key: 'messages' },
+    { label: 'Messages by Staff', key: 'staffMessages' },
+    { label: 'Messages by Primary Users', key: 'residentMessages' },
+    { label: 'Group Messages', key: 'groupMessages' },
+    { label: 'Private Messages', key: 'privateMessages' },
+    { label: 'Groups with Messages', key: 'activeGroups' },
+  ];
+
+  useEffect(() => {
+    getData();
+  }, [startTime, endTime]);
+
+  const getData = async () => {
+    setAnalyticsData(getInitialState());
+    // Load analytics data here using startTime and endTime
+    const timeDifference = endTime - startTime;
+    const [currentStatsResponse, prevStatsResponse] = await Promise.all([
+      analyticsActions.getAggregateEntityStats(auth.site, values.entityKey, startTime, endTime, true),
+      analyticsActions.getAggregateEntityStats(auth.site, values.entityKey, startTime - timeDifference, startTime, true),
+    ]);
+
+    const data = {
+      messages: Analytics.countActivities(currentStatsResponse.data, 'Message', 'total'),
+      prevMessages: Analytics.countActivities(prevStatsResponse.data, 'Message', 'total'),
+      staffMessages: Analytics.countActivities(currentStatsResponse.data, 'StaffMessage', 'total'),
+      prevStaffMessages: Analytics.countActivities(prevStatsResponse.data, 'StaffMessage', 'total'),
+      residentMessages: Analytics.countActivities(currentStatsResponse.data, 'ResidentMessage', 'total'),
+      prevResidentMessages: Analytics.countActivities(prevStatsResponse.data, 'ResidentMessage', 'total'),
+      groupMessages: Analytics.countActivities(currentStatsResponse.data, 'GroupMessage', 'total'),
+      prevGroupMessages: Analytics.countActivities(prevStatsResponse.data, 'GroupMessage', 'total'),
+      privateMessages: Analytics.countActivities(currentStatsResponse.data, 'PrivateMessage', 'total'),
+      prevPrivateMessages: Analytics.countActivities(prevStatsResponse.data, 'PrivateMessage', 'total'),
+      activeGroups: Analytics.countActivities(currentStatsResponse.data, 'GroupMessage', 'unique'),
+      prevActiveGroups: Analytics.countActivities(prevStatsResponse.data, 'GroupMessage', 'unique'),
+      // uniquePageView: Analytics.countActivities(currentStatsResponse.data, 'UniquePageView', 'uniquearray'),
+      // prevUniquePageView: Analytics.countActivities(prevStatsResponse.data, 'UniquePageView', 'uniquearray'),
+      isLoading: false,
+    };
+    setAnalyticsData(data);
+  };
+
+  const isReadyToOpenCSV = () => {
+    return !analyticsData.isLoading;
+  };
+
+  const getExportSource = () => {
+    return [
+      {
+        startDate: moment(startTime + 1).format('D-MM-YYYY'),
+        endDate: moment(endTime).format('D-MM-YYYY'),
+        messages: analyticsData.messages,
+        staffMessages: analyticsData.staffMessages,
+        residentMessages: analyticsData.residentMessages,
+        groupMessages: analyticsData.groupMessages,
+        privateMessages: analyticsData.privateMessages,
+        activeGroups: analyticsData.activeGroups,
+      },
+    ];
+  };
+
+  const csvPopup = () => {
+    if (!isExportOpen) {
+      return null;
+    }
+    const source = getExportSource();
+    return (
+      <Components.ExportCsvPopup
+        onClose={() => {
+          setIsExportOpen(false);
+        }}
+        columns={exportColumns}
+        source={source}
+        filename={`${values.analyticsKey}analytics_${source[0].startDate}_${source[0].endDate}.csv`}
+      />
+    );
+  };
+
+  return (
+    <div className="dashboardSection">
+      {csvPopup()}
+      <div>
+        <Components.Text type="h4" className="inlineBlock marginRight-40">
+          {featureTitle}
+        </Components.Text>
+        <Components.Button
+          inline
+          buttonType="primaryAction"
+          onClick={() => {
+            if (!isReadyToOpenCSV()) return;
+            setIsExportOpen(true);
+          }}
+          isActive={isReadyToOpenCSV()}
+          leftIcon="file-code-o"
+        >
+          Export CSV
+        </Components.Button>
+      </div>
+      <div className="analyticsSection dashboardSection_content">
+        <Components.StatBox
+          title="Groups with Messages"
+          icon={faUserGroup}
+          value={analyticsData.activeGroups}
+          previousValue={analyticsData.prevActiveGroups}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=GroupMessage&countType=unique&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Messages"
+          icon={faMessage}
+          value={analyticsData.messages}
+          previousValue={analyticsData.prevMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=Message&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Messages by Staff"
+          icon={faUserTie}
+          value={analyticsData.staffMessages}
+          previousValue={analyticsData.prevStaffMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=StaffMessage&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Messages by Primary Users"
+          icon={faUsers}
+          value={analyticsData.residentMessages}
+          previousValue={analyticsData.prevResidentMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=ResidentMessage&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Group Messages"
+          icon={faUsersRectangle}
+          value={analyticsData.groupMessages}
+          previousValue={analyticsData.prevGroupMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=GroupMessage&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+        <Components.StatBox
+          title="Private Messages"
+          icon={faPeopleArrows}
+          value={analyticsData.privateMessages}
+          previousValue={analyticsData.prevPrivateMessages}
+          prevText={prevText}
+          viewGraphLink={`/chart?entity=${values.entityKey}&startTime=${startTime}&endTime=${endTime}&key=PrivateMessage&countType=total&dayCount=${dayCount}`}
+          isLoading={analyticsData.isLoading}
+        />
+      </div>
+    </div>
+  );
+};
+
+const mapStateToProps = (state) => {
+  const { auth } = state;
+  return {
+    auth,
+    strings: (state.strings && state.strings.config) || {},
+  };
+};
+
+const toExport = connect(mapStateToProps, {})(AnalyticsHub);
+export { toExport as AnalyticsHub };

package/src/index.js

@@ -1,6 +1,7 @@
 import Circles from './screens/Circles';
 import AddCircle from './screens/AddCircle';
 import Circle from './screens/Circle';
+import { AnalyticsHub } from './components/AnalyticsHub.js';
 import CircleReducer from './reducers/CircleReducer';
 import { values } from './values.config';
 
@@ -13,3 +14,4 @@ export { default as PreviewWidget } from './components/PreviewWidget';
 export { default as PreviewFull } from './components/PreviewFull';
 export { default as PreviewGrid } from './components/PreviewGrid';
 export { default as FeaturePickerContent } from './components/FeaturePickerContent';
+export const Analytics = [AnalyticsHub];

package/src/screens/Circle.js

@@ -25,6 +25,7 @@ class Circle extends Component {
       images: [],
       files: [],
       membersExpanded: true,
+      replyingTo: null,
     };
   }
 
@@ -189,6 +190,16 @@ class Circle extends Component {
     });
   };
 
+  onReply = (m) => {
+    this.setState({
+      replyingTo: m,
+    });
+    if (m) {
+      const input = document.getElementById('messageInput');
+      if (input) input.focus();
+    }
+  };
+
   isMember() {
     const audience = this.getCircle().Audience || [];
     return _.some(audience, (u) => {
@@ -268,6 +279,10 @@ class Circle extends Component {
       return;
     }
 
+    if (this.state.replyingTo) {
+      message.replyingTo = this.state.replyingTo;
+    }
+
     const clonedMessage = _.cloneDeep(message);
     clonedMessage.uploading = true;
 
@@ -287,6 +302,7 @@ class Circle extends Component {
       fileInputShowing: false,
     });
     setTimeout(() => {
+      this.onReply(null);
       this.scrollToBottom();
       this.imageInput && this.imageInput.getWrappedInstance().setValue(null);
       this.fileInput && this.fileInput.getWrappedInstance().setValue(null);
@@ -391,7 +407,15 @@ class Circle extends Component {
           <div className="message_bubbleContainer">
             <Components.Text type="body" className="message_name">
               {m.user.name}
+              {m.replyingTo ? ` replied to ${m.replyingTo.user.name}` : ''}
             </Components.Text>
+            {m.replyingTo && (
+              <div className="message_replyBubble">
+                <Components.Text type="body" className="message_text">
+                  {Helper.toParagraphed((m.replyingTo.text || '').substr(0, 100))}
+                </Components.Text>
+              </div>
+            )}
             <div className="message_bubble">
               <Components.Text type="body" className="message_text">
                 {Helper.toParagraphed(m.text)}
@@ -411,6 +435,16 @@ class Circle extends Component {
                 })}
               </div>
             </div>
+            <div className="message_reply">
+              <Components.Text
+                type="button"
+                onClick={() => {
+                  this.onReply(m);
+                }}
+              >
+                Reply
+              </Components.Text>
+            </div>
           </div>
         </div>
       </div>
@@ -512,6 +546,31 @@ class Circle extends Component {
     );
   }
 
+  renderReplyTo() {
+    if (!this.state.replyingTo) {
+      return null;
+    }
+    const m = this.state.replyingTo;
+    return (
+      <div className="chat_replyTo">
+        <div className="chat_replyTo_container">
+          <Components.Text type="h5">Replying to {m && m.user && !_.isEmpty(m.user.displayName) ? m.user.displayName : ''}</Components.Text>
+          {m && !_.isEmpty(m.text) && <Components.Text type="body">{m.text.substr(0, 50)}</Components.Text>}
+        </div>
+        <div className="chat_replyTo_remove">
+          <Components.SVGIcon
+            className="removeIcon"
+            icon="close"
+            onClick={() => {
+              this.onReply(null);
+            }}
+            colour={Colours.COLOUR_DUSK}
+          />
+        </div>
+      </div>
+    );
+  }
+
   render() {
     return (
       <Components.OverlayPage fullPage fullPageStyle={{ display: 'flex', flexDirection: 'column' }}>
@@ -562,6 +621,7 @@ class Circle extends Component {
             </Components.Header>
             <div className="chat">
               <div className="chat_newMessage">{this.renderChatInput()}</div>
+              {this.renderReplyTo()}
               <div ref={(ref) => (this.chat = ref)} className="chat_messages">
                 {_.isEmpty(this.state.messages) && !_.isEmpty(this.state.messageDate) && this.renderEmptyDate()}
                 {this.state.messages.map((m) => {