Notifications analytics

.circleci/config.yml

@@ -175,6 +175,7 @@ workflows:
             branches:
               only:
                 - develop
+                - notifications-analytics
       # This is alternate dev env for parallel testing
       - "build-test":
           context : org-global      
@@ -189,6 +190,7 @@ workflows:
             branches:
               only:
                 - develop
+                - notifications-analytics
       # Production builds are exectuted 
       # when PR is merged to the master
       # Don't change anything in this configuration

.dockerignore

@@ -1,2 +1,3 @@
 __coverage__/
 .git/
+node_modules/

Dockerfile

@@ -119,6 +119,7 @@ ENV CONTENTFUL_EDU_PREVIEW_API_KEY=$CONTENTFUL_EDU_PREVIEW_API_KEY
 ################################################################################
 # Testing and build of the application inside the container.
 
+RUN npm config set unsafe-perm true
 RUN npm install
 RUN npm test
 RUN npm run build

__tests__/shared/components/Header/__snapshots__/index.jsx.snap

@@ -188,4 +188,4 @@ exports[`Default render 1`] = `
     theme="light"
   />
 </div>
-`;
+`;

package.json

@@ -13,11 +13,12 @@
     "lint": "npm run lint:js && npm run lint:scss",
     "lint:js": "eslint --ext .js,.jsx .",
     "lint:scss": "stylelint **/*.scss --syntax scss",
+    "update-tests": "npm run jest -- -u",
     "start": "cross-env BABEL_ENV=production NODE_ENV=production node ./bin/www",
     "test": "npm run lint && npm run jest",
     "commitlint": "commitlint -E HUSKY_GIT_PARAMS",
     "release:changelog": "npm run conventional-changelog -- -p angular -i CHANGELOG.md -s",
-    "postinstall": "rimraf node_modules/navigation-component/node_modules/topcoder-react-utils && rimraf node_modules/topcoder-react-ui-kit/node_modules/topcoder-react-utils"
+    "postinstall": "rimraf node_modules/navigation-component/node_modules/topcoder-react-utils && rimraf node_modules/navigation-component/node_modules/topcoder-react-lib && rimraf node_modules/topcoder-react-ui-kit/node_modules/topcoder-react-utils"
   },
   "repository": {
     "type": "git",
@@ -80,7 +81,7 @@
     "moment-timezone": "^0.5.21",
     "money": "^0.2.0",
     "morgan": "^1.9.0",
-    "navigation-component": "git+https://github.com/topcoder-platform/navigation-component.git#develop",
+    "navigation-component": "topcoder-platform/navigation-component#develop",
     "node-forge": "^0.7.5",
     "nuka-carousel": "^4.5.3",
     "postcss": "^6.0.23",
@@ -132,7 +133,7 @@
     "tc-accounts": "git+https://github.com/appirio-tech/accounts-app.git#dev",
     "tc-core-library-js": "github:appirio-tech/tc-core-library-js#v2.6.3",
     "tc-ui": "^1.0.12",
-    "topcoder-react-lib": "0.15.0",
+    "topcoder-react-lib": "v1000.13.6",
     "topcoder-react-ui-kit": "^1.0.11",
     "topcoder-react-utils": "0.7.8",
     "turndown": "^4.0.2",

src/shared/components/Header/index.jsx

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, { useState, useEffect } from 'react';
 import PT from 'prop-types';
 import { config } from 'topcoder-react-utils';
+import { tracking } from 'topcoder-react-lib';
 import Logo from 'assets/images/tc-logo.svg';
 
 let TopNavRef;
@@ -62,6 +63,15 @@ const Header = ({
     }, [auth.tokenV3]);
   }
 
+  /*
+   * Init Google Analytics
+  */
+  if (auth && auth.user) {
+    useEffect(() => {
+      tracking.init(auth.user.handle);
+    }, [auth.user.handle]);
+  }
+
   if (TopNavRef) {
     return (
       <div>

src/shared/components/Notifications/TabsPanel/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import { tracking } from 'topcoder-react-lib';
 import styles from './style.scss';
 
 
@@ -33,12 +34,14 @@ export default class TabsPanel extends React.Component {
               () => {
                 this.setState({ tab: TABS.ACTIVE });
                 changeTab(TABS.ACTIVE);
+                tracking.event('Click', 'Change Tab', 'Active Challenges');
               }
             }
             onKeyPress={
               () => {
                 this.setState({ tab: TABS.ACTIVE });
                 changeTab(TABS.ACTIVE);
+                tracking.event('Click', 'Change Tab', 'Active Challenges');
               }
             }
           >CHALLENGES
@@ -51,12 +54,14 @@ export default class TabsPanel extends React.Component {
               () => {
                 this.setState({ tab: TABS.BROADCAST });
                 changeTab(TABS.BROADCAST);
+                tracking.event('Click', 'Change Tab', 'Notifications');
               }
             }
             onKeyPress={
               () => {
                 this.setState({ tab: TABS.BROADCAST });
                 changeTab(TABS.BROADCAST);
+                tracking.event('Click', 'Change Tab', 'Notifications');
               }
             }
           >NOTIFICATIONS
@@ -72,12 +77,14 @@ export default class TabsPanel extends React.Component {
               () => {
                 this.setState({ tab: TABS.COMPLETED });
                 changeTab(TABS.COMPLETED);
+                tracking.event('Click', 'Change Tab', 'Completed Challenges');
               }
             }
             onKeyPress={
               () => {
                 this.setState({ tab: TABS.COMPLETED });
                 changeTab(TABS.COMPLETED);
+                tracking.event('Click', 'Change Tab', 'Completed Challenges');
               }
             }
           >COMPLETED CHALLENGES

src/shared/components/Notifications/index.jsx

@@ -4,6 +4,7 @@ import cn from 'classnames';
 import _ from 'lodash';
 import moment from 'moment';
 import { Link } from 'topcoder-react-utils';
+import { tracking } from 'topcoder-react-lib';
 import IconArrow from 'assets/images/notifications/arrow.svg';
 import styles from './style.scss';
 import TabsPanel from './TabsPanel';
@@ -36,7 +37,13 @@ const Item = ({
       <Link
         to={`/challenges/${item.sourceId}`}
         className={styles['noti-item']}
-        onClick={() => !item.isRead && markNotificationAsRead(item, auth.tokenV3)}
+        onClick={() => {
+          if (!item.isRead) {
+            markNotificationAsRead(item, auth.tokenV3);
+            tracking.event('Click', 'Mark Notification As Read', 'Details Page');
+          }
+          tracking.event('Click', 'Notification Event', String(item.sourceId));
+        }}
       >
         {children}
       </Link>
@@ -70,9 +77,11 @@ const Item = ({
                 e.stopPropagation();
                 e.nativeEvent.stopImmediatePropagation();
                 markNotificationAsRead(item, auth.tokenV3);
+                tracking.event('Click', 'Mark Notification As Read', 'Details Page');
               }}
               onKeyPress={() => {
                 markNotificationAsRead(item, auth.tokenV3);
+                tracking.event('Press Key', 'Mark Notification As Read', 'Details Page');
               }}
               tabIndex="0"
             />
@@ -110,6 +119,11 @@ export default class NotificationList extends React.Component {
     };
   }
 
+  componentDidMount() {
+    // Report page view
+    tracking.pageView();
+  }
+
   componentWillUnmount() {
     // mark all notifications as seen when go to another page
     const {
@@ -119,6 +133,7 @@ export default class NotificationList extends React.Component {
     const result = _.map(notificationsList, 'id').join('-');
     if (result) {
       markAllNotificationAsSeen(result, auth.tokenV3);
+      tracking.event('Auto Action', 'Mark All Notifications As Seen', 'Details Page');
     }
   }
 
@@ -152,6 +167,7 @@ export default class NotificationList extends React.Component {
     } = this.props;
     const { collapsedChallenges, activeTab } = this.state;
     let challengesList = [];
+
     if (activeTab === 'active') {
       challengesList = _.filter((notifications || []),
         t => eventTypes.PROJECT.ACTIVE.includes(t.eventType));
@@ -190,11 +206,13 @@ export default class NotificationList extends React.Component {
                             onClick={() => {
                               if (challegeId) {
                                 dismissChallengeNotifications(challegeId, auth.tokenV3);
+                                tracking.event('Click', 'Dismiss Challenge', 'Details Page');
                               }
                             }}
                             onKeyPress={() => {
                               if (challegeId) {
                                 dismissChallengeNotifications(challegeId, auth.tokenV3);
+                                tracking.event('Click', 'Dismiss Challenge', 'Details Page');
                               }
                             }}
                           >&times;