refactor: moved hardcoded support urls to constants (#1260)

Co-authored-by: Ayesha Waris <ayesha.waris@192.168.1.31>

.env

@@ -31,5 +31,10 @@ MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK=''
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT=''
+ACCOUNT_BASICS_SUPPORT_URL=''
+EMAIL_CONFIRMATION_SUPPORT_URL=''
+CERTIFICATES_SUPPORT_URL=''
+LEARNER_SUPPORT_URL=''
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
+COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'

.env.development

@@ -33,4 +33,9 @@ APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK='mailto:support@example.com'
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
+SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT=''
+ACCOUNT_BASICS_SUPPORT_URL=''
+EMAIL_CONFIRMATION_SUPPORT_URL=''
+CERTIFICATES_SUPPORT_URL=''
+LEARNER_SUPPORT_URL=''
+COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'

.env.test

@@ -31,3 +31,4 @@ APP_ID=
 MFE_CONFIG_API_URL=
 LEARNER_FEEDBACK_URL=''
 SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account'
+COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED='[]'

.eslintignore

@@ -3,3 +3,4 @@ dist/
 node_modules/
 __mocks__/
 __snapshots__/
+src/i18n/messages/

Makefile

@@ -1,5 +1,3 @@
-
-
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
@@ -19,6 +17,11 @@ test.npm.%: validate-no-uncommitted-package-lock-changes
 	npm run $(*)
 
 .PHONY: requirements
+
+precommit:
+	npm run lint
+	npm audit
+
 requirements:  ## install ci requirements
 	npm ci
 
@@ -38,6 +41,17 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
+	# Pushing comments to Transifex...
+	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
+
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages

README.rst

@@ -25,40 +25,13 @@ Getting Started
 Prerequisites
 =============
 
-The `devstack`_ is currently recommended as a development environment for your
-new MFE.  If you start it with ``make dev.up.lms`` that should give you
-everything you need as a companion to this frontend.
-
-Note that it is also possible to use `Tutor`_ to develop an MFE.  You can refer
+`Tutor`_ is currently recommended as a development environment for your
+new MFE. Please refer
 to the `relevant tutor-mfe documentation`_ to get started using it.
 
-.. _Devstack: https://github.com/openedx/devstack
-
 .. _Tutor: https://github.com/overhangio/tutor
 
-.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe#mfe-development
-
-Installation
-============
-
-This MFE is bundled with `Devstack <https://github.com/openedx/devstack>`_, see the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ section for setup instructions.
-
-1. Install Devstack using the `Getting Started <https://github.com/openedx/devstack#getting-started>`_ instructions.
-
-2. Start up Devstack, if it's not already started.
-
-3. Log in to Devstack (http://localhost:18000/login )
-
-4. Within this project, install requirements and start the development server:
-
-   .. code-block::
-
-      npm install
-      npm start # The server will run on port 1997
-
-5. Once the dev server is up, visit http://localhost:1997 to access the MFE
-
-   .. image:: ./docs/images/localhost_preview.png
+.. _relevant tutor-mfe documentation: https://github.com/overhangio/tutor-mfe?tab=readme-ov-file#mfe-development
 
 Plugins
 =======
@@ -69,7 +42,7 @@ The parts of this MFE that can be customized in that manner are documented `here
 Environment Variables/Setup Notes
 =================================
 
-This MFE is configured via environment variables supplied at build time.  All micro-frontends have a shared set of required environment variables, as documented in the Open edX Developer Guide under `Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
+This MFE is configured via the ``frontend-platform`` configuration module. For more information on MFE configuration see the `Configuration documentation`_.
 
 The account settings micro-frontend also supports the following additional variable:
 
@@ -102,8 +75,9 @@ Example build syntax with a single environment variable:
 
    NODE_ENV=development ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload' npm run build
 
-For more information see the document: `Micro-frontend applications in Open
-edX <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`__.
+For more information see the document: `Configuration documentation`_
+
+.. _Configuration documentation: https://openedx.github.io/frontend-platform/module-Config.html
 
 Cloning and Startup
 ===================

package.json

@@ -29,17 +29,18 @@
   ],
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.2.1",
+    "@edx/frontend-component-footer": "^14.3.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-platform": "^8.3.3",
     "@edx/openedx-atlas": "^0.6.0",
     "@fortawesome/fontawesome-svg-core": "^6.6.0",
     "@fortawesome/free-brands-svg-icons": "^6.6.0",
     "@fortawesome/free-regular-svg-icons": "^6.6.0",
     "@fortawesome/free-solid-svg-icons": "^6.6.0",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/frontend-plugin-framework": "^1.2.2",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "22.13.0",
+    "@openedx/frontend-plugin-framework": "^1.6.0",
+    "@openedx/frontend-slot-footer": "^1.1.0",
+    "@openedx/paragon": "^22.16.0",
     "@tensorflow-models/blazeface": "0.1.0",
     "@tensorflow/tfjs-converter": "4.22.0",
     "@tensorflow/tfjs-core": "4.22.0",
@@ -60,12 +61,12 @@
     "lodash.pick": "4.4.0",
     "lodash.pickby": "4.6.0",
     "lodash.snakecase": "4.1.1",
-    "long": "5.2.4",
+    "long": "5.3.1",
     "memoize-one": "^6.0.0",
     "prop-types": "15.8.1",
-    "qs": "6.13.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
+    "qs": "6.14.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
     "react-redux": "7.2.9",
     "react-router": "^6.25.1",
@@ -85,10 +86,10 @@
   "devDependencies": {
     "@edx/browserslist-config": "1.5.0",
     "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "14.3.2",
+    "@openedx/frontend-build": "^14.3.3",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "12.1.5",
-    "react-test-renderer": "17.0.2",
+    "@testing-library/react": "14.3.1",
+    "react-test-renderer": "^18.3.1",
     "reactifex": "1.1.1",
     "redux-mock-store": "1.5.5"
   }

src/account-settings/AccountSettingsPage.jsx

@@ -47,9 +47,11 @@ import {
   COPPA_COMPLIANCE_YEAR,
   WORK_EXPERIENCE_OPTIONS,
   getStatesList,
+  FIELD_LABELS,
 } 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 {
@@ -65,6 +67,7 @@ class AccountSettingsPage extends React.Component {
       '#basic-information': React.createRef(),
       '#profile-information': React.createRef(),
       '#social-media': React.createRef(),
+      '#notifications': React.createRef(),
       '#site-preferences': React.createRef(),
       '#linked-accounts': React.createRef(),
       '#delete-account': React.createRef(),
@@ -120,7 +123,15 @@ class AccountSettingsPage extends React.Component {
     countryOptions: [{
       value: '',
       label: this.props.intl.formatMessage(messages['account.settings.field.country.options.empty']),
-    }].concat(getCountryList(locale).map(({ code, name }) => ({ value: code, label: name }))),
+    }].concat(
+      this.removeDisabledCountries(
+        getCountryList(locale).map(({ code, name }) => ({
+          value: code,
+          label: name,
+          disabled: this.isDisabledCountry(code),
+        })),
+      ),
+    ),
     stateOptions: [{
       value: '',
       label: this.props.intl.formatMessage(messages['account.settings.field.state.options.empty']),
@@ -147,11 +158,30 @@ class AccountSettingsPage extends React.Component {
     })),
   }));
 
+  canDeleteAccount = () => {
+    const { committedValues } = this.props;
+    return !getConfig().COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED.includes(committedValues.country);
+  };
+
+  removeDisabledCountries = (countryList) => {
+    const { countriesCodesList, committedValues } = this.props;
+    const committedCountry = committedValues?.country;
+
+    if (!countriesCodesList.length) {
+      return countryList;
+    }
+    return countryList.filter(({ value }) => value === committedCountry || countriesCodesList.find(x => x === value));
+  };
+
   handleEditableFieldChange = (name, value) => {
     this.props.updateDraft(name, value);
   };
 
   handleSubmit = (formId, values) => {
+    if (formId === FIELD_LABELS.COUNTRY && this.isDisabledCountry(values)) {
+      return;
+    }
+
     const { formValues } = this.props;
     let extendedProfileObject = {};
 
@@ -193,6 +223,12 @@ class AccountSettingsPage extends React.Component {
     }
   };
 
+  isDisabledCountry = (country) => {
+    const { countriesCodesList } = this.props;
+
+    return countriesCodesList.length > 0 && !countriesCodesList.find(x => x === country);
+  };
+
   isEditable(fieldName) {
     return !this.props.staticFields.includes(fieldName);
   }
@@ -466,7 +502,8 @@ class AccountSettingsPage extends React.Component {
     } = this.getLocalizedOptions(this.context.locale, this.props.formValues.country);
 
     // Show State field only if the country is US (could include Canada later)
-    const showState = this.props.formValues.country === COUNTRY_WITH_STATES;
+    const { country } = this.props.formValues;
+    const showState = country === COUNTRY_WITH_STATES && !this.isDisabledCountry(country);
     const { verifiedName } = this.props;
 
     const hasWorkExperience = !!this.props.formValues?.extended_profile?.find(field => field.field_name === 'work_experience');
@@ -696,7 +733,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 mb-6" id="social-media">
           <h2 className="section-heading h4 mb-3">
             {this.props.intl.formatMessage(messages['account.settings.section.social.media'])}
           </h2>
@@ -732,8 +769,11 @@ 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" />
+        <div className="mt-6" id="notifications" ref={this.navLinkRefs['#notifications']}>
+          <NotificationSettings />
+        </div>
+        <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>
@@ -775,16 +815,15 @@ class AccountSettingsPage extends React.Component {
           <ThirdPartyAuth />
         </div>
 
-        {getConfig().ENABLE_ACCOUNT_DELETION
-          && (
+        {getConfig().ENABLE_ACCOUNT_DELETION && (
           <div className="account-section pt-3 mb-5" id="delete-account" ref={this.navLinkRefs['#delete-account']}>
             <DeleteAccount
               isVerifiedAccount={this.props.isActive}
               hasLinkedTPA={hasLinkedTPA}
+              canDeleteAccount={this.canDeleteAccount()}
             />
           </div>
-          )}
-
+        )}
       </>
     );
   }
@@ -849,12 +888,15 @@ AccountSettingsPage.propTypes = {
     name: PropTypes.string,
     email: PropTypes.string,
     secondary_email: PropTypes.string,
-    secondary_email_enabled: PropTypes.bool,
+    secondary_email_enabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
     year_of_birth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     country: PropTypes.string,
     level_of_education: PropTypes.string,
     gender: PropTypes.string,
-    extended_profile: PropTypes.string,
+    extended_profile: PropTypes.arrayOf(PropTypes.shape({
+      field_name: PropTypes.string,
+      field_value: PropTypes.string,
+    })),
     language_proficiencies: PropTypes.string,
     pending_name_change: PropTypes.string,
     phone_number: PropTypes.string,
@@ -870,6 +912,7 @@ AccountSettingsPage.propTypes = {
     name: PropTypes.string,
     useVerifiedNameForCerts: PropTypes.bool,
     verified_name: PropTypes.string,
+    country: PropTypes.string,
   }),
   drafts: PropTypes.shape({}),
   formErrors: PropTypes.shape({
@@ -906,9 +949,12 @@ AccountSettingsPage.propTypes = {
   tpaProviders: PropTypes.arrayOf(PropTypes.shape({
     connected: PropTypes.bool,
   })),
-  nameChangeModal: PropTypes.shape({
-    formId: PropTypes.string,
-  }),
+  nameChangeModal: PropTypes.oneOfType([
+    PropTypes.shape({
+      formId: PropTypes.string,
+    }),
+    PropTypes.bool,
+  ]),
   verifiedName: PropTypes.shape({
     verified_name: PropTypes.string,
     status: PropTypes.string,
@@ -928,6 +974,12 @@ AccountSettingsPage.propTypes = {
   ),
   navigate: PropTypes.func.isRequired,
   location: PropTypes.string.isRequired,
+  countriesCodesList: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+    }),
+  ),
 };
 
 AccountSettingsPage.defaultProps = {
@@ -937,6 +989,7 @@ AccountSettingsPage.defaultProps = {
   committedValues: {
     useVerifiedNameForCerts: false,
     verified_name: null,
+    country: '',
   },
   drafts: {},
   formErrors: {},
@@ -949,10 +1002,11 @@ AccountSettingsPage.defaultProps = {
   tpaProviders: [],
   isActive: true,
   secondary_email_enabled: false,
-  nameChangeModal: {},
+  nameChangeModal: {} || false,
   verifiedName: null,
   mostRecentVerifiedName: {},
   verifiedNameHistory: [],
+  countriesCodesList: [],
 };
 
 export default withLocation(withNavigate(connect(accountSettingsPageSelector, {

src/account-settings/EditableSelectField.jsx

@@ -107,6 +107,7 @@ const EditableSelectField = (props) => {
             <option
               value={subOption.value}
               key={`${subOption.value}-${subOption.label}`}
+              disabled={subOption?.disabled}
             >
               {subOption.label}
             </option>
@@ -115,7 +116,7 @@ const EditableSelectField = (props) => {
       );
     }
     return (
-      <option value={option.value} key={`${option.value}-${option.label}`}>
+      <option value={option.value} key={`${option.value}-${option.label}`} disabled={option?.disabled}>
         {option.label}
       </option>
     );

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 })}>
@@ -24,12 +19,14 @@ const JumpNav = ({
           'basic-information',
           'profile-information',
           'social-media',
+          'notifications',
           'site-preferences',
           'linked-accounts',
           'delete-account',
         ]}
         className="list-unstyled"
         currentClassName="font-weight-bold"
+        offset={-64}
       >
         <li>
           <NavHashLink to="#basic-information">
@@ -46,6 +43,11 @@ const JumpNav = ({
             {intl.formatMessage(messages['account.settings.section.social.media'])}
           </NavHashLink>
         </li>
+        <li>
+          <NavHashLink to="#notifications">
+            {intl.formatMessage(messages['notification.preferences.notifications.label'])}
+          </NavHashLink>
+        </li>
         <li>
           <NavHashLink to="#site-preferences">
             {intl.formatMessage(messages['account.settings.section.site.preferences'])}
@@ -65,21 +67,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/certificate-preference/test/CertificatePreference.test.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-import-assign */
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -13,8 +12,11 @@ import {
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import CertificatePreference from '../CertificatePreference'; // eslint-disable-line import/first
 

src/account-settings/data/actions.js

@@ -27,6 +27,7 @@ export const fetchSettingsSuccess = ({
   profileDataManager,
   timeZones,
   verifiedNameHistory,
+  countriesCodesList,
 }) => ({
   type: FETCH_SETTINGS.SUCCESS,
   payload: {
@@ -35,6 +36,7 @@ export const fetchSettingsSuccess = ({
     profileDataManager,
     timeZones,
     verifiedNameHistory,
+    countriesCodesList,
   },
 });
 

src/account-settings/data/constants.js

@@ -132,6 +132,10 @@ export function getStatesList(country) {
   return country && COUNTRY_STATES_MAP[country.toUpperCase()];
 }
 
+export const FIELD_LABELS = {
+  COUNTRY: 'country',
+};
+
 export const DECLINED = 'declined';
 export const SELF_DESCRIBE = 'self-describe';
 export const OTHER = 'other';

src/account-settings/data/reducers.js

@@ -39,6 +39,7 @@ export const defaultState = {
   verifiedName: null,
   mostRecentVerifiedName: {},
   verifiedNameHistory: {},
+  countriesCodesList: [],
 };
 
 const reducer = (state = defaultState, action = {}) => {
@@ -64,6 +65,7 @@ const reducer = (state = defaultState, action = {}) => {
         loaded: true,
         loadingError: null,
         verifiedNameHistory: action.payload.verifiedNameHistory,
+        countriesCodesList: action.payload.countriesCodesList,
       };
     case FETCH_SETTINGS.FAILURE:
       return {

src/account-settings/data/sagas.js

@@ -53,7 +53,7 @@ export function* handleFetchSettings() {
     const { username, userId, roles: userRoles } = getAuthenticatedUser();
 
     const {
-      thirdPartyAuthProviders, profileDataManager, timeZones, ...values
+      thirdPartyAuthProviders, profileDataManager, timeZones, countries, ...values
     } = yield call(
       getSettings,
       username,
@@ -71,6 +71,7 @@ export function* handleFetchSettings() {
       profileDataManager,
       timeZones,
       verifiedNameHistory,
+      countriesCodesList: countries,
     }));
   } catch (e) {
     yield put(fetchSettingsFailure(e.message));

src/account-settings/data/selectors.js

@@ -88,6 +88,11 @@ const previousSiteLanguageSelector = createSelector(
   accountSettings => accountSettings.previousSiteLanguage,
 );
 
+const countriesSelector = createSelector(
+  accountSettingsSelector,
+  accountSettings => accountSettings.countriesCodesList,
+);
+
 const editableFieldErrorSelector = createSelector(
   editableFieldNameSelector,
   accountSettingsSelector,
@@ -237,6 +242,7 @@ export const accountSettingsPageSelector = createSelector(
   mostRecentApprovedVerifiedNameValueSelector,
   mostRecentVerifiedNameSelector,
   sortedVerifiedNameHistorySelector,
+  countriesSelector,
   (
     accountSettings,
     siteLanguageOptions,
@@ -254,6 +260,7 @@ export const accountSettingsPageSelector = createSelector(
     verifiedName,
     mostRecentVerifiedName,
     verifiedNameHistory,
+    countriesCodesList,
   ) => ({
     siteLanguageOptions,
     siteLanguage,
@@ -274,6 +281,7 @@ export const accountSettingsPageSelector = createSelector(
     verifiedName,
     mostRecentVerifiedName,
     verifiedNameHistory,
+    countriesCodesList,
   }),
 );
 

src/account-settings/data/service.js

@@ -1,5 +1,6 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import { logError } from '@edx/frontend-platform/logging';
 import pick from 'lodash.pick';
 import omit from 'lodash.omit';
 import isEmpty from 'lodash.isempty';
@@ -7,6 +8,7 @@ import isEmpty from 'lodash.isempty';
 import { handleRequestError, unpackFieldErrors } from './utils';
 import { getThirdPartyAuthProviders } from '../third-party-auth';
 import { postVerifiedNameConfig } from '../certificate-preference/data/service';
+import { FIELD_LABELS } from './constants';
 
 const SOCIAL_PLATFORMS = [
   { id: 'twitter', key: 'social_link_twitter' },
@@ -186,6 +188,24 @@ export async function postVerifiedName(data) {
     .catch(error => handleRequestError(error));
 }
 
+function extractCountryList(data) {
+  return data?.fields
+    .find(({ name }) => name === FIELD_LABELS.COUNTRY)
+    ?.options?.map(({ value }) => (value)) || [];
+}
+
+export async function getCountryList() {
+  const url = `${getConfig().LMS_BASE_URL}/user_api/v1/account/registration/`;
+
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url);
+    return extractCountryList(data);
+  } catch (e) {
+    logError(e);
+    return [];
+  }
+}
+
 /**
  * A single function to GET everything considered a setting. Currently encapsulates Account, Preferences, and
  * ThirdPartyAuth.
@@ -197,12 +217,14 @@ export async function getSettings(username, userRoles) {
     thirdPartyAuthProviders,
     profileDataManager,
     timeZones,
+    countries,
   ] = await Promise.all([
     getAccount(username),
     getPreferences(username),
     getThirdPartyAuthProviders(),
     getProfileDataManager(username, userRoles),
     getTimeZones(),
+    getCountryList(),
   ]);
 
   return {
@@ -211,6 +233,7 @@ export async function getSettings(username, userRoles) {
     thirdPartyAuthProviders,
     profileDataManager,
     timeZones,
+    countries,
   };
 }
 

src/account-settings/delete-account/BeforeProceedingBanner.test.jsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl, createIntl } from '@edx/frontend-platform/i18n';
 
-ReactDOM.createPortal = node => node;
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import BeforeProceedingBanner from './BeforeProceedingBanner'; // eslint-disable-line import/first
 

src/account-settings/delete-account/ConfirmationModal.test.jsx

@@ -1,10 +1,12 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import { ConfirmationModal } from './ConfirmationModal'; // eslint-disable-line import/first
 

src/account-settings/delete-account/DeleteAccount.jsx

@@ -59,7 +59,7 @@ export class DeleteAccount extends React.Component {
       hasLinkedTPA, isVerifiedAccount, status, errorType, intl,
     } = this.props;
     const canDelete = isVerifiedAccount && !hasLinkedTPA;
-    const supportArticleUrl = process.env.SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT;
+    const supportArticleUrl = getConfig().SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT;
 
     // TODO: We lack a good way of providing custom language for a particular site.  This is a hack
     // to allow edx.org to fulfill its business requirements.
@@ -76,67 +76,74 @@ export class DeleteAccount extends React.Component {
         <h2 className="section-heading h4 mb-3">
           {intl.formatMessage(messages['account.settings.delete.account.header'])}
         </h2>
-        <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>
-        <p>
-          {intl.formatMessage(
-            messages['account.settings.delete.account.text.1'],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-        <p>
-          {intl.formatMessage(
-            messages[deleteAccountText2MessageKey],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-        <p>
-          <PrintingInstructions />
-        </p>
-        <p className="text-danger h6">
-          {intl.formatMessage(
-            messages['account.settings.delete.account.text.warning'],
-            { siteName: getConfig().SITE_NAME },
-          )}
-        </p>
-        <p>
-          <Hyperlink destination="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics">
-            {intl.formatMessage(messages['account.settings.delete.account.text.change.instead'])}
-          </Hyperlink>
-        </p>
-        <p>
-          <Button
-            variant="outline-danger"
-            onClick={canDelete ? this.props.deleteAccountConfirmation : null}
-            disabled={!canDelete}
-          >
-            {intl.formatMessage(messages['account.settings.delete.account.button'])}
-          </Button>
-        </p>
+        {
+          this.props.canDeleteAccount ? (
+            <>
+              <p>{intl.formatMessage(messages['account.settings.delete.account.subheader'])}</p>
+              <p>
+                {intl.formatMessage(
+                  messages['account.settings.delete.account.text.1'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
+              <p>
+                {intl.formatMessage(
+                  messages[deleteAccountText2MessageKey],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
+              <p>
+                <PrintingInstructions />
+              </p>
+              <p className="text-danger h6">
+                {intl.formatMessage(
+                  messages['account.settings.delete.account.text.warning'],
+                  { siteName: getConfig().SITE_NAME },
+                )}
+              </p>
+              <p>
+                <Hyperlink destination={getConfig().ACCOUNT_BASICS_SUPPORT_URL}>
+                  {intl.formatMessage(messages['account.settings.delete.account.text.change.instead'])}
+                </Hyperlink>
+              </p>
+              <p>
+                <Button
+                  variant="outline-danger"
+                  onClick={canDelete ? this.props.deleteAccountConfirmation : null}
+                  disabled={!canDelete}
+                >
+                  {intl.formatMessage(messages['account.settings.delete.account.button'])}
+                </Button>
+              </p>
+              {isVerifiedAccount ? null : (
+                <BeforeProceedingBanner
+                  instructionMessageId={optInInstructionMessageId}
+                  supportArticleUrl={getConfig().EMAIL_CONFIRMATION_SUPPORT_URL}
+                />
+              )}
+              {hasLinkedTPA ? (
+                <BeforeProceedingBanner
+                  instructionMessageId="account.settings.delete.account.please.unlink"
+                  supportArticleUrl={supportArticleUrl}
+                />
+              ) : null}
 
-        {isVerifiedAccount ? null : (
-          <BeforeProceedingBanner
-            instructionMessageId={optInInstructionMessageId}
-            supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
-          />
-        )}
+              <ConnectedConfirmationModal
+                status={status}
+                errorType={errorType}
+                onSubmit={this.handleSubmit}
+                onCancel={this.handleCancel}
+                onChange={this.handlePasswordChange}
+                password={this.state.password}
+              />
 
-        {hasLinkedTPA ? (
-          <BeforeProceedingBanner
-            instructionMessageId="account.settings.delete.account.please.unlink"
-            supportArticleUrl={supportArticleUrl}
-          />
-        ) : null}
+              <ConnectedSuccessModal status={status} onClose={this.handleFinalClose} />
+            </>
+          ) : (
+            <p>{intl.formatMessage(messages['account.settings.cannot.delete.account.text'])}</p>
+          )
+        }
 
-        <ConnectedConfirmationModal
-          status={status}
-          errorType={errorType}
-          onSubmit={this.handleSubmit}
-          onCancel={this.handleCancel}
-          onChange={this.handlePasswordChange}
-          password={this.state.password}
-        />
-
-        <ConnectedSuccessModal status={status} onClose={this.handleFinalClose} />
       </div>
     );
   }
@@ -152,6 +159,7 @@ DeleteAccount.propTypes = {
   errorType: PropTypes.oneOf(['empty-password', 'server']),
   hasLinkedTPA: PropTypes.bool,
   isVerifiedAccount: PropTypes.bool,
+  canDeleteAccount: PropTypes.bool,
   intl: intlShape.isRequired,
 };
 
@@ -160,6 +168,7 @@ DeleteAccount.defaultProps = {
   isVerifiedAccount: true,
   status: null,
   errorType: null,
+  canDeleteAccount: true,
 };
 
 // Assume we're part of the accountSettings state.

src/account-settings/delete-account/PrintingInstructions.jsx

@@ -11,7 +11,7 @@ const PrintingInstructions = (props) => {
       // TODO: What would a generic version of this link look like?  Should
       // CERTIFICATE_SHARING_HELP_URL really be a configuration variable?  In the meantime,
       // We've removed the link from the default message.
-      destination="https://support.edx.org/hc/en-us/sections/115004173027-Receive-and-Share-edX-Certificates"
+      destination={getConfig().CERTIFICATES_SUPPORT_URL}
     >
       {props.intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
     </Hyperlink>

src/account-settings/delete-account/SuccessModal.test.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
 import renderer from 'react-test-renderer';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
+import { waitFor } from '@testing-library/react';
+import { SuccessModal } from './SuccessModal';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
-
-import { SuccessModal } from './SuccessModal'; // eslint-disable-line import/first
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 const IntlSuccessModal = injectIntl(SuccessModal);
 
@@ -20,39 +22,40 @@ describe('SuccessModal', () => {
     };
   });
 
-  it('should match default closed success modal snapshot', () => {
-    let tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-
-    tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} status="confirming" /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-
-    tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} status="pending" /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-
-    tree = renderer.create((
-      <IntlProvider locale="en"><IntlSuccessModal {...props} status="failed" /></IntlProvider>))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+  it('should match default closed success modal snapshot', async () => {
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} status="confirming" /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} status="pending" /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
+    await waitFor(() => {
+      const tree = renderer.create((
+        <IntlProvider locale="en"><IntlSuccessModal {...props} status="failed" /></IntlProvider>)).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 
-  it('should match open success modal snapshot', () => {
-    const tree = renderer
-      .create((
+  it('should match open success modal snapshot', async () => {
+    await waitFor(() => {
+      const tree = renderer.create(
         <IntlProvider locale="en">
           <IntlSuccessModal
             {...props}
-            status="deleted" // This will cause 'modal-backdrop' and 'show' to appear on the modal as CSS classes.
+            status="deleted"
           />
-        </IntlProvider>
-      ))
-      .toJSON();
-    expect(tree).toMatchSnapshot();
+        </IntlProvider>,
+      ).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 });

src/account-settings/delete-account/__snapshots__/BeforeProceedingBanner.test.jsx.snap

@@ -57,7 +57,6 @@ exports[`BeforeProceedingBanner should match the snapshot when SUPPORT_URL_TO_UN
     <a
       className="pgn__hyperlink default-link standalone-link"
       href="http://test-support.edx"
-      onClick={[Function]}
       target="_self"
     >
       unlink all social media accounts

src/account-settings/delete-account/__snapshots__/ConfirmationModal.test.jsx.snap

@@ -41,7 +41,7 @@ exports[`ConfirmationModal should match empty password confirmation modal snapsh
       />
       <div
         aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
         role="dialog"
       >
         <div
@@ -242,7 +242,7 @@ exports[`ConfirmationModal should match open confirmation modal snapshot 1`] = `
       />
       <div
         aria-label="Are you sure?"
-        className="pgn__modal pgn__modal-md pgn__modal-default pgn__modal-visible-overflow pgn__alert-modal"
+        className="pgn__modal pgn__modal-md pgn__modal-default pgn__alert-modal"
         role="dialog"
       >
         <div

src/account-settings/delete-account/__snapshots__/DeleteAccount.test.jsx.snap

@@ -27,8 +27,6 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
   <p>
     <a
       className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
-      onClick={[Function]}
       target="_self"
     >
       Want to change your email, name, or password instead?
@@ -74,8 +72,6 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
   <p>
     <a
       className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
-      onClick={[Function]}
       target="_self"
     >
       Want to change your email, name, or password instead?
@@ -114,16 +110,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
       </svg>
     </div>
     <div>
-      Before proceeding, please 
-      <a
-        className="pgn__hyperlink default-link standalone-link"
-        href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
-        onClick={[Function]}
-        target="_self"
-      >
-        activate your account
-      </a>
-      .
+      Before proceeding, please activate your account.
     </div>
   </div>
 </div>
@@ -156,8 +143,6 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
   <p>
     <a
       className="pgn__hyperlink default-link standalone-link"
-      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
-      onClick={[Function]}
       target="_self"
     >
       Want to change your email, name, or password instead?
@@ -196,16 +181,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
       </svg>
     </div>
     <div>
-      Before proceeding, please 
-      <a
-        className="pgn__hyperlink default-link standalone-link"
-        href="https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account"
-        onClick={[Function]}
-        target="_self"
-      >
-        unlink all social media accounts
-      </a>
-      .
+      Before proceeding, please unlink all social media accounts.
     </div>
   </div>
 </div>

src/account-settings/delete-account/messages.js

@@ -1,6 +1,11 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
+  'account.settings.cannot.delete.account.text': {
+    id: 'account.settings.cannot.delete.account.text',
+    defaultMessage: 'Please note that, for legal and regulatory compliance purposes, account deletion is currently unavailable.',
+    description: 'This text is visible when user is not allowed to delete account',
+  },
   'account.settings.delete.account.header': {
     id: 'account.settings.delete.account.header',
     defaultMessage: 'Delete My Account',

src/account-settings/name-change/test/NameChange.test.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-import-assign */
 import React from 'react';
-import ReactDOM from 'react-dom';
 import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import configureStore from 'redux-mock-store';
@@ -13,8 +12,11 @@ import {
 import * as auth from '@edx/frontend-platform/auth';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 
-// Modal creates a portal.  Overriding ReactDOM.createPortal allows portals to be tested in jest.
-ReactDOM.createPortal = node => node;
+// Modal creates a portal.  Overriding createPortal allows portals to be tested in jest.
+jest.mock('react-dom', () => ({
+  ...jest.requireActual('react-dom'),
+  createPortal: jest.fn(node => node), // Mock portal behavior
+}));
 
 import NameChange from '../NameChange'; // eslint-disable-line import/first
 

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/JumpNav.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import renderer from 'react-test-renderer';
+import { render, screen } from '@testing-library/react';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
 import { AppProvider } from '@edx/frontend-platform/react';
 import { initializeMockApp, mergeConfig, setConfig } from '@edx/frontend-platform';
@@ -37,24 +37,23 @@ describe('JumpNav', () => {
     });
   });
 
-  it('should not render Optional Information or delete account link', () => {
+  it('should not render delete account link', async () => {
     setConfig({
       ENABLE_ACCOUNT_DELETION: false,
     });
 
-    const tree = renderer.create((
+    render(
       <IntlProvider locale="en">
         <AppProvider store={store}>
           <IntlJumpNav {...props} />
         </AppProvider>
-      </IntlProvider>
-    ))
-      .toJSON();
+      </IntlProvider>,
+    );
 
-    expect(tree).toMatchSnapshot();
+    expect(await screen.queryByText('Delete My Account')).toBeNull();
   });
 
-  it('should render Optional Information and delete account link', () => {
+  it('should render delete account link', async () => {
     setConfig({
       ENABLE_ACCOUNT_DELETION: true,
     });
@@ -63,15 +62,14 @@ describe('JumpNav', () => {
       ...props,
     };
 
-    const tree = renderer.create((
+    render(
       <IntlProvider locale="en">
         <AppProvider store={store}>
           <IntlJumpNav {...props} />
         </AppProvider>
-      </IntlProvider>
-    ))
-      .toJSON();
+      </IntlProvider>,
+    );
 
-    expect(tree).toMatchSnapshot();
+    expect(await screen.findByText('Delete My Account')).toBeVisible();
   });
 });

src/account-settings/test/__snapshots__/EditableSelectField.test.jsx.snap

@@ -172,9 +172,7 @@ exports[`EditableSelectField renders EditableSelectField correctly with editing
               />
             </svg>
           </span>
-          <div>
-            
-          </div>
+          <div />
         </div>
       </div>
       <p>

src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap

@@ -1,184 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`JumpNav should not render Optional Information or delete account link 1`] = `
-<div
-  data-testid="redux-provider"
->
-  <div
-    data-testid="browser-router"
-  >
-    <div
-      className="jump-nav px-2.25 jump-nav-sm position-sticky pt-3"
-    >
-      <ul
-        className="list-unstyled"
-        style={{}}
-      >
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#basic-information"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Account Information
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#profile-information"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Profile Information
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#social-media"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Social Media Links
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#site-preferences"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Site Preferences
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#linked-accounts"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Linked Accounts
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`JumpNav should render Optional Information and delete account link 1`] = `
-<div
-  data-testid="redux-provider"
->
-  <div
-    data-testid="browser-router"
-  >
-    <div
-      className="jump-nav px-2.25 jump-nav-sm position-sticky pt-3"
-    >
-      <ul
-        className="list-unstyled"
-        style={{}}
-      >
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#basic-information"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Account Information
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#profile-information"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Profile Information
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#social-media"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Social Media Links
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#site-preferences"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Site Preferences
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#linked-accounts"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Linked Accounts
-          </a>
-        </li>
-        <li
-          className=""
-        >
-          <a
-            aria-current="page"
-            className="active"
-            href="/#delete-account"
-            isActive={[Function]}
-            onClick={[Function]}
-          >
-            Delete My Account
-          </a>
-        </li>
-      </ul>
-    </div>
-  </div>
-</div>
-`;

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/id-verification/panels/SummaryPanel.jsx

@@ -130,7 +130,7 @@ const SummaryPanel = (props) => {
         `}
         values={{
           support_link: (
-            <Alert.Link href="https://support.edx.org/hc/en-us">
+            <Alert.Link href={getConfig().LEARNER_SUPPORT_URL}>
               {props.intl.formatMessage(
                 messages['id.verification.review.error'],
                 { siteName: getConfig().SITE_NAME },

src/index.jsx

@@ -6,8 +6,9 @@ import { AppProvider, ErrorPage } from '@edx/frontend-platform/react';
 import {
   subscribe, initialize, APP_INIT_ERROR, APP_READY, mergeConfig,
 } from '@edx/frontend-platform';
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+// eslint-disable-next-line import/no-unresolved
+import { createRoot } from 'react-dom/client';
 import { Route, Routes, Outlet } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
@@ -20,42 +21,40 @@ import messages from './i18n';
 
 import './index.scss';
 import Head from './head/Head';
-import NotificationCourses from './notification-preferences/NotificationCourses';
-import NotificationPreferences from './notification-preferences/NotificationPreferences';
 
+const rootNode = createRoot(document.getElementById('root'));
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={configureStore()}>
-      <Head />
-      <Routes>
-        <Route element={(
-          <div className="d-flex flex-column" style={{ minHeight: '100vh' }}>
-            <Header />
-            <main className="flex-grow-1" id="main">
-              <Outlet />
-            </main>
-            <FooterSlot />
-          </div>
+  rootNode.render(
+    <StrictMode>
+      <AppProvider store={configureStore()}>
+        <Head />
+        <Routes>
+          <Route element={(
+            <div className="d-flex flex-column" style={{ minHeight: '100vh' }}>
+              <Header />
+              <main className="flex-grow-1" id="main">
+                <Outlet />
+              </main>
+              <FooterSlot />
+            </div>
         )}
-        >
-          <Route path="/notifications/:courseId" element={<NotificationPreferences />} />
-          <Route path="/notifications" element={<NotificationCourses />} />
-          <Route
-            path="/id-verification/*"
-            element={<IdVerificationPageSlot />}
-          />
-          <Route path="/" element={<AccountSettingsPage />} />
-          <Route path="/notfound" element={<NotFoundPage />} />
-          <Route path="*" element={<NotFoundPage />} />
-        </Route>
-      </Routes>
-    </AppProvider>,
-    document.getElementById('root'),
+          >
+            <Route
+              path="/id-verification/*"
+              element={<IdVerificationPageSlot />}
+            />
+            <Route path="/" element={<AccountSettingsPage />} />
+            <Route path="/notfound" element={<NotFoundPage />} />
+            <Route path="*" element={<NotFoundPage />} />
+          </Route>
+        </Routes>
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(<ErrorPage message={error.message} />, document.getElementById('root'));
+  rootNode.render(<ErrorPage message={error.message} />);
 });
 
 initialize({
@@ -69,9 +68,15 @@ initialize({
         SHOW_EMAIL_CHANNEL: process.env.SHOW_EMAIL_CHANNEL || 'false',
         ENABLE_COPPA_COMPLIANCE: (process.env.ENABLE_COPPA_COMPLIANCE || false),
         ENABLE_ACCOUNT_DELETION: (process.env.ENABLE_ACCOUNT_DELETION !== 'false'),
+        COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED: JSON.parse(process.env.COUNTRIES_WITH_DELETE_ACCOUNT_DISABLED || '[]'),
         ENABLE_DOB_UPDATE: (process.env.ENABLE_DOB_UPDATE || false),
         MARKETING_EMAILS_OPT_IN: (process.env.MARKETING_EMAILS_OPT_IN || false),
         PASSWORD_RESET_SUPPORT_LINK: process.env.PASSWORD_RESET_SUPPORT_LINK,
+        SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT: process.env.SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT,
+        ACCOUNT_BASICS_SUPPORT_URL: process.env.ACCOUNT_BASICS_SUPPORT_URL,
+        EMAIL_CONFIRMATION_SUPPORT_URL: process.env.EMAIL_CONFIRMATION_SUPPORT_URL,
+        CERTIFICATES_SUPPORT_URL: process.env.CERTIFICATES_SUPPORT_URL,
+        LEARNER_SUPPORT_URL: process.env.LEARNER_SUPPORT_URL,
         LEARNER_FEEDBACK_URL: process.env.LEARNER_FEEDBACK_URL,
       }, 'App loadConfig override handler');
     },

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 {

src/notification-preferences/EmailCadences.jsx

@@ -10,7 +10,7 @@ import {
 } from '@openedx/paragon';
 
 import messages from './messages';
-import EMAIL_CADENCE from './data/constants';
+import { EMAIL_CADENCE_PREFERENCES, EMAIL_CADENCE } from './data/constants';
 import { selectUpdatePreferencesStatus } from './data/selectors';
 import { LOADING_STATUS } from '../constants';
 
@@ -44,12 +44,12 @@ const EmailCadences = ({
           className="bg-white shadow d-flex flex-column margin-left-2"
           data-testid="email-cadence-dropdown"
         >
-          {Object.values(EMAIL_CADENCE).map((cadence) => (
+          {Object.values(EMAIL_CADENCE_PREFERENCES).map((cadence) => (
             <Dropdown.Item
               key={cadence}
               as={Button}
               variant="tertiary"
-              name="email_cadence"
+              name={EMAIL_CADENCE}
               className="d-flex justify-content-start py-1.5 font-size-14 cadence-button"
               size="inline"
               active={cadence === emailCadence}
@@ -71,7 +71,7 @@ const EmailCadences = ({
 EmailCadences.propTypes = {
   email: PropTypes.bool.isRequired,
   onToggle: PropTypes.func.isRequired,
-  emailCadence: PropTypes.oneOf(Object.values(EMAIL_CADENCE)).isRequired,
+  emailCadence: PropTypes.oneOf(Object.values(EMAIL_CADENCE_PREFERENCES)).isRequired,
   notificationType: PropTypes.string.isRequired,
 };
 

src/notification-preferences/NotificationCourses.jsx

@@ -1,85 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-
-import { Link } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-
-import { ArrowForwardIos } from '@openedx/paragon/icons';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import {
-  Button, Container, Icon, Spinner,
-} from '@openedx/paragon';
-
-import messages from './messages';
-import { useFeedbackWrapper } from '../hooks';
-import { fetchCourseList } from './data/thunks';
-import { NotFoundPage } from '../account-settings';
-import { IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS } from '../constants';
-import { selectCourseList, selectCourseListStatus, selectPagination } from './data/selectors';
-
-const NotificationCourses = ({ intl }) => {
-  useFeedbackWrapper();
-  const dispatch = useDispatch();
-  const coursesList = useSelector(selectCourseList());
-  const courseListStatus = useSelector(selectCourseListStatus());
-  const { hasMore, currentPage } = useSelector(selectPagination());
-
-  const loadMore = useCallback((page = 1, pageSize = 10) => {
-    dispatch(fetchCourseList(page, pageSize));
-  }, [dispatch]);
-
-  useEffect(() => {
-    if (courseListStatus === IDLE_STATUS) { loadMore(); }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (courseListStatus === SUCCESS_STATUS && coursesList.length === 0) {
-    return <NotFoundPage />;
-  }
-
-  return (
-    <Container size="md">
-      <h2 className="notification-heading mt-6 mb-5.5">
-        {intl.formatMessage(messages.notificationHeading)}
-      </h2>
-      <div data-testid="courses-list">
-        {coursesList.map(course => (
-          <Link
-            key={course.id}
-            to={`/notifications/${course.id}`}
-            className="text-decoration-none"
-          >
-            <div className="mb-4 d-flex text-gray-700">
-              <span className="ml-0 mr-auto">
-                {course.name}
-              </span>
-              <span className="ml-auto mr-0">
-                <Icon src={ArrowForwardIos} />
-              </span>
-            </div>
-          </Link>
-        ))}
-      </div>
-      {courseListStatus === LOADING_STATUS ? (
-        <div className="d-flex">
-          <Spinner
-            variant="primary"
-            animation="border"
-            className="mx-auto my-auto"
-            size="lg"
-            data-testid="loading-spinner"
-          />
-        </div>
-      ) : hasMore && (
-        <Button variant="primary" className="w-100 bg-primary-500" onClick={() => loadMore(currentPage + 1)}>
-          {intl.formatMessage(messages.loadMoreCourses)}
-        </Button>
-      )}
-    </Container>
-  );
-};
-
-NotificationCourses.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(NotificationCourses);

src/notification-preferences/NotificationCourses.test.jsx

@@ -1,97 +0,0 @@
-/* eslint-disable no-import-assign */
-import { Provider } from 'react-redux';
-import configureStore from 'redux-mock-store';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-import * as auth from '@edx/frontend-platform/auth';
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
-import { defaultState } from './data/reducers';
-import NotificationCourses from './NotificationCourses';
-import { LOADING_STATUS, SUCCESS_STATUS } from '../constants';
-
-const mockStore = configureStore();
-
-jest.mock('@edx/frontend-platform/auth');
-
-const courseList = [
-  { id: 'course-id-1', name: 'Course Name 1' },
-  { id: 'course-id-2', name: 'Course Name 2' },
-  { id: 'course-id-3', name: 'Course Name 3' },
-];
-
-const setupStore = (override = {}) => {
-  const storeState = defaultState;
-  storeState.courses = {
-    ...storeState.courses,
-    ...override,
-  };
-  const store = mockStore({
-    notificationPreferences: storeState,
-  });
-  return store;
-};
-
-const renderComponent = (store = {}) => (
-  render(
-    <Router>
-      <IntlProvider locale="en">
-        <Provider store={store}>
-          <NotificationCourses />
-        </Provider>
-      </IntlProvider>
-    </Router>,
-  )
-);
-
-describe('Notification Courses', () => {
-  let store;
-  beforeEach(() => {
-    store = setupStore({
-      courses: courseList,
-      status: SUCCESS_STATUS,
-      pagination: {
-        count: 3,
-        currentPage: 1,
-        hasMore: false,
-        totalPages: 1,
-      },
-    });
-
-    auth.getAuthenticatedHttpClient = jest.fn(() => ({
-      patch: async () => ({
-        data: { status: 200 },
-        catch: () => {},
-      }),
-    }));
-    auth.getAuthenticatedUser = jest.fn(() => ({ userId: 3 }));
-    window.lightningjs = null;
-  });
-
-  afterEach(() => jest.clearAllMocks());
-
-  it('tests if all courses are available', async () => {
-    await renderComponent(store);
-    expect(screen.queryByTestId('courses-list').children).toHaveLength(3);
-  });
-
-  it('show spinner if api call is in progress', async () => {
-    store = setupStore({ status: LOADING_STATUS });
-    await renderComponent(store);
-    expect(screen.queryByTestId('loading-spinner')).toBeInTheDocument();
-  });
-
-  it('show not found page if course list is empty', async () => {
-    store = setupStore({ status: SUCCESS_STATUS, courses: [] });
-    await renderComponent(store);
-    expect(screen.queryByTestId('not-found-page')).toBeInTheDocument();
-  });
-
-  it('show load more courses button when hasMore True', async () => {
-    store = setupStore({ status: SUCCESS_STATUS, pagination: { ...store.pagination, hasMore: true, totalPages: 2 } });
-    await renderComponent(store);
-
-    expect(screen.queryByText('Load more courses')).toBeInTheDocument();
-  });
-});

src/notification-preferences/NotificationCoursesDropdown.jsx

@@ -0,0 +1,73 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Dropdown } from '@openedx/paragon';
+
+import { IDLE_STATUS, SUCCESS_STATUS } from '../constants';
+import { selectCourseList, selectCourseListStatus, selectSelectedCourseId } from './data/selectors';
+import { fetchCourseList, setSelectedCourse } from './data/thunks';
+import messages from './messages';
+
+const NotificationCoursesDropdown = () => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const coursesList = useSelector(selectCourseList());
+  const courseListStatus = useSelector(selectCourseListStatus());
+  const selectedCourseId = useSelector(selectSelectedCourseId());
+  const selectedCourse = useMemo(
+    () => coursesList.find((course) => course.id === selectedCourseId),
+    [coursesList, selectedCourseId],
+  );
+
+  const handleCourseSelection = useCallback((courseId) => {
+    dispatch(setSelectedCourse(courseId));
+  }, [dispatch]);
+
+  const fetchCourses = useCallback((page = 1, pageSize = 99999) => {
+    dispatch(fetchCourseList(page, pageSize));
+  }, [dispatch]);
+
+  useEffect(() => {
+    if (courseListStatus === IDLE_STATUS) {
+      fetchCourses();
+    }
+  }, [courseListStatus, fetchCourses]);
+
+  return (
+    courseListStatus === SUCCESS_STATUS && (
+      <div className="mb-5">
+        <h5 className="text-primary-500 mb-3">{intl.formatMessage(messages.notificationDropdownlabel)}</h5>
+        <Dropdown className="course-dropdown">
+          <Dropdown.Toggle
+            variant="outline-primary"
+            id="course-dropdown-btn"
+            className="w-100 justify-content-between small"
+          >
+            {selectedCourse?.name}
+          </Dropdown.Toggle>
+          <Dropdown.Menu className="w-100">
+            {coursesList.map((course) => (
+              <Dropdown.Item
+                className="w-100"
+                key={course.id}
+                active={course.id === selectedCourse?.id}
+                eventKey={course.id}
+                onSelect={handleCourseSelection}
+              >
+                {course.name}
+              </Dropdown.Item>
+            ))}
+          </Dropdown.Menu>
+        </Dropdown>
+        <span className="x-small text-gray-500">
+          {selectedCourse?.name === 'Account'
+            ? intl.formatMessage(messages.notificationDropdownApplies)
+            : intl.formatMessage(messages.notificationCourseDropdownApplies)}
+        </span>
+      </div>
+    )
+  );
+};
+
+export default NotificationCoursesDropdown;

src/notification-preferences/NotificationPreferenceApp.jsx

@@ -11,27 +11,22 @@ import { useIsOnMobile } from '../hooks';
 import NotificationTypes from './NotificationTypes';
 import { notificationChannels, shouldHideAppPreferences } from './data/utils';
 import NotificationPreferenceColumn from './NotificationPreferenceColumn';
-import { selectPreferenceAppToggleValue, selectSelectedCourseId, selectAppPreferences } from './data/selectors';
+import { selectPreferenceAppToggleValue, selectAppPreferences } from './data/selectors';
 
 const NotificationPreferenceApp = ({ appId }) => {
   const intl = useIntl();
-  const courseId = useSelector(selectSelectedCourseId());
   const appToggle = useSelector(selectPreferenceAppToggleValue(appId));
   const appPreferences = useSelector(selectAppPreferences(appId));
   const mobileView = useIsOnMobile();
   const NOTIFICATION_CHANNELS = notificationChannels();
   const hideAppPreferences = shouldHideAppPreferences(appPreferences, appId) || false;
 
-  if (!courseId) {
-    return null;
-  }
-
   return (
     !hideAppPreferences && (
     <Collapsible.Advanced
       open={appToggle}
       data-testid={`${appId}-app`}
-      className={classNames({ 'mb-5': !mobileView && appToggle })}
+      className={classNames({ 'mb-4.5': !mobileView && appToggle })}
     >
       <Collapsible.Trigger>
         <div className="d-flex align-items-center">

src/notification-preferences/NotificationPreferenceColumn.jsx

@@ -15,6 +15,9 @@ import { LOADING_STATUS } from '../constants';
 import { updatePreferenceToggle } from './data/thunks';
 import { selectAppPreferences, selectSelectedCourseId, selectUpdatePreferencesStatus } from './data/selectors';
 import { notificationChannels, shouldHideAppPreferences } from './data/utils';
+import {
+  EMAIL, EMAIL_CADENCE, EMAIL_CADENCE_PREFERENCES, MIXED,
+} from './data/constants';
 
 const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => {
   const dispatch = useDispatch();
@@ -26,9 +29,34 @@ const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => {
   const NOTIFICATION_CHANNELS = Object.values(notificationChannels());
   const hideAppPreferences = shouldHideAppPreferences(appPreferences, appId) || false;
 
+  const getValue = useCallback((notificationChannel, innerText, checked) => {
+    if (notificationChannel === EMAIL_CADENCE && courseId) {
+      return innerText;
+    }
+    return checked;
+  }, [courseId]);
+
+  const getEmailCadence = useCallback((notificationChannel, checked, innerText, emailCadence) => {
+    if (notificationChannel === EMAIL_CADENCE) {
+      return innerText;
+    }
+    if (notificationChannel === EMAIL && checked) {
+      return EMAIL_CADENCE_PREFERENCES.DAILY;
+    }
+    return emailCadence;
+  }, []);
+
   const onToggle = useCallback((event, notificationType) => {
-    const { name: notificationChannel } = event.target;
-    const value = notificationChannel === 'email_cadence' ? event.target.innerText : event.target.checked;
+    const { name: notificationChannel, checked, innerText } = event.target;
+    const appNotificationPreference = appPreferences.find(preference => preference.id === notificationType);
+
+    const value = getValue(notificationChannel, innerText, checked);
+    const emailCadence = getEmailCadence(
+      notificationChannel,
+      checked,
+      innerText,
+      appNotificationPreference.emailCadence,
+    );
 
     dispatch(updatePreferenceToggle(
       courseId,
@@ -36,9 +64,9 @@ const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => {
       notificationType,
       notificationChannel,
       value,
+      emailCadence !== MIXED ? emailCadence : undefined,
     ));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [appId]);
+  }, [appPreferences, getValue, getEmailCadence, dispatch, courseId, appId]);
 
   const renderPreference = (preference) => (
     (preference?.coreNotificationTypes?.length > 0 || preference.id !== 'core') && (
@@ -60,7 +88,7 @@ const NotificationPreferenceColumn = ({ appId, channel, appPreference }) => {
         id={`${preference.id}-${channel}`}
         className="my-1"
       />
-      {channel === 'email' && (
+      {channel === EMAIL && (
       <EmailCadences
         email={preference.email}
         onToggle={onToggle}

src/notification-preferences/NotificationPreferences.jsx

@@ -1,35 +1,26 @@
 import React, { useEffect, useMemo } from 'react';
 
-import { Link, useParams } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import classNames from 'classnames';
 
-import { ArrowBack } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  Container, Hyperlink, Icon, Spinner, NavItem,
-} from '@openedx/paragon';
+import { Spinner, NavItem } from '@openedx/paragon';
 
 import { useIsOnMobile } from '../hooks';
 import messages from './messages';
-import { NotFoundPage } from '../account-settings';
 import NotificationPreferenceApp from './NotificationPreferenceApp';
-import { fetchCourseList, fetchCourseNotificationPreferences } from './data/thunks';
+import { fetchCourseNotificationPreferences } from './data/thunks';
+import { LOADING_STATUS } from '../constants';
 import {
-  FAILURE_STATUS, IDLE_STATUS, LOADING_STATUS, SUCCESS_STATUS,
-} from '../constants';
-import {
-  selectCourse, selectCourseList, selectCourseListStatus, selectNotificationPreferencesStatus, selectPreferenceAppsId,
+  selectCourseListStatus, selectNotificationPreferencesStatus, selectPreferenceAppsId, selectSelectedCourseId,
 } from './data/selectors';
 import { notificationChannels } from './data/utils';
 
 const NotificationPreferences = () => {
-  const { courseId } = useParams();
   const dispatch = useDispatch();
   const intl = useIntl();
   const courseStatus = useSelector(selectCourseListStatus());
-  const coursesList = useSelector(selectCourseList());
-  const course = useSelector(selectCourse(courseId));
+  const courseId = useSelector(selectSelectedCourseId());
   const notificationStatus = useSelector(selectNotificationPreferencesStatus());
   const preferenceAppsIds = useSelector(selectPreferenceAppsId());
   const mobileView = useIsOnMobile();
@@ -43,46 +34,16 @@ const NotificationPreferences = () => {
   ), [preferenceAppsIds]);
 
   useEffect(() => {
-    if ([IDLE_STATUS, FAILURE_STATUS].includes(courseStatus)) {
-      dispatch(fetchCourseList());
-    }
     dispatch(fetchCourseNotificationPreferences(courseId));
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [courseId]);
+  }, [courseId, dispatch]);
 
-  if (
-    (courseStatus === SUCCESS_STATUS && coursesList.length === 0)
-    || (notificationStatus === FAILURE_STATUS && coursesList.length !== 0)
-  ) {
-    return <NotFoundPage />;
+  if (preferenceAppsIds.length === 0) {
+    return null;
   }
 
   return (
-    <Container size="sm" className="notification-preferences">
-      <h2 className="notification-heading mt-6 mb-4.5">
-        {intl.formatMessage(messages.notificationHeading)}
-      </h2>
-      <div className="mb-6 text-gray-700 font-size-14 margin-bottom-32">
-        {intl.formatMessage(messages.notificationPreferenceGuideBody)}
-        <Hyperlink
-          destination="https://edx.readthedocs.io/projects/open-edx-learner-guide/en/latest/sfd_notifications/index.html"
-          target="_blank"
-          rel="noopener noreferrer"
-          className="text-decoration-underline ml-1"
-        >
-          {intl.formatMessage(messages.notificationPreferenceGuideLink)}
-        </Hyperlink>
-      </div>
-      <div className="h-100">
-        <div className="d-flex mb-5">
-          <Link to="/notifications">
-            <Icon className="text-primary-500" src={ArrowBack} />
-          </Link>
-          <span className="notification-course-title ml-auto mr-auto text-primary-500">
-            {course?.name}
-          </span>
-        </div>
-        {!mobileView && !isLoading && (
+    <div className="h-100">
+      {!mobileView && !isLoading && (
         <div className="d-flex flex-row justify-content-between float-right">
           <div className="d-flex">
             {Object.values(NOTIFICATION_CHANNELS).map((channel) => (
@@ -103,21 +64,20 @@ const NotificationPreferences = () => {
             ))}
           </div>
         </div>
-        )}
-        {preferencesList}
-        {isLoading && (
-          <div className="d-flex">
-            <Spinner
-              variant="primary"
-              animation="border"
-              className="mx-auto my-auto"
-              size="lg"
-              data-testid="loading-spinner"
-            />
-          </div>
-        )}
-      </div>
-    </Container>
+      )}
+      {preferencesList}
+      {isLoading && (
+        <div className="d-flex">
+          <Spinner
+            variant="primary"
+            animation="border"
+            className="mx-auto my-auto"
+            size="lg"
+            data-testid="loading-spinner"
+          />
+        </div>
+      )}
+    </div>
   );
 };
 

src/notification-preferences/NotificationPreferences.test.jsx

@@ -9,7 +9,7 @@ import { fireEvent, render, screen } from '@testing-library/react';
 
 import { defaultState } from './data/reducers';
 import NotificationPreferences from './NotificationPreferences';
-import { FAILURE_STATUS, LOADING_STATUS, SUCCESS_STATUS } from '../constants';
+import { LOADING_STATUS, SUCCESS_STATUS } from '../constants';
 
 const courseId = 'selected-course-id';
 
@@ -77,6 +77,7 @@ const setupStore = (override = {}) => {
   storeState.courses = {
     status: SUCCESS_STATUS,
     courses: [
+      { id: '', name: 'Account' },
       { id: 'selected-course-id', name: 'Selected Course' },
     ],
   };
@@ -146,9 +147,15 @@ describe('Notification Preferences', () => {
     expect(mockDispatch).toHaveBeenCalled();
   });
 
-  it('show not found page if invalid course id is entered in url', async () => {
-    store = setupStore({ status: FAILURE_STATUS, selectedCourse: 'invalid-course-id' });
+  it('update account preference on click', async () => {
+    store = setupStore({
+      ...defaultPreferences,
+      status: SUCCESS_STATUS,
+      selectedCourse: '',
+    });
     await render(notificationPreferences(store));
-    expect(screen.queryByTestId('not-found-page')).toBeInTheDocument();
+    const element = screen.getByTestId('core-web');
+    await fireEvent.click(element);
+    expect(mockDispatch).toHaveBeenCalled();
   });
 });

src/notification-preferences/NotificationSettings.jsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Container, Hyperlink } from '@openedx/paragon';
+
+import { selectSelectedCourseId, selectShowPreferences } from './data/selectors';
+import messages from './messages';
+import NotificationCoursesDropdown from './NotificationCoursesDropdown';
+import NotificationPreferences from './NotificationPreferences';
+import { useFeedbackWrapper } from '../hooks';
+
+const NotificationSettings = () => {
+  useFeedbackWrapper();
+  const intl = useIntl();
+  const showPreferences = useSelector(selectShowPreferences());
+  const courseId = useSelector(selectSelectedCourseId());
+
+  return (
+    showPreferences && (
+      <Container className="notification-preferences px-0">
+        <h2 className="notification-heading mb-3">
+          {intl.formatMessage(messages.notificationHeading)}
+        </h2>
+        <div className="text-gray-700 font-size-14 mb-3">
+          {intl.formatMessage(messages.accountNotificationDescription)}
+        </div>
+        <div className="text-gray-700 font-size-14 mb-3">
+          {intl.formatMessage(messages.notificationCadenceDescription, {
+            dailyTime: '22:00 UTC',
+            weeklyTime: '22:00 UTC Every Sunday',
+          })}
+        </div>
+        <div className="mb-5 text-gray-700 font-size-14">
+          {intl.formatMessage(messages.notificationPreferenceGuideBody)}
+          <Hyperlink
+            destination="https://edx.readthedocs.io/projects/open-edx-learner-guide/en/latest/sfd_notifications/index.html"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-decoration-underline ml-1"
+          >
+            {intl.formatMessage(messages.notificationPreferenceGuideLink)}
+          </Hyperlink>
+        </div>
+        <NotificationCoursesDropdown />
+        <NotificationPreferences courseId={courseId} />
+        <div className="border border-light-700 my-6" />
+      </Container>
+    )
+  );
+};
+
+export default NotificationSettings;

src/notification-preferences/data/actions.js

@@ -10,8 +10,10 @@ export const Actions = {
   UPDATE_APP_PREFERENCE: 'updateAppValue',
 };
 
-export const fetchNotificationPreferenceSuccess = (courseId, payload) => dispatch => (
-  dispatch({ type: Actions.FETCHED_PREFERENCES, courseId, payload })
+export const fetchNotificationPreferenceSuccess = (courseId, payload, isAccountPreference) => dispatch => (
+  dispatch({
+    type: Actions.FETCHED_PREFERENCES, courseId, payload, isAccountPreference,
+  })
 );
 
 export const fetchNotificationPreferenceFetching = () => dispatch => (

src/notification-preferences/data/constants.js

@@ -1,6 +1,18 @@
-const EMAIL_CADENCE = {
+export const EMAIL_CADENCE_PREFERENCES = {
   DAILY: 'Daily',
   WEEKLY: 'Weekly',
 };
-
-export default EMAIL_CADENCE;
+export const EMAIL_CADENCE = 'email_cadence';
+export const EMAIL = 'email';
+export const MIXED = 'Mixed';
+export const RequestStatus = /** @type {const} */ ({
+  IN_PROGRESS: 'in-progress',
+  SUCCESSFUL: 'successful',
+  FAILED: 'failed',
+  DENIED: 'denied',
+  PENDING: 'pending',
+  CLEAR: 'clear',
+  PARTIAL: 'partial',
+  PARTIAL_FAILURE: 'partial failure',
+  NOT_FOUND: 'not-found',
+});

src/notification-preferences/data/reducers.js

@@ -5,18 +5,19 @@ import {
   SUCCESS_STATUS,
   FAILURE_STATUS,
 } from '../../constants';
+import { normalizeAccountPreferences } from './thunks';
 
 export const defaultState = {
   showPreferences: false,
   courses: {
     status: IDLE_STATUS,
-    courses: [],
+    courses: [{ id: '', name: 'Account' }],
     pagination: {},
   },
   preferences: {
     status: IDLE_STATUS,
     updatePreferenceStatus: IDLE_STATUS,
-    selectedCourse: null,
+    selectedCourse: '',
     preferences: [],
     apps: [],
     nonEditable: {},
@@ -66,15 +67,22 @@ const notificationPreferencesReducer = (state = defaultState, action = {}) => {
         },
       };
     case Actions.FETCHED_PREFERENCES:
+    {
+      const { preferences } = state;
+      if (action.isAccountPreference) {
+        normalizeAccountPreferences(preferences, action.payload);
+      }
+
       return {
         ...state,
         preferences: {
-          ...state.preferences,
+          ...preferences,
           status: SUCCESS_STATUS,
           updatePreferenceStatus: SUCCESS_STATUS,
           ...action.payload,
         },
       };
+    }
     case Actions.FAILED_PREFERENCES:
       return {
         ...state,

src/notification-preferences/data/reducers.test.js

@@ -36,9 +36,7 @@ describe('notification-preferences reducer', () => {
         hasMore: false,
         totalPages: 1,
       },
-      courseList: [
-        { id: selectedCourseId, name: 'Selected Course' },
-      ],
+      courseList: [],
     };
     const result = reducer(
       state,
@@ -46,7 +44,7 @@ describe('notification-preferences reducer', () => {
     );
     expect(result.courses).toEqual({
       status: SUCCESS_STATUS,
-      courses: data.courseList,
+      courses: [{ id: '', name: 'Account' }],
       pagination: data.pagination,
     });
   });
@@ -61,7 +59,10 @@ describe('notification-preferences reducer', () => {
     );
     expect(result.courses).toEqual({
       status,
-      courses: [],
+      courses: [{
+        id: '',
+        name: 'Account',
+      }],
       pagination: {},
     });
   });
@@ -82,7 +83,7 @@ describe('notification-preferences reducer', () => {
     expect(result.preferences).toEqual({
       status: SUCCESS_STATUS,
       updatePreferenceStatus: SUCCESS_STATUS,
-      selectedCourse: null,
+      selectedCourse: '',
       ...preferenceData,
     });
   });
@@ -97,7 +98,7 @@ describe('notification-preferences reducer', () => {
     );
     expect(result.preferences).toEqual({
       status,
-      selectedCourse: null,
+      selectedCourse: '',
       preferences: [],
       apps: [],
       nonEditable: {},

src/notification-preferences/data/service.js

@@ -32,3 +32,22 @@ export const patchPreferenceToggle = async (
   const { data } = await getAuthenticatedHttpClient().patch(url, patchData);
   return data;
 };
+
+export const postPreferenceToggle = async (
+  notificationApp,
+  notificationType,
+  notificationChannel,
+  value,
+  emailCadence,
+) => {
+  const patchData = snakeCaseObject({
+    notificationApp,
+    notificationType: snakeCase(notificationType),
+    notificationChannel,
+    value,
+    emailCadence,
+  });
+  const url = `${getConfig().LMS_BASE_URL}/api/notifications/preferences/update-all/`;
+  const { data } = await getAuthenticatedHttpClient().post(url, patchData);
+  return data;
+};

src/notification-preferences/data/thunk.test.js

@@ -0,0 +1,150 @@
+import { updatePreferenceToggle } from './thunks';
+import {
+  updatePreferenceValue,
+  fetchNotificationPreferenceSuccess,
+  fetchNotificationPreferenceFailed,
+} from './actions';
+import { patchPreferenceToggle, postPreferenceToggle } from './service';
+import { EMAIL } from './constants';
+
+jest.mock('./service', () => ({
+  patchPreferenceToggle: jest.fn(),
+  postPreferenceToggle: jest.fn(),
+}));
+
+jest.mock('./actions', () => ({
+  updatePreferenceValue: jest.fn(),
+  fetchNotificationPreferenceSuccess: jest.fn(),
+  fetchNotificationPreferenceFailed: jest.fn(),
+}));
+
+describe('updatePreferenceToggle', () => {
+  const dispatch = jest.fn();
+  const courseId = 'course-v1:edX+DemoX+2023';
+  const notificationApp = 'app';
+  const notificationType = 'type';
+  const notificationChannel = 'channel';
+  const value = true;
+  const emailCadence = 'daily';
+
+  const mockData = {
+    updated_value: false,
+    notification_type: 'ora_grade_assigned',
+    channel: 'email',
+    app: 'grading',
+    successfully_updated_courses: [
+      {
+        course_id: 'course-v1:ACCA+ColSid+1T2024',
+        current_setting: {
+          web: false,
+          push: false,
+          email: false,
+          email_cadence: 'Weekly',
+        },
+      },
+      {
+        course_id: 'course-v1:arbisoft_acca+cs1023+2021_T4',
+        current_setting: {
+          web: false,
+          push: false,
+          email: false,
+          email_cadence: 'Weekly',
+        },
+      },
+    ],
+    total_updated: 2,
+    total_courses: 2,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should update preference for a course-specific notification', async () => {
+    patchPreferenceToggle.mockResolvedValue({ data: mockData });
+    await updatePreferenceToggle(
+      courseId,
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      value,
+      emailCadence,
+    )(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updatePreferenceValue(
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      !value,
+    ));
+    expect(patchPreferenceToggle).toHaveBeenCalledWith(
+      courseId,
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      value,
+    );
+    expect(dispatch).toHaveBeenCalledWith(fetchNotificationPreferenceSuccess(courseId, { data: mockData }, false));
+  });
+
+  it('should update preference globally when courseId is not provided', async () => {
+    postPreferenceToggle.mockResolvedValue({ data: mockData });
+    await updatePreferenceToggle(
+      null,
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      value,
+      emailCadence,
+    )(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updatePreferenceValue(
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      !value,
+    ));
+    expect(postPreferenceToggle).toHaveBeenCalledWith(
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      value,
+      emailCadence,
+    );
+    expect(dispatch).toHaveBeenCalledWith(fetchNotificationPreferenceSuccess(null, { data: mockData }, true));
+  });
+
+  it('should handle email preferences separately', async () => {
+    patchPreferenceToggle.mockResolvedValue({ data: mockData });
+    await updatePreferenceToggle(courseId, notificationApp, notificationType, EMAIL, value, emailCadence)(dispatch);
+
+    expect(patchPreferenceToggle).toHaveBeenCalledWith(
+      courseId,
+      notificationApp,
+      notificationType,
+      EMAIL,
+      true,
+    );
+    expect(dispatch).toHaveBeenCalledWith(fetchNotificationPreferenceSuccess(courseId, { data: mockData }, false));
+  });
+
+  it('should dispatch fetchNotificationPreferenceFailed on error', async () => {
+    patchPreferenceToggle.mockRejectedValue(new Error('Network Error'));
+    await updatePreferenceToggle(
+      courseId,
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      value,
+      emailCadence,
+    )(dispatch);
+
+    expect(dispatch).toHaveBeenCalledWith(updatePreferenceValue(
+      notificationApp,
+      notificationType,
+      notificationChannel,
+      !value,
+    ));
+    expect(dispatch).toHaveBeenCalledWith(fetchNotificationPreferenceFailed());
+  });
+});

src/notification-preferences/data/thunks.js

@@ -1,5 +1,6 @@
 import { camelCaseObject } from '@edx/frontend-platform';
-import EMAIL_CADENCE from './constants';
+import camelCase from 'lodash.camelcase';
+import { EMAIL, EMAIL_CADENCE, EMAIL_CADENCE_PREFERENCES } from './constants';
 import {
   fetchCourseListSuccess,
   fetchCourseListFetching,
@@ -14,6 +15,7 @@ import {
   getCourseList,
   getCourseNotificationPreferences,
   patchPreferenceToggle,
+  postPreferenceToggle,
 } from './service';
 
 const normalizeCourses = (responseData) => {
@@ -36,8 +38,29 @@ const normalizeCourses = (responseData) => {
   };
 };
 
-const normalizePreferences = (responseData) => {
-  const preferences = responseData.notificationPreferenceConfig;
+export const normalizeAccountPreferences = (originalData, updateInfo) => {
+  const {
+    app, notificationType, channel, updatedValue,
+  } = updateInfo.data;
+
+  const preferenceToUpdate = originalData.preferences.find(
+    (preference) => preference.appId === app && preference.id === camelCase(notificationType),
+  );
+
+  if (preferenceToUpdate) {
+    preferenceToUpdate[camelCase(channel)] = updatedValue;
+  }
+
+  return originalData;
+};
+
+const normalizePreferences = (responseData, courseId) => {
+  let preferences;
+  if (courseId) {
+    preferences = responseData.notificationPreferenceConfig;
+  } else {
+    preferences = responseData.data;
+  }
 
   const appKeys = Object.keys(preferences);
   const apps = appKeys.map((appId) => ({
@@ -56,7 +79,8 @@ const normalizePreferences = (responseData) => {
         push: preferences[appId].notificationTypes[preferenceId].push,
         email: preferences[appId].notificationTypes[preferenceId].email,
         info: preferences[appId].notificationTypes[preferenceId].info || '',
-        emailCadence: preferences[appId].notificationTypes[preferenceId].emailCadence || EMAIL_CADENCE.DAILY,
+        emailCadence: preferences[appId].notificationTypes[preferenceId].emailCadence
+        || EMAIL_CADENCE_PREFERENCES.DAILY,
         coreNotificationTypes: preferences[appId].coreNotificationTypes || [],
       }
     ));
@@ -92,7 +116,7 @@ export const fetchCourseNotificationPreferences = (courseId) => (
       dispatch(updateSelectedCourse(courseId));
       dispatch(fetchNotificationPreferenceFetching());
       const data = await getCourseNotificationPreferences(courseId);
-      const normalizedData = normalizePreferences(camelCaseObject(data));
+      const normalizedData = normalizePreferences(camelCaseObject(data), courseId);
       dispatch(fetchNotificationPreferenceSuccess(courseId, normalizedData));
     } catch (errors) {
       dispatch(fetchNotificationPreferenceFailed());
@@ -100,30 +124,75 @@ export const fetchCourseNotificationPreferences = (courseId) => (
   }
 );
 
+export const setSelectedCourse = courseId => (
+  async (dispatch) => {
+    dispatch(updateSelectedCourse(courseId));
+  }
+);
+
 export const updatePreferenceToggle = (
   courseId,
   notificationApp,
   notificationType,
   notificationChannel,
   value,
+  emailCadence,
 ) => (
   async (dispatch) => {
     try {
+      // Initially update the UI to give immediate feedback
       dispatch(updatePreferenceValue(
         notificationApp,
         notificationType,
         notificationChannel,
         !value,
       ));
-      const data = await patchPreferenceToggle(
-        courseId,
-        notificationApp,
-        notificationType,
-        notificationChannel,
-        value,
-      );
-      const normalizedData = normalizePreferences(camelCaseObject(data));
-      dispatch(fetchNotificationPreferenceSuccess(courseId, normalizedData));
+
+      // Function to handle data normalization and dispatching success
+      const handleSuccessResponse = (data, isGlobal = false) => {
+        const processedData = courseId
+          ? normalizePreferences(camelCaseObject(data), courseId)
+          : camelCaseObject(data);
+
+        dispatch(fetchNotificationPreferenceSuccess(courseId, processedData, isGlobal));
+        return processedData;
+      };
+
+      // Function to toggle preference based on context (course-specific or global)
+      const togglePreference = async (channel, toggleValue, cadence) => {
+        if (courseId) {
+          return patchPreferenceToggle(
+            courseId,
+            notificationApp,
+            notificationType,
+            channel,
+            channel === EMAIL_CADENCE ? cadence : toggleValue,
+          );
+        }
+
+        return postPreferenceToggle(
+          notificationApp,
+          notificationType,
+          channel,
+          channel === EMAIL_CADENCE ? undefined : toggleValue,
+          cadence,
+        );
+      };
+
+      // Execute the main preference toggle
+      const data = await togglePreference(notificationChannel, value, emailCadence);
+      handleSuccessResponse(data, !courseId);
+
+      // Handle special case for email notifications
+      if (notificationChannel === EMAIL && value) {
+        const emailCadenceData = await togglePreference(
+          EMAIL_CADENCE,
+          courseId ? undefined : value,
+          EMAIL_CADENCE_PREFERENCES.DAILY,
+        );
+
+        handleSuccessResponse(emailCadenceData, !courseId);
+      }
     } catch (errors) {
       dispatch(updatePreferenceValue(
         notificationApp,

src/notification-preferences/messages.js

@@ -27,7 +27,7 @@ const messages = defineMessages({
       newQuestionPost {New question posts}
       contentReported {Reported content}
       courseUpdates {Course updates}
-      oraStaffNotification {ORA new submissions}
+      oraStaffNotifications {ORA new submissions}
       oraGradeAssigned {Essay assignment grade received}
       other {{text}}
     }`,
@@ -90,6 +90,36 @@ const messages = defineMessages({
     defaultMessage: 'Notifications for certain activities are enabled by default,',
     description: 'Body of the notification preferences for learner guide',
   },
+  accountNotificationDescription: {
+    id: 'account.notification.description',
+    defaultMessage: 'Account-level settings apply to all courses. Notifications for individual courses can be changed within each course and will override account-level settings.',
+    description: 'Account notification description',
+  },
+  notificationCadenceDescription: {
+    id: 'notification.cadence.description',
+    defaultMessage: 'Daily notifications are delivered at {dailyTime}. Weekly notifications are delivered at {weeklyTime}.',
+    description: 'Notification cadence description',
+  },
+  notificationDefaultInfo: {
+    id: 'notification.default.info',
+    defaultMessage: 'Notifications for certain activities are enabled by default, as detailed here',
+    description: 'Default notification info',
+  },
+  notificationDropdownlabel: {
+    id: 'notification.dropdown.label',
+    defaultMessage: 'Select notifications for',
+    description: 'Dropdown label',
+  },
+  notificationDropdownApplies: {
+    id: 'notification.dropdown.applies',
+    defaultMessage: 'Applies to all courses',
+    description: 'Dropdown applies to all courses',
+  },
+  notificationCourseDropdownApplies: {
+    id: 'notification.dropdown.course.applies',
+    defaultMessage: 'Overrides account-wide settings',
+    description: 'Dropdown applies to specific course',
+  },
 });
 
 export default messages;

src/tests/MockedPluginSlot.test.jsx

@@ -13,7 +13,7 @@ describe('MockedPluginSlot', () => {
   it('renders as the slot children directly if there is content within', () => {
     render(
       <div role="article">
-        <MockedPluginSlot>
+        <MockedPluginSlot id="test_plugin">
           <q role="note">How much wood could a woodchuck chuck if a woodchuck could chuck wood?</q>
         </MockedPluginSlot>
       </div>,
@@ -21,9 +21,13 @@ describe('MockedPluginSlot', () => {
 
     const component = screen.getByRole('article');
     expect(component).toBeInTheDocument();
-
-    // Direct children
-    const quote = component.querySelector(':scope > q');
+    const slot = component.querySelector('[data-testid="test_plugin"]');
+    expect(slot).toBeInTheDocument();
+    expect(slot).toHaveTextContent('PluginSlot_test_plugin');
+    // Check if the quote is a direct child of the MockedPluginSlot
+    const quote = slot.querySelector('q');
+    expect(quote).toBeInTheDocument();
+    expect(quote).toHaveTextContent('How much wood could a woodchuck chuck if a woodchuck could chuck wood?');
     expect(quote.getAttribute('role')).toBe('note');
   });