feat: added notification preferences settings at account level

src/account-settings/AccountSettingsPage.jsx

@@ -50,6 +50,7 @@ import {
 } from './data/constants';
 import { fetchSiteLanguages } from './site-language';
 import { fetchCourseList } from '../notification-preferences/data/thunks';
+import NotificationSettings from '../notification-preferences/NotificationSettings';
 import { withLocation, withNavigate } from './hoc';
 
 class AccountSettingsPage extends React.Component {
@@ -727,7 +728,7 @@ class AccountSettingsPage extends React.Component {
             {...editableFieldProps}
           />
         </div>
-        <div className="account-section pt-3 mb-5" id="social-media">
+        <div className="account-section pt-3" id="social-media">
           <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.social.media'])}
           </h2>
@@ -763,8 +764,10 @@ class AccountSettingsPage extends React.Component {
             {...editableFieldProps}
           />
         </div>
-
-        <div className="account-section pt-3 mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
+        <div className="border border-light-700 my-6" />
+        <NotificationSettings />
+        <div className="border border-light-700 my-6" />
+        <div className="account-section mb-5" id="site-preferences" ref={this.navLinkRefs['#site-preferences']}>
           <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.site.preferences'])}
           </h2>

src/account-settings/JumpNav.jsx

@@ -1,21 +1,16 @@
 import { getConfig } from '@edx/frontend-platform';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { breakpoints, useWindowSize, Icon } from '@openedx/paragon';
-import { OpenInNew } from '@openedx/paragon/icons';
+import { breakpoints, useWindowSize } from '@openedx/paragon';
 import classNames from 'classnames';
 import React from 'react';
-import { useSelector } from 'react-redux';
 import { NavHashLink } from 'react-router-hash-link';
 import Scrollspy from 'react-scrollspy';
-import { Link } from 'react-router-dom';
 import messages from './AccountSettingsPage.messages';
-import { selectShowPreferences } from '../notification-preferences/data/selectors';
 
 const JumpNav = ({
   intl,
 }) => {
   const stickToTop = useWindowSize().width > breakpoints.small.minWidth;
-  const showPreferences = useSelector(selectShowPreferences());
 
   return (
     <div className={classNames('jump-nav px-2.25', { 'jump-nav-sm position-sticky pt-3': stickToTop })}>
@@ -65,21 +60,6 @@ const JumpNav = ({
           </li>
           )}
       </Scrollspy>
-      {showPreferences && (
-        <>
-          <hr />
-          <Scrollspy
-            className="list-unstyled"
-          >
-            <li>
-              <Link to="/notifications" target="_blank" rel="noopener noreferrer">
-                <span>{intl.formatMessage(messages['notification.preferences.notifications.label'])}</span>
-                <Icon className="d-inline-block align-bottom ml-1" src={OpenInNew} />
-              </Link>
-            </li>
-          </Scrollspy>
-        </>
-      )}
     </div>
   );
 };

src/account-settings/test/AccountSettingsPage.test.jsx

@@ -71,6 +71,16 @@ describe('AccountSettingsPage', () => {
 
   afterEach(() => jest.clearAllMocks());
 
+  beforeAll(() => {
+    global.lightningjs = {
+      require: jest.fn().mockImplementation((module, url) => ({ moduleName: module, url })),
+    };
+  });
+
+  afterAll(() => {
+    delete global.lightningjs;
+  });
+
   it('renders AccountSettingsPage correctly with editing enabled', async () => {
     const { getByText, rerender, getByLabelText } = render(reduxWrapper(<IntlAccountSettingsPage {...props} />));
 

src/account-settings/test/mockData.js

@@ -84,7 +84,7 @@ const mockData = {
     profileDataManager: null,
   },
   notificationPreferences: {
-    showPreferences: false,
+    showPreferences: true,
     courses: {
       status: 'success',
       courses: [],
@@ -98,7 +98,7 @@ const mockData = {
     preferences: {
       status: 'idle',
       updatePreferenceStatus: 'idle',
-      selectedCourse: null,
+      selectedCourse: 'account',
       preferences: [],
       apps: [],
       nonEditable: {},

src/divider/Divider.jsx

@@ -0,0 +1,16 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+const Divider = ({ className, ...props }) => (
+  <div className={classNames('divider', className)} {...props} />
+);
+
+Divider.propTypes = {
+  className: PropTypes.string,
+};
+
+Divider.defaultProps = {
+  className: undefined,
+};
+
+export default Divider;

src/divider/index.jsx

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Divider } from './Divider';

src/index.jsx

@@ -20,8 +20,6 @@ import messages from './i18n';
 
 import './index.scss';
 import Head from './head/Head';
-import NotificationCourses from './notification-preferences/NotificationCourses';
-import NotificationPreferences from './notification-preferences/NotificationPreferences';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
@@ -38,8 +36,6 @@ subscribe(APP_READY, () => {
           </div>
         )}
         >
-          <Route path="/notifications/:courseId" element={<NotificationPreferences />} />
-          <Route path="/notifications" element={<NotificationCourses />} />
           <Route
             path="/id-verification/*"
             element={<IdVerificationPageSlot />}

src/index.scss

@@ -118,7 +118,7 @@ $fa-font-path: "~font-awesome/fonts";
   }
 
   .dropdown-item:active,
-  .dropdown-item:focus, 
+  .dropdown-item:focus,
   .btn-tertiary:not(:disabled):not(.disabled).active {
     background-color: $light-300 !important;
   }
@@ -131,6 +131,20 @@ $fa-font-path: "~font-awesome/fonts";
   .h-4\.5 {
     height: 36px;
   }
+
+  .course-dropdown{
+    #course-dropdown-btn {
+      width: 100%;
+      font-size: 14px !important;
+      padding-top: 10px !important;
+      padding-bottom: 10px !important;
+      border: 1px solid $light-500 !important;
+    }
+
+    .dropdown-item {
+      font-size: 14px !important;
+    }
+  }
 }
 
 .usabilla_live_button_container {