Merge pull request #340 from openedx/sundas/INF-820

feat: added notification UI

example/index.js

@@ -4,7 +4,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { initialize, getConfig, subscribe, APP_READY } from '@edx/frontend-platform';
 import { AppContext, AppProvider } from '@edx/frontend-platform/react';
-import Header from '@edx/frontend-component-header';
+// import Header from '@edx/frontend-component-header';
+import { LearningHeader as Header } from '@edx/frontend-component-header';
 
 import './index.scss';
 

package-lock.json

@@ -15,9 +15,15 @@
         "@fortawesome/free-regular-svg-icons": "6.3.0",
         "@fortawesome/free-solid-svg-icons": "6.3.0",
         "@fortawesome/react-fontawesome": "^0.2.0",
+        "@reduxjs/toolkit": "1.9.5",
         "babel-polyfill": "6.26.0",
+        "classnames": "2.3.2",
+        "lodash": "4.17.21",
+        "react-redux": "7.2.9",
         "react-responsive": "8.2.0",
-        "react-transition-group": "4.4.5"
+        "react-router-dom": "5.3.4",
+        "react-transition-group": "4.4.5",
+        "timeago.js": "4.0.2"
       },
       "devDependencies": {
         "@edx/brand": "npm:@edx/brand-openedx@1.2.0",
@@ -37,7 +43,6 @@
         "react": "16.14.0",
         "react-dom": "16.14.0",
         "react-redux": "7.2.9",
-        "react-router-dom": "5.3.4",
         "react-test-renderer": "16.14.0",
         "redux": "4.2.1",
         "redux-saga": "1.2.3"
@@ -5807,6 +5812,29 @@
       "integrity": "sha512-1dgmkh+3so0+LlBWRhGA33ua4MYr7tUOj+a9Si28vUi0IUFNbff1T3sgpeDJI/LaC75bBYnQ0A3wXjn0OrRNBA==",
       "dev": true
     },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.9.5.tgz",
+      "integrity": "sha512-Rt97jHmfTeaxL4swLRNPD/zV4OxTes4la07Xc4hetpUW/vc75t5m1ANyxG6ymnEQ2FsLQsoMlYB2vV1sO3m8tQ==",
+      "dependencies": {
+        "immer": "^9.0.21",
+        "redux": "^4.2.1",
+        "redux-thunk": "^2.4.2",
+        "reselect": "^4.1.8"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18",
+        "react-redux": "^7.2.1 || ^8.0.2"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@restart/context": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
@@ -6785,7 +6813,7 @@
       "version": "7.1.25",
       "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz",
       "integrity": "sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@types/hoist-non-react-statics": "^3.3.0",
         "@types/react": "*",
@@ -12841,7 +12869,6 @@
       "version": "4.10.1",
       "resolved": "https://registry.npmjs.org/history/-/history-4.10.1.tgz",
       "integrity": "sha512-36nwAD620w12kuzPAsyINPWJqlNbij+hpK1k9XRloDtym8mxzGYl2c17LnV6IAGB2Dmg4tEa7G7DlawS0+qjew==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.1.2",
         "loose-envify": "^1.2.0",
@@ -13296,7 +13323,6 @@
       "version": "9.0.21",
       "resolved": "https://registry.npmjs.org/immer/-/immer-9.0.21.tgz",
       "integrity": "sha512-bc4NBHqOqSfRW7POMkHd51LvClaeMXpm8dx0e8oE2GORbq5aRK7Bxl4FyzVLdGtLmvLKL7BTDBG5ACQm4HWjTA==",
-      "dev": true,
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/immer"
@@ -18918,8 +18944,7 @@
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-      "dev": true
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
     },
     "node_modules/lodash.camelcase": {
       "version": "4.3.0",
@@ -20206,7 +20231,6 @@
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-1.8.0.tgz",
       "integrity": "sha512-n43JRhlUKUAlibEJhPeir1ncUID16QnEjNpwzNdO3Lm4ywrBpBZ5oLD0I6br9evr1Y9JTqwRtAh7JLoOzAQdVA==",
-      "dev": true,
       "dependencies": {
         "isarray": "0.0.1"
       }
@@ -20214,8 +20238,7 @@
     "node_modules/path-to-regexp/node_modules/isarray": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
-      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==",
-      "dev": true
+      "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ=="
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -21825,7 +21848,7 @@
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
-      "dev": true
+      "devOptional": true
     },
     "node_modules/react-lifecycles-compat": {
       "version": "3.0.4",
@@ -21882,7 +21905,7 @@
       "version": "7.2.9",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.9.tgz",
       "integrity": "sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ==",
-      "dev": true,
+      "devOptional": true,
       "dependencies": {
         "@babel/runtime": "^7.15.4",
         "@types/react-redux": "^7.1.20",
@@ -21978,7 +22001,6 @@
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router/-/react-router-5.3.4.tgz",
       "integrity": "sha512-Ys9K+ppnJah3QuaRiLxk+jDWOR1MekYQrlytiXxC1RyfbdsZkS5pvKAzCCr031xHixZwpnsYNT5xysdFHQaYsA==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
@@ -21998,7 +22020,6 @@
       "version": "5.3.4",
       "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-5.3.4.tgz",
       "integrity": "sha512-m4EqFMHv/Ih4kpcBCONHbkT68KoAeHN4p3lAGoNryfHi0dMy0kCzEZakiKRsvg5wHZ/JLrLW8o8KomWiz/qbYQ==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.12.13",
         "history": "^4.9.0",
@@ -22015,8 +22036,7 @@
     "node_modules/react-router/node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "dev": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-style-singleton": {
       "version": "2.2.1",
@@ -22270,7 +22290,6 @@
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
       "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
-      "dev": true,
       "dependencies": {
         "@babel/runtime": "^7.9.2"
       }
@@ -22284,6 +22303,14 @@
         "@redux-saga/core": "^1.2.3"
       }
     },
+    "node_modules/redux-thunk": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.2.tgz",
+      "integrity": "sha512-+P3TjtnP0k/FEjcBL5FZpoovtvrTNT/UXd4/sluaSyrURlSlhLSzEdfsTBW7WsKB6yPvgd7q/iZPICFjW4o57Q==",
+      "peerDependencies": {
+        "redux": "^4"
+      }
+    },
     "node_modules/reflect.ownkeys": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/reflect.ownkeys/-/reflect.ownkeys-0.2.0.tgz",
@@ -22472,6 +22499,11 @@
       "integrity": "sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==",
       "dev": true
     },
+    "node_modules/reselect": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz",
+      "integrity": "sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ=="
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -22513,8 +22545,7 @@
     "node_modules/resolve-pathname": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-3.0.0.tgz",
-      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng==",
-      "dev": true
+      "integrity": "sha512-C7rARubxI8bXFNB/hqcp/4iUeIXJhJZvFPFPiSPRnhU5UPxzMFIl+2E6yY6c4k9giDJAhtV+enfA+G89N6Csng=="
     },
     "node_modules/resolve-url": {
       "version": "0.2.1",
@@ -24714,17 +24745,20 @@
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==",
       "dev": true
     },
+    "node_modules/timeago.js": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/timeago.js/-/timeago.js-4.0.2.tgz",
+      "integrity": "sha512-a7wPxPdVlQL7lqvitHGGRsofhdwtkoSXPGATFuSOA2i1ZNQEPLrGnj68vOp2sOJTCFAQVXPeNMX/GctBaO9L2w=="
+    },
     "node_modules/tiny-invariant": {
       "version": "1.3.1",
       "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.1.tgz",
-      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==",
-      "dev": true
+      "integrity": "sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw=="
     },
     "node_modules/tiny-warning": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
-      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==",
-      "dev": true
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
     },
     "node_modules/tmpl": {
       "version": "1.0.5",
@@ -25366,8 +25400,7 @@
     "node_modules/value-equal": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/value-equal/-/value-equal-1.0.1.tgz",
-      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw==",
-      "dev": true
+      "integrity": "sha512-NOJ6JZCAWr0zlxZt+xqCHNTEKOsrks2HQd4MqhP1qy4z1SkbEP467eNx6TgDKXMvUOb+OENfJCZwM+16n7fRfw=="
     },
     "node_modules/vary": {
       "version": "1.1.2",

package.json

@@ -50,7 +50,6 @@
     "react": "16.14.0",
     "react-dom": "16.14.0",
     "react-redux": "7.2.9",
-    "react-router-dom": "5.3.4",
     "react-test-renderer": "16.14.0",
     "redux": "4.2.1",
     "redux-saga": "1.2.3"
@@ -62,9 +61,15 @@
     "@fortawesome/free-regular-svg-icons": "6.3.0",
     "@fortawesome/free-solid-svg-icons": "6.3.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
+    "@reduxjs/toolkit": "1.9.5",
     "babel-polyfill": "6.26.0",
+    "classnames": "2.3.2",
+    "lodash": "4.17.21",
+    "react-redux": "7.2.9",
     "react-responsive": "8.2.0",
-    "react-transition-group": "4.4.5"
+    "react-transition-group": "4.4.5",
+    "timeago.js": "4.0.2",
+    "react-router-dom": "5.3.4"
   },
   "peerDependencies": {
     "@edx/frontend-platform": "^4.0.0",

src/Header.test.jsx

@@ -2,24 +2,38 @@
 import React from 'react';
 import { IntlProvider } from '@edx/frontend-platform/i18n';
 import TestRenderer from 'react-test-renderer';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 import { Context as ResponsiveContext } from 'react-responsive';
+import { initializeMockApp } from '@edx/frontend-platform';
+import store from './store';
 
 import Header from './index';
 
 const HeaderComponent = ({ width, contextValue }) => (
   <ResponsiveContext.Provider value={width}>
     <IntlProvider locale="en" messages={{}}>
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Header />
-      </AppContext.Provider>
+      <AppProvider store={store}>
+        <AppContext.Provider
+          value={contextValue}
+        >
+          <Header />
+        </AppContext.Provider>
+      </AppProvider>
     </IntlProvider>
   </ResponsiveContext.Provider>
 );
 
 describe('<Header />', () => {
+  beforeEach(async () => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: '123abc',
+        username: 'testuser',
+        administrator: false,
+        roles: [],
+      },
+    });
+  });
   it('renders correctly for anonymous desktop', () => {
     const contextValue = {
       authenticatedUser: null,

src/Notifications/NotificationRowItem.jsx

@@ -0,0 +1,71 @@
+import React, { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import PropTypes from 'prop-types';
+import { Icon } from '@edx/paragon';
+import { Link } from 'react-router-dom';
+import * as timeago from 'timeago.js';
+import { getIconByType } from './utils';
+import { markNotificationsAsRead } from './data/thunks';
+import messages from './messages';
+import timeLocale from '../common/time-locale';
+
+const NotificationRowItem = ({
+  id, type, contentUrl, content, courseName, createdAt, lastRead,
+}) => {
+  timeago.register('time-locale', timeLocale);
+  const intl = useIntl();
+  const dispatch = useDispatch();
+
+  const handleMarkAsRead = useCallback(() => {
+    dispatch(markNotificationsAsRead(id));
+  }, [dispatch, id]);
+
+  const { icon: iconComponent, class: iconClass } = getIconByType(type);
+
+  return (
+    <Link
+      target="_blank"
+      className="d-flex mb-2 align-items-center text-decoration-none"
+      to={contentUrl}
+      onClick={handleMarkAsRead}
+    >
+      <Icon src={iconComponent} className={`${iconClass} mr-4 notification-icon`} />
+      <div className="d-flex w-100">
+        <div className="d-flex align-items-center w-100">
+          <div className="py-10px w-100 px-0 cursor-pointer">
+            <span
+              className="line-height-24 text-gray-700 mb-2 notification-item-content overflow-hidden content"
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: content }}
+            />
+            <div className="py-0 d-flex">
+              <span className="font-size-12 text-gray-500 line-height-20">
+                <span>{courseName}</span>
+                <span className="text-light-700 px-1.5">{intl.formatMessage(messages.fullStop)}</span>
+                <span>{timeago.format(createdAt, 'time-locale')}</span>
+              </span>
+            </div>
+          </div>
+          {!lastRead && (
+            <div className="d-flex py-1.5 px-1.5 ml-2 cursor-pointer">
+              <span className="bg-brand-500 rounded unread" />
+            </div>
+          )}
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+NotificationRowItem.propTypes = {
+  id: PropTypes.string.isRequired,
+  type: PropTypes.string.isRequired,
+  contentUrl: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  courseName: PropTypes.string.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  lastRead: PropTypes.string.isRequired,
+};
+
+export default React.memo(NotificationRowItem);

src/Notifications/NotificationSections.jsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useMemo } from 'react';
+import { Button } from '@edx/paragon';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import isEmpty from 'lodash/isEmpty';
+import messages from './messages';
+import NotificationRowItem from './NotificationRowItem';
+import { markAllNotificationsAsRead } from './data/thunks';
+import { selectNotificationsByIds, selectPaginationData, selectSelectedAppName } from './data/selectors';
+import { splitNotificationsByTime } from './utils';
+import { updatePaginationRequest } from './data/slice';
+
+const NotificationSections = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const selectedAppName = useSelector(selectSelectedAppName());
+  const notifications = useSelector(selectNotificationsByIds(selectedAppName));
+  const { currentPage, numPages } = useSelector(selectPaginationData());
+  const { today = [], earlier = [] } = useMemo(
+    () => splitNotificationsByTime(notifications),
+    [notifications],
+  );
+
+  const handleMarkAllAsRead = useCallback(() => {
+    dispatch(markAllNotificationsAsRead(selectedAppName));
+  }, [dispatch, selectedAppName]);
+
+  const updatePagination = useCallback(() => {
+    dispatch(updatePaginationRequest());
+  }, [dispatch]);
+
+  const renderNotificationSection = (section, items) => {
+    if (isEmpty(items)) { return null; }
+
+    return (
+      <div className="pb-2">
+        <div className="d-flex justify-content-between align-items-center py-10px mb-2">
+          <span className="text-gray-500 line-height-10">
+            {section === 'today' && intl.formatMessage(messages.notificationTodayHeading)}
+            {section === 'earlier' && intl.formatMessage(messages.notificationEarlierHeading)}
+          </span>
+          {notifications?.length > 0 && (section === 'earlier' ? today.length === 0 : true) && (
+            <Button
+              variant="link"
+              className="text-info-500 font-size-14 line-height-10 text-decoration-none p-0 border-0"
+              onClick={handleMarkAllAsRead}
+            >
+              {intl.formatMessage(messages.notificationMarkAsRead)}
+            </Button>
+          )}
+        </div>
+        {items.map((notification) => (
+          <NotificationRowItem
+            key={notification.id}
+            id={notification.id}
+            type={notification.type}
+            contentUrl={notification.contentUrl}
+            content={notification.content}
+            courseName={notification.courseName}
+            createdAt={notification.createdAt}
+            lastRead={notification.lastRead}
+          />
+        ))}
+      </div>
+    );
+  };
+
+  return (
+    <div className="mt-4 px-4">
+      {renderNotificationSection('today', today)}
+      {renderNotificationSection('earlier', earlier)}
+      {currentPage < numPages && (
+        <Button variant="primary" className="w-100 bg-primary-500" onClick={updatePagination}>
+          {intl.formatMessage(messages.loadMoreNotifications)}
+        </Button>
+      )}
+    </div>
+  );
+};
+
+export default React.memo(NotificationSections);

src/Notifications/NotificationTabs.jsx

@@ -0,0 +1,52 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { Tab, Tabs } from '@edx/paragon';
+import NotificationSections from './NotificationSections';
+import { fetchNotificationList, markNotificationsAsSeen } from './data/thunks';
+import {
+  selectNotificationTabs, selectNotificationTabsCount, selectPaginationData, selectSelectedAppName,
+} from './data/selectors';
+import { updateAppNameRequest } from './data/slice';
+
+const NotificationTabs = () => {
+  const dispatch = useDispatch();
+  const selectedAppName = useSelector(selectSelectedAppName());
+  const notificationUnseenCounts = useSelector(selectNotificationTabsCount());
+  const notificationTabs = useSelector(selectNotificationTabs());
+  const { currentPage } = useSelector(selectPaginationData());
+
+  useEffect(() => {
+    dispatch(fetchNotificationList({ appName: selectedAppName, page: currentPage, pageSize: 10 }));
+    if (selectedAppName) { dispatch(markNotificationsAsSeen(selectedAppName)); }
+  }, [currentPage, selectedAppName]);
+
+  const handleActiveTab = useCallback((appName) => {
+    dispatch(updateAppNameRequest({ appName }));
+  }, []);
+
+  const tabArray = useMemo(() => notificationTabs?.map((appName) => (
+    <Tab
+      key={appName}
+      eventKey={appName}
+      title={appName}
+      notification={notificationUnseenCounts[appName]}
+      tabClassName="pt-0 pb-10px px-2.5 d-flex border-top-0 mb-0 align-items-center line-height-24 text-capitalize"
+    >
+      {appName === selectedAppName && (<NotificationSections />)}
+    </Tab>
+  )), [notificationUnseenCounts, selectedAppName, notificationTabs]);
+
+  return (
+    <Tabs
+      variant="tabs"
+      defaultActiveKey={selectedAppName}
+      onSelect={handleActiveTab}
+      className="px-2.5 text-primary-500"
+    >
+      {tabArray}
+    </Tabs>
+  );
+};
+
+export default React.memo(NotificationTabs);

src/Notifications/data/api.js

@@ -0,0 +1,40 @@
+import { camelCaseObject } from '@edx/frontend-platform';
+import notificationsList from './notifications.json';
+
+export async function getNotifications(appName, page, pageSize) {
+  const { data } = notificationsList;
+  const startIndex = (page - 1) * pageSize;
+  const endIndex = startIndex + pageSize;
+
+  const notifications = data.slice(startIndex, endIndex);
+  return { notifications: camelCaseObject(notifications), numPages: 2, currentPage: page };
+}
+
+export async function getNotificationCounts() {
+  const data = {
+    count: 45,
+    count_by_app_name: {
+      reminders: 10,
+      discussions: 20,
+      grades: 10,
+      authoring: 5,
+    },
+    show_notification_tray: false,
+  };
+  return camelCaseObject(data);
+}
+
+export async function markNotificationSeen() {
+  const data = [];
+  return camelCaseObject(data);
+}
+
+export async function markAllNotificationRead() {
+  const { data } = camelCaseObject(notificationsList);
+  return data;
+}
+
+export async function markNotificationRead(notificationId) {
+  const { data } = camelCaseObject(notificationsList);
+  return { data, id: notificationId };
+}

src/Notifications/data/hook.js

@@ -0,0 +1,11 @@
+import { breakpoints, useWindowSize } from '@edx/paragon';
+
+export function useIsOnMediumScreen() {
+  const windowSize = useWindowSize();
+  return breakpoints.large.maxWidth > windowSize.width && windowSize.width >= breakpoints.medium.minWidth;
+}
+
+export function useIsOnLargeScreen() {
+  const windowSize = useWindowSize();
+  return windowSize.width >= breakpoints.extraLarge.minWidth;
+}

src/Notifications/data/index.js

@@ -0,0 +1 @@
+export * from './slice';

src/Notifications/data/notifications.json

@@ -0,0 +1,134 @@
+{
+  "data": [
+    {
+      "id": 1,
+      "type": "post",
+      "content": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:46:11.979531Z"
+    },
+    {
+      "id": 2,
+      "type": "help",
+      "content": "<p><b>MITx_Learner</b> asked <b>What grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 3,
+      "type": "post",
+      "content": "<p><b>SCM_Lead</b> posts <b>Hello and welcome to SC0x!</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:46:11.979531Z"
+    },
+    {
+      "id": 4,
+      "type": "respond",
+      "content": "<p><b>MITx_Learner</b> responded <b>Can't find linear regression in section 3 review</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 5,
+      "type": "comment",
+      "content": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b> response on a post your following <b>Can't find linear regression in section 3 review</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 6,
+      "type": "question",
+      "content": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 7,
+      "type": "answer",
+      "content": "<p><b>MITx_Expert</b> answered <b>Examples of quadratic equations in supply chains</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-05T00:36:11.979531Z"
+    },
+    {
+      "id": 8,
+      "type": "comment",
+      "content": "<p><b>MITx_Learner</b> commented <b>Examples of quadratic equations in supply chains</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 9,
+      "type": "comment",
+      "content": "<p><b>MITx_Learner</b> commented on <b>MITx_Expert's</b>what grade does a student need to get in order to pass the course and earn a certificate?</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 10,
+      "type": "comment",
+      "content": "<p><b>MITx_Learner</b> commented on your response in <b>Convexity of f(x)=1/x , x>1</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 11,
+      "type": "answer",
+      "content": "<p><b>SCM_Lead’s</b> response has been marked as answer in your post <b>Quiz in section 3 - Please explain the F-Significance value</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 12,
+      "type": "endorsed",
+      "content": "<p>Your response has been endorsed in <b>Quiz in section 3 - Please explain the F-Significance value</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    },
+    {
+      "id": 13,
+      "type": "reported",
+      "content": "<p><b>MITx Learner’s</b> post has been reported <b>“Here are the exam answers. Question 1 - CSA stands for Compliance Safety Ac...”</b></p>",
+      "course_name": "Supply Chain Analytics",
+      "content_url": "",
+      "last_read": null,
+      "last_seen": null,
+      "created_at": "2023-06-01T00:36:11.979531Z"
+    }
+  ]
+}

src/Notifications/data/selectors.js

@@ -0,0 +1,23 @@
+import { createSelector } from '@reduxjs/toolkit';
+
+export const selectNotificationStatus = () => state => state.notifications.notificationStatus;
+
+export const selectNotificationTabsCount = () => state => state.notifications.tabsCount;
+
+export const selectNotificationTabs = () => state => state.notifications.appsId;
+
+export const selectSelectedAppNotificationIds = (appName) => state => state.notifications.apps[appName] ?? [];
+
+export const selectShowNotificationTray = () => state => state.notifications.showNotificationTray;
+
+export const selectNotifications = () => state => state.notifications.notifications;
+
+export const selectNotificationsByIds = (appName) => createSelector(
+  selectNotifications(),
+  selectSelectedAppNotificationIds(appName),
+  (notifications, notificationIds) => notificationIds.map((notificationId) => notifications[notificationId]) || [],
+);
+
+export const selectSelectedAppName = () => state => state.notifications.appName;
+
+export const selectPaginationData = () => state => state.notifications.pagination;

src/Notifications/data/slice.js

@@ -0,0 +1,154 @@
+/* eslint-disable no-param-reassign */
+import { createSlice } from '@reduxjs/toolkit';
+
+export const RequestStatus = {
+  IDLE: 'idle',
+  LOADING: 'in-progress',
+  LOADED: 'successful',
+  FAILED: 'failed',
+  DENIED: 'denied',
+};
+
+const initialState = {
+  notificationStatus: 'idle',
+  appName: 'discussions',
+  appsId: [],
+  apps: {},
+  notifications: {},
+  tabsCount: {},
+  showNotificationTray: false,
+  pagination: {
+    count: 10,
+    numPages: 1,
+    currentPage: 1,
+    nextPage: null,
+  },
+};
+const slice = createSlice({
+  name: 'notifications',
+  initialState,
+  reducers: {
+    fetchNotificationDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    fetchNotificationFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    fetchNotificationRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    fetchNotificationSuccess: (state, { payload }) => {
+      const {
+        newNotificationIds, notificationsKeyValuePair, numPages, currentPage,
+      } = payload;
+      const existingNotificationIds = state.apps[state.appName];
+
+      state.apps[state.appName] = Array.from(new Set([...existingNotificationIds, ...newNotificationIds]));
+      state.notifications = { ...state.notifications, ...notificationsKeyValuePair };
+      state.tabsCount.count -= state.tabsCount[state.appName];
+      state.tabsCount[state.appName] = 0;
+      state.notificationStatus = RequestStatus.LOADED;
+      state.pagination.numPages = numPages;
+      state.pagination.currentPage = currentPage;
+    },
+    fetchNotificationsCountDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    fetchNotificationsCountFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    fetchNotificationsCountRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    fetchNotificationsCountSuccess: (state, { payload }) => {
+      const {
+        countByAppName, appIds, apps, count, showNotificationTray,
+      } = payload;
+      state.tabsCount = { count, ...countByAppName };
+      state.appsId = appIds;
+      state.apps = apps;
+      state.showNotificationTray = showNotificationTray;
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markNotificationsAsSeenRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    markNotificationsAsSeenSuccess: (state) => {
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markNotificationsAsSeenDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markNotificationsAsSeenFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    markAllNotificationsAsReadRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    markAllNotificationsAsReadSuccess: (state) => {
+      const updatedNotifications = Object.fromEntries(
+        Object.entries(state.notifications).map(([key, notification]) => [
+          key, { ...notification, lastRead: new Date().toISOString() },
+        ]),
+      );
+      state.notifications = updatedNotifications;
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markAllNotificationsAsReadDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markAllNotificationsAsReadFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    markNotificationsAsReadRequest: (state) => {
+      state.notificationStatus = RequestStatus.LOADING;
+    },
+    markNotificationsAsReadSuccess: (state, { payload }) => {
+      const date = new Date().toISOString();
+      state.notifications[payload.id] = { ...state.notifications[payload.id], lastRead: date };
+      state.notificationStatus = RequestStatus.LOADED;
+    },
+    markNotificationsAsReadDenied: (state) => {
+      state.notificationStatus = RequestStatus.DENIED;
+    },
+    markNotificationsAsReadFailure: (state) => {
+      state.notificationStatus = RequestStatus.FAILED;
+    },
+    resetNotificationStateRequest: () => initialState,
+    updateAppNameRequest: (state, { payload }) => {
+      state.appName = payload.appName;
+      state.pagination.currentPage = 1;
+    },
+    updatePaginationRequest: (state) => {
+      state.pagination.currentPage += 1;
+    },
+  },
+});
+
+export const {
+  fetchNotificationDenied,
+  fetchNotificationFailure,
+  fetchNotificationRequest,
+  fetchNotificationSuccess,
+  fetchNotificationsCountDenied,
+  fetchNotificationsCountFailure,
+  fetchNotificationsCountRequest,
+  fetchNotificationsCountSuccess,
+  markNotificationsAsSeenRequest,
+  markNotificationsAsSeenSuccess,
+  markNotificationsAsSeenFailure,
+  markNotificationsAsSeenDenied,
+  markAllNotificationsAsReadDenied,
+  markAllNotificationsAsReadRequest,
+  markAllNotificationsAsReadSuccess,
+  markAllNotificationsAsReadFailure,
+  markNotificationsAsReadDenied,
+  markNotificationsAsReadRequest,
+  markNotificationsAsReadSuccess,
+  markNotificationsAsReadFailure,
+  resetNotificationStateRequest,
+  updateAppNameRequest,
+  updatePaginationRequest,
+} = slice.actions;
+
+export const notificationsReducer = slice.reducer;

src/Notifications/data/thunks.js

@@ -0,0 +1,134 @@
+import {
+  fetchNotificationSuccess,
+  fetchNotificationRequest,
+  fetchNotificationFailure,
+  fetchNotificationDenied,
+  fetchNotificationsCountFailure,
+  fetchNotificationsCountRequest,
+  fetchNotificationsCountSuccess,
+  fetchNotificationsCountDenied,
+  markNotificationsAsSeenRequest,
+  markNotificationsAsSeenSuccess,
+  markNotificationsAsSeenFailure,
+  markNotificationsAsSeenDenied,
+  markNotificationsAsReadDenied,
+  resetNotificationStateRequest,
+  markAllNotificationsAsReadRequest,
+  markAllNotificationsAsReadSuccess,
+  markAllNotificationsAsReadFailure,
+  markAllNotificationsAsReadDenied,
+  markNotificationsAsReadRequest,
+  markNotificationsAsReadSuccess,
+  markNotificationsAsReadFailure,
+} from './slice';
+import {
+  getNotifications, getNotificationCounts, markNotificationSeen, markAllNotificationRead, markNotificationRead,
+} from './api';
+import { getHttpErrorStatus } from '../utils';
+
+const normalizeNotificationCounts = ({ countByAppName, count, showNotificationTray }) => {
+  const appIds = Object.keys(countByAppName);
+  const apps = appIds.reduce((acc, appId) => { acc[appId] = []; return acc; }, {});
+  return {
+    countByAppName, appIds, apps, count, showNotificationTray,
+  };
+};
+
+const normalizeNotifications = ({ notifications }) => {
+  const newNotificationIds = notifications.map(notification => notification.id.toString());
+  const notificationsKeyValuePair = notifications.reduce((acc, obj) => { acc[obj.id] = obj; return acc; }, {});
+  return {
+    newNotificationIds, notificationsKeyValuePair,
+  };
+};
+
+export const fetchNotificationList = ({ appName, page, pageSize }) => (
+  async (dispatch) => {
+    try {
+      dispatch(fetchNotificationRequest({ appName }));
+      const data = await getNotifications(appName, page, pageSize);
+      const normalisedData = normalizeNotifications((data));
+      dispatch(fetchNotificationSuccess({ ...normalisedData, numPages: data.numPages, currentPage: data.currentPage }));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(fetchNotificationDenied(appName));
+      } else {
+        dispatch(fetchNotificationFailure(appName));
+      }
+    }
+  }
+);
+
+export const fetchAppsNotificationCount = () => (
+  async (dispatch) => {
+    try {
+      dispatch(fetchNotificationsCountRequest());
+      const data = await getNotificationCounts();
+      const normalisedData = normalizeNotificationCounts((data));
+      dispatch(fetchNotificationsCountSuccess({
+        ...normalisedData,
+        countByAppName: data.countByAppName,
+        count: data.count,
+        showNotificationTray: data.showNotificationTray,
+      }));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(fetchNotificationsCountDenied());
+      } else {
+        dispatch(fetchNotificationsCountFailure());
+      }
+    }
+  }
+);
+
+export const markAllNotificationsAsRead = (appName) => (
+  async (dispatch) => {
+    try {
+      dispatch(markAllNotificationsAsReadRequest({ appName }));
+      const data = await markAllNotificationRead(appName);
+      dispatch(markAllNotificationsAsReadSuccess(data));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(markAllNotificationsAsReadDenied());
+      } else {
+        dispatch(markAllNotificationsAsReadFailure());
+      }
+    }
+  }
+);
+
+export const markNotificationsAsRead = (notificationId) => (
+  async (dispatch) => {
+    try {
+      dispatch(markNotificationsAsReadRequest({ notificationId }));
+      const data = await markNotificationRead(notificationId);
+      dispatch(markNotificationsAsReadSuccess(data));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(markNotificationsAsReadDenied());
+      } else {
+        dispatch(markNotificationsAsReadFailure());
+      }
+    }
+  }
+);
+
+export const markNotificationsAsSeen = (appName) => (
+  async (dispatch) => {
+    try {
+      dispatch(markNotificationsAsSeenRequest({ appName }));
+      const data = await markNotificationSeen(appName);
+      dispatch(markNotificationsAsSeenSuccess(data));
+    } catch (error) {
+      if (getHttpErrorStatus(error) === 403) {
+        dispatch(markNotificationsAsSeenDenied());
+      } else {
+        dispatch(markNotificationsAsSeenFailure());
+      }
+    }
+  }
+);
+
+export const resetNotificationState = () => (
+  async (dispatch) => { dispatch(resetNotificationStateRequest()); }
+);

src/Notifications/index.jsx

@@ -0,0 +1,101 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, {
+  useCallback, useEffect, useRef, useState,
+} from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import classNames from 'classnames';
+import {
+  Badge, Icon, IconButton, OverlayTrigger, Popover,
+} from '@edx/paragon';
+import { NotificationsNone, Settings } from '@edx/paragon/icons';
+import { selectNotificationTabsCount } from './data/selectors';
+import { resetNotificationState } from './data/thunks';
+import { useIsOnLargeScreen, useIsOnMediumScreen } from './data/hook';
+import NotificationTabs from './NotificationTabs';
+import messages from './messages';
+
+const Notifications = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const popoverRef = useRef(null);
+  const buttonRef = useRef(null);
+  const [enableNotificationTray, setEnableNotificationTray] = useState(false);
+  const notificationCounts = useSelector(selectNotificationTabsCount());
+  const isOnMediumScreen = useIsOnMediumScreen();
+  const isOnLargeScreen = useIsOnLargeScreen();
+
+  const hideNotificationTray = useCallback(() => {
+    setEnableNotificationTray(prevState => !prevState);
+  }, []);
+
+  const handleClickOutsideNotificationTray = useCallback((event) => {
+    if (!popoverRef.current?.contains(event.target) && !buttonRef.current?.contains(event.target)) {
+      setEnableNotificationTray(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    document.addEventListener('mousedown', handleClickOutsideNotificationTray);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutsideNotificationTray);
+      dispatch(resetNotificationState());
+    };
+  }, []);
+
+  return (
+    <OverlayTrigger
+      trigger="click"
+      key="bottom"
+      placement="bottom"
+      id="notificationTray"
+      show={enableNotificationTray}
+      overlay={(
+        <Popover
+          id="notificationTray"
+          data-testid="notificationTray"
+          className={classNames('overflow-auto rounded-0 border-0', {
+            'w-100': !isOnMediumScreen && !isOnLargeScreen,
+            'medium-screen': isOnMediumScreen,
+            'large-screen': isOnLargeScreen,
+          })}
+        >
+          <div ref={popoverRef}>
+            <Popover.Title as="h2" className="d-flex justify-content-between p-0 m-4 border-0 text-primary-500 font-size-18 line-height-24">
+              {intl.formatMessage(messages.notificationTitle)}
+              <Icon src={Settings} className="icon-size-20" />
+            </Popover.Title>
+            <Popover.Content className="notification-content p-0">
+              <NotificationTabs />
+            </Popover.Content>
+          </div>
+        </Popover>
+      )}
+    >
+      <div ref={buttonRef}>
+        <IconButton
+          isActive={enableNotificationTray}
+          alt="notification bell icon"
+          onClick={hideNotificationTray}
+          src={NotificationsNone}
+          iconAs={Icon}
+          variant="light"
+          iconClassNames="text-primary-500"
+          className="ml-4 mr-1 my-3 notification-button"
+        />
+        {notificationCounts?.count > 0 && (
+          <Badge
+            pill
+            variant="danger"
+            className="font-weight-normal px-1 notification-badge"
+          >
+            {notificationCounts.count}
+          </Badge>
+        )}
+      </div>
+    </OverlayTrigger>
+  );
+};
+
+export default Notifications;

src/Notifications/messages.js

@@ -0,0 +1,36 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  notificationTitle: {
+    id: 'notification.title',
+    defaultMessage: 'Notifications',
+    description: 'Notifications',
+  },
+  notificationTodayHeading: {
+    id: 'notification.today.heading',
+    defaultMessage: 'Last 24 hours',
+    description: 'Today Notifications',
+  },
+  notificationEarlierHeading: {
+    id: 'notification.earlier.heading',
+    defaultMessage: 'Earlier',
+    description: 'Earlier Notifications',
+  },
+  notificationMarkAsRead: {
+    id: 'notification.mark.as.read',
+    defaultMessage: 'Mark all as read',
+    description: 'Mark all Notifications as read',
+  },
+  fullStop: {
+    id: 'notification.fullStop',
+    defaultMessage: '•',
+    description: 'Fullstop shown to users to indicate who edited a post.',
+  },
+  loadMoreNotifications: {
+    id: 'notification.load.more.notifications',
+    defaultMessage: 'Load more notifications',
+    description: 'Load more button to load more notifications',
+  },
+});
+
+export default messages;

src/Notifications/utils.js

@@ -0,0 +1,52 @@
+import {
+  CheckCircle, HelpOutline, QuestionAnswerOutline, Verified, Report, EditOutline, ThumbUpOutline, PostOutline,
+} from '@edx/paragon/icons';
+
+/**
+ * Get HTTP Error status from generic error.
+ * @param error Generic caught error.
+ * @returns {number|null}
+ */
+export const getHttpErrorStatus = error => error?.customAttributes?.httpErrorStatus ?? error?.response?.status;
+
+export const splitNotificationsByTime = (notificationList) => {
+  let splittedData = [];
+  if (notificationList.length > 0) {
+    const currentTime = Date.now();
+    const twentyFourHoursAgo = currentTime - (24 * 60 * 60 * 1000);
+
+    splittedData = notificationList.reduce(
+      (result, notification) => {
+        if (notification) {
+          const objectTime = new Date(notification.createdAt).getTime();
+          if (objectTime >= twentyFourHoursAgo && objectTime <= currentTime) {
+            result.today.push(notification);
+          } else {
+            result.earlier.push(notification);
+          }
+        }
+        return result;
+      },
+      { today: [], earlier: [] },
+    );
+  }
+  const { today, earlier } = splittedData;
+  return { today, earlier };
+};
+
+export const getIconByType = (type) => {
+  const iconMap = {
+    post: { icon: PostOutline, class: 'text-primary-500' },
+    help: { icon: HelpOutline, class: 'text-primary-500' },
+    respond: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
+    comment: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
+    question: { icon: QuestionAnswerOutline, class: 'text-primary-500' },
+    answer: { icon: CheckCircle, class: 'text-success' },
+    endorsed: { icon: Verified, class: 'text-primary-500' },
+    reported: { icon: Report, class: 'text-danger-500' },
+    postLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
+    commentLiked: { icon: ThumbUpOutline, class: 'text-primary-500' },
+    edited: { icon: EditOutline, class: 'text-primary-500' },
+  };
+  return iconMap[type] || { icon: PostOutline, class: 'text-primary-500' };
+};

src/common/time-locale.js

@@ -0,0 +1,18 @@
+export default function timeLocale(number, index) {
+  return [
+    ['just now', 'right now'],
+    ['%ss', 'in %s seconds'],
+    ['1m', 'in 1 minute'],
+    ['%sm', 'in %s minutes'],
+    ['1h', 'in 1 hour'],
+    ['%sh', 'in %s hours'],
+    ['1d', 'in 1 day'],
+    ['%sd', 'in %s days'],
+    ['1w', 'in 1 week'],
+    ['%sw', 'in %s weeks'],
+    ['4w', 'in 1 month'],
+    [`${number * 4}w`, 'in %s months'],
+    ['1y', 'in 1 year'],
+    ['%sy', 'in %s years'],
+  ][index];
+}

src/index.scss

@@ -1,7 +1,10 @@
 $spacer: 1rem;
 $blue: #007db8;
 $white: #fff;
-
+@import "@edx/brand/paragon/fonts.scss";
+@import "@edx/brand/paragon/variables.scss";
+@import "@edx/paragon/scss/core/core.scss";
+@import "@edx/brand/paragon/overrides.scss";
 @import './Menu/menu.scss';
 
 .dropdown-item a {
@@ -27,7 +30,7 @@ $white: #fff;
 
 .learning-header {
   min-width: 0;
-  
+
   .course-title-lockup {
     min-width: 0;
 
@@ -118,3 +121,135 @@ $white: #fff;
     border-radius: $rounded-pill;
   }
 }
+
+.content {
+  b {
+    color: #00262B !important;
+    font-weight: 500 !important;
+  }
+}
+
+.font-size-18 {
+  font-size: 18px !important;
+}
+
+.font-size-12 {
+  font-size: 12px;
+}
+
+.font-size-14 {
+  font-size: 14px;
+}
+
+.py-10px {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+
+.pb-10px {
+  padding-bottom: 10px;
+}
+
+.line-height-24 {
+  line-height: 24px;
+}
+
+.line-height-20 {
+  line-height: 20px;
+}
+
+.line-height-10 {
+  line-height: 10px !important;
+}
+
+.icon-size-20 {
+  width: 20px !important;
+  height: 20px !important;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.notification-button {
+  width: 36px;
+  height: 36px;
+}
+
+.notification-icon{
+  height: 23.33px !important;
+  width: 23.33px !important;
+}
+
+.notification-badge {
+  position: absolute;
+  margin-top: 18px;
+  margin-left: -21px;
+  border: 2px solid #FFFFFF;
+  font-size: 9px !important;
+}
+
+.popover {
+  max-height: calc(100% - 68px);
+  min-height: 1220px;
+  filter: none;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15), 0px 2px 8px rgba(0, 0, 0, 0.15);
+
+  &.medium-screen {
+    min-width: 24.313rem;
+  }
+
+  &.large-screen {
+    min-width: 34.313rem;
+  }
+
+  .dropdown-toggle::after {
+    display: none;
+  }
+
+  .expandable {
+    position: relative !important;
+    margin-left: 4px;
+    padding: 2px 5px;
+    border-radius: 10rem;
+    font-size: 9px;
+  }
+
+  .dropdown-toggle {
+    font-size: 14px;
+    padding-top: 0px !important;
+    padding-bottom: 12px !important;
+
+    div {
+      min-height: 6px !important;
+      min-width: 6px !important;
+    }
+  }
+
+  .dropdown-item {
+    font-size: 14px;
+    font-weight: 500;
+  }
+
+  .notification-content {
+    .notification-item-content {
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      text-overflow: ellipsis;
+
+      p {
+        margin-bottom: 0px;
+      }
+
+      b {
+        color: #00262B;
+      }
+    }
+
+    .unread {
+      height: 10px;
+      width: 10px;
+    }
+  }
+}

src/learning-header/AuthenticatedUserDropdown.jsx

@@ -1,16 +1,31 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUserCircle } from '@fortawesome/free-solid-svg-icons';
-
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@edx/paragon';
+import { useSelector, useDispatch } from 'react-redux';
+import Notifications from '../Notifications';
+import { selectShowNotificationTray, selectNotificationStatus } from '../Notifications/data/selectors';
+import { fetchAppsNotificationCount } from '../Notifications/data/thunks';
+import { RequestStatus } from '../Notifications/data/slice';
 
 import messages from './messages';
 
 const AuthenticatedUserDropdown = ({ intl, username }) => {
+  const showNotificationTray = useSelector(selectShowNotificationTray());
+  const notificationStatus = useSelector(selectNotificationStatus());
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    if (notificationStatus === RequestStatus.IDLE) {
+      dispatch(fetchAppsNotificationCount());
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notificationStatus]);
+
   const dashboardMenuItem = (
     <Dropdown.Item href={`${getConfig().LMS_BASE_URL}/dashboard`}>
       {intl.formatMessage(messages.dashboard)}
@@ -19,8 +34,9 @@ const AuthenticatedUserDropdown = ({ intl, username }) => {
 
   return (
     <>
-      <a className="text-gray-700 mr-3" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
-      <Dropdown className="user-dropdown">
+      <a className="text-gray-700" href={`${getConfig().SUPPORT_URL}`}>{intl.formatMessage(messages.help)}</a>
+      {showNotificationTray && <Notifications />}
+      <Dropdown className="user-dropdown ml-3">
         <Dropdown.Toggle variant="outline-primary">
           <FontAwesomeIcon icon={faUserCircle} className="d-md-none" size="lg" />
           <span data-hj-suppress className="d-none d-md-inline">

src/learning-header/LearningHeader.jsx

@@ -2,11 +2,12 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
+import { AppContext, AppProvider } from '@edx/frontend-platform/react';
 
 import AnonymousUserMenu from './AnonymousUserMenu';
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 import messages from './messages';
+import store from '../store';
 
 const LinkedLogo = ({
   href,
@@ -40,24 +41,26 @@ const LearningHeader = ({
   );
 
   return (
-    <header className="learning-header">
-      <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
-      <div className="container-xl py-2 d-flex align-items-center">
-        {headerLogo}
-        <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
-          <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
-          <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+    <AppProvider store={store}>
+      <header className="learning-header">
+        <a className="sr-only sr-only-focusable" href="#main-content">{intl.formatMessage(messages.skipNavLink)}</a>
+        <div className="container-xl py-2 d-flex align-items-center">
+          {headerLogo}
+          <div className="flex-grow-1 course-title-lockup" style={{ lineHeight: 1 }}>
+            <span className="d-block small m-0">{courseOrg} {courseNumber}</span>
+            <span className="d-block m-0 font-weight-bold course-title">{courseTitle}</span>
+          </div>
+          {showUserDropdown && authenticatedUser && (
+            <AuthenticatedUserDropdown
+              username={authenticatedUser.username}
+            />
+          )}
+          {showUserDropdown && !authenticatedUser && (
+            <AnonymousUserMenu />
+          )}
         </div>
-        {showUserDropdown && authenticatedUser && (
-          <AuthenticatedUserDropdown
-            username={authenticatedUser.username}
-          />
-        )}
-        {showUserDropdown && !authenticatedUser && (
-          <AnonymousUserMenu />
-        )}
-      </div>
-    </header>
+      </header>
+    </AppProvider>
   );
 };
 

src/learning-header/LearningHeader.test.jsx

@@ -12,7 +12,7 @@ describe('Header', () => {
 
   it('displays user button', () => {
     render(<Header />);
-    expect(screen.getByRole('button')).toHaveTextContent(authenticatedUser.username);
+    expect(screen.getByText(authenticatedUser.username)).toBeInTheDocument();
   });
 
   it('displays course data', () => {

src/store.js

@@ -0,0 +1,16 @@
+import { configureStore } from '@reduxjs/toolkit';
+
+import { notificationsReducer } from './Notifications/data';
+
+export function initializeStore(preloadedState = undefined) {
+  return configureStore({
+    reducer: {
+      notifications: notificationsReducer,
+    },
+    preloadedState,
+  });
+}
+
+const store = initializeStore();
+
+export default store;