feat: add slot to extend the profile fields [Backport #1254 ] (#1375 )

* feat: add ExtendedProfileFieldsSlot component * feat: update ExtendedProfileFieldsSlot documentation and images * fix: format code in ExtendedProfileFieldsSlot README for consistency * feat: add error handling to ExtendedProfileFieldsSlot component * feat: replace ExtendedProfileFieldsSlot with AdditionalProfileFieldsSlot and update documentation * feat: add Example component for AdditionalProfileFieldsSlot and update README * fix: update README to reflect correct slot name and widget ID for AdditionalProfileFieldsSlot * chore: remove unused default_fields.png image
chore: updated NODE_ENV string in .env (#1238 )
2025-12-04 15:51:47 -05:00 · 2025-04-25 15:21:20 +05:00 · 2025-04-24 12:18:00 -04:00 · 2025-04-24 07:28:24 -04:00 · 2025-04-23 16:13:09 -04:00 · 2025-04-23 15:42:58 -04:00
67 changed files with 7024 additions and 2305 deletions
--- a/.env
+++ b/.env
@@ -15,7 +15,7 @@ LOGO_WHITE_URL=''
 SHOW_EMAIL_CHANNEL=''
 LOGOUT_URL=''
 MARKETING_SITE_BASE_URL=''
-NODE_ENV=''
+NODE_ENV='production'
 ORDER_HISTORY_URL=''
 PUBLISHER_BASE_URL=''
 REFRESH_ACCESS_TOKEN_ENDPOINT=''
@@ -32,4 +32,5 @@ APP_ID=
 MFE_CONFIG_API_URL=
 PASSWORD_RESET_SUPPORT_LINK=''
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
+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='[]'
--- a/.env.development
+++ b/.env.development
@@ -33,4 +33,5 @@ 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://support.edx.org/hc/en-us/articles/207206067'
+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='[]'
--- a/.env.test
+++ b/.env.test
@@ -30,4 +30,5 @@ MARKETING_EMAILS_OPT_IN=''
 APP_ID=
 MFE_CONFIG_API_URL=
 LEARNER_FEEDBACK_URL=''
-SUPPORT_URL_TO_UNLINK_SOCIAL_MEDIA_ACCOUNT='https://support.edx.org/hc/en-us/articles/207206067'
+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='[]'
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,4 @@ dist/
 node_modules/
 __mocks__/
 __snapshots__/
+src/i18n/messages/
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -13,12 +13,11 @@ jobs:
        - i18n_extract
        - lint
        - test
-        node: [18, 20]
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
    - run: make requirements
    - run: make test NPM_TESTS=build
    - run: make test NPM_TESTS=${{ matrix.npm-test }}
--- a/18
+++ b/18
@@ -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
--- a/README.rst
+++ b/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
 ===================
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -12,7 +12,8 @@ metadata:
      icon: "Web"
  annotations:
    openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
 spec:
-  owner: group:edx-infinity
+  owner: group:2u-infinity
  type: 'website'
  lifecycle: 'production'
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -1,6 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
-
-nick: acct
-oeps: {}
-openedx-release: {ref: master}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -29,23 +29,23 @@
  ],
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-platform": "8.1.2",
+    "@edx/frontend-component-footer": "^14.6.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.9.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^22.16.0",
    "@tensorflow-models/blazeface": "0.1.0",
    "@tensorflow/tfjs-converter": "4.22.0",
    "@tensorflow/tfjs-core": "4.22.0",
    "bowser": "2.11.0",
    "classnames": "2.5.1",
-    "core-js": "3.38.1",
+    "core-js": "3.41.0",
    "font-awesome": "4.7.0",
    "form-urlencoded": "6.1.5",
    "formdata-polyfill": "4.0.10",
@@ -60,12 +60,12 @@
    "lodash.pick": "4.4.0",
    "lodash.pickby": "4.6.0",
    "lodash.snakecase": "4.1.1",
-    "long": "5.2.3",
+    "long": "5.3.2",
    "memoize-one": "^6.0.0",
    "prop-types": "15.8.1",
-    "qs": "6.13.0",
-    "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",
@@ -80,16 +80,16 @@
    "redux-thunk": "2.4.2",
    "regenerator-runtime": "0.14.1",
    "reselect": "^5.1.1",
-    "universal-cookie": "7.2.1"
+    "universal-cookie": "7.2.2"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "1.2.0",
+    "@edx/browserslist-config": "1.5.0",
    "@edx/reactifex": "2.2.0",
-    "@openedx/frontend-build": "14.1.5",
-    "@testing-library/jest-dom": "6.6.2",
-    "@testing-library/react": "12.1.5",
-    "react-test-renderer": "17.0.2",
+    "@openedx/frontend-build": "^14.3.3",
+    "@testing-library/jest-dom": "6.6.3",
+    "@testing-library/react": "14.3.1",
+    "react-test-renderer": "^18.3.1",
    "reactifex": "1.1.1",
-    "redux-mock-store": "1.5.4"
+    "redux-mock-store": "1.5.5"
  }
 }
--- a/src/account-settings/AccountSettingsPage.jsx
+++ b/src/account-settings/AccountSettingsPage.jsx
@@ -47,10 +47,13 @@ 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';
+import AdditionalProfileFieldsSlot from '../plugin-slots/AdditionalProfileFieldsSlot';

 class AccountSettingsPage extends React.Component {
  constructor(props, context) {
@@ -65,6 +68,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 +124,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 +159,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 +224,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 +503,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');
@@ -695,8 +733,10 @@ class AccountSettingsPage extends React.Component {
            emptyLabel={this.props.intl.formatMessage(messages['account.settings.field.language.proficiencies.empty'])}
            {...editableFieldProps}
          />
+
+          <AdditionalProfileFieldsSlot />
        </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 +772,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 +818,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 +891,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 +915,7 @@ AccountSettingsPage.propTypes = {
    name: PropTypes.string,
    useVerifiedNameForCerts: PropTypes.bool,
    verified_name: PropTypes.string,
+    country: PropTypes.string,
  }),
  drafts: PropTypes.shape({}),
  formErrors: PropTypes.shape({
@@ -906,9 +952,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 +977,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 +992,7 @@ AccountSettingsPage.defaultProps = {
  committedValues: {
    useVerifiedNameForCerts: false,
    verified_name: null,
+    country: '',
  },
  drafts: {},
  formErrors: {},
@@ -949,10 +1005,11 @@ AccountSettingsPage.defaultProps = {
  tpaProviders: [],
  isActive: true,
  secondary_email_enabled: false,
-  nameChangeModal: {},
+  nameChangeModal: {} || false,
  verifiedName: null,
  mostRecentVerifiedName: {},
  verifiedNameHistory: [],
+  countriesCodesList: [],
 };

 export default withLocation(withNavigate(connect(accountSettingsPageSelector, {
--- a/src/account-settings/EditableSelectField.jsx
+++ b/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>
    );
--- a/src/account-settings/JumpNav.jsx
+++ b/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>
  );
 };
--- a/src/account-settings/certificate-preference/test/CertificatePreference.test.jsx
+++ b/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

--- a/src/account-settings/data/actions.js
+++ b/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,
  },
 });

--- a/src/account-settings/data/constants.js
+++ b/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';
--- a/src/account-settings/data/reducers.js
+++ b/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 {
--- a/src/account-settings/data/sagas.js
+++ b/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));
--- a/src/account-settings/data/selectors.js
+++ b/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,
  }),
 );

--- a/src/account-settings/data/service.js
+++ b/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,
  };
 }

--- a/src/account-settings/delete-account/BeforeProceedingBanner.test.jsx
+++ b/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

--- a/src/account-settings/delete-account/ConfirmationModal.test.jsx
+++ b/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

--- a/src/account-settings/delete-account/DeleteAccount.jsx
+++ b/src/account-settings/delete-account/DeleteAccount.jsx
@@ -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://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings">
-            {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="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>
+              {isVerifiedAccount ? null : (
+                <BeforeProceedingBanner
+                  instructionMessageId={optInInstructionMessageId}
+                  supportArticleUrl="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
+                />
+              )}
+              {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.
--- a/src/account-settings/delete-account/PrintingInstructions.jsx
+++ b/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="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UVVOA2/certificates"
    >
      {props.intl.formatMessage(messages['account.settings.delete.account.text.3.link'])}
    </Hyperlink>
--- a/src/account-settings/delete-account/SuccessModal.test.jsx
+++ b/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();
+    });
  });
 });
--- a/src/account-settings/delete-account/snapshots/BeforeProceedingBanner.test.jsx.snap
+++ b/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
--- a/src/account-settings/delete-account/snapshots/ConfirmationModal.test.jsx.snap
+++ b/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
--- a/src/account-settings/delete-account/snapshots/DeleteAccount.test.jsx.snap
+++ b/src/account-settings/delete-account/snapshots/DeleteAccount.test.jsx.snap
@@ -27,8 +27,7 @@ exports[`DeleteAccount should match default section snapshot 1`] = `
  <p>
    <a
      className="pgn__hyperlink default-link standalone-link"
-      href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
-      onClick={[Function]}
+      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
      target="_self"
    >
      Want to change your email, name, or password instead?
@@ -74,8 +73,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
  <p>
    <a
      className="pgn__hyperlink default-link standalone-link"
-      href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
-      onClick={[Function]}
+      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
      target="_self"
    >
      Want to change your email, name, or password instead?
@@ -117,8 +115,7 @@ exports[`DeleteAccount should match unverified account section snapshot 1`] = `
      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]}
+        href="https://support.edx.org/hc/en-us/articles/115000940568-How-do-I-confirm-my-email"
        target="_self"
      >
        activate your account
@@ -156,8 +153,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
  <p>
    <a
      className="pgn__hyperlink default-link standalone-link"
-      href="https://support.edx.org/hc/en-us/sections/115004139268-Manage-Your-Account-Settings"
-      onClick={[Function]}
+      href="https://help.edx.org/edxlearner/s/topic/0TOQq0000001UdZOAU/account-basics"
      target="_self"
    >
      Want to change your email, name, or password instead?
@@ -199,8 +195,7 @@ exports[`DeleteAccount should match unverified account section snapshot 2`] = `
      Before proceeding, please 
      <a
        className="pgn__hyperlink default-link standalone-link"
-        href="https://support.edx.org/hc/en-us/articles/207206067"
-        onClick={[Function]}
+        href="https://help.edx.org/edxlearner/s/article/How-do-I-link-or-unlink-my-edX-account-to-a-social-media-account"
        target="_self"
      >
        unlink all social media accounts
--- a/src/account-settings/delete-account/messages.js
+++ b/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',
--- a/src/account-settings/name-change/test/NameChange.test.jsx
+++ b/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

--- a/src/account-settings/test/AccountSettingsPage.test.jsx
+++ b/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} />));

--- a/src/account-settings/test/JumpNav.test.jsx
+++ b/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();
  });
 });
--- a/src/account-settings/test/snapshots/EditableSelectField.test.jsx.snap
+++ b/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>
--- a/src/account-settings/test/snapshots/JumpNav.test.jsx.snap
+++ b/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>
-`;
--- a/src/account-settings/test/mockData.js
+++ b/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: {},
--- a/src/divider/Divider.jsx
+++ b/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;
--- a/src/divider/index.jsx
+++ b/src/divider/index.jsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as Divider } from './Divider';
--- a/src/id-verification/tests/IdVerificationPage.test.jsx
+++ b/src/id-verification/tests/IdVerificationPage.test.jsx
@@ -7,7 +7,7 @@ import {
  render, act, screen, fireEvent,
 } from '@testing-library/react';
 import { IntlProvider, injectIntl } from '@edx/frontend-platform/i18n';
-import IdVerificationPage from '../IdVerificationPage';
+import IdVerificationPageSlot from '../../plugin-slots/IdVerificationPageSlot';
 import * as selectors from '../data/selectors';

 jest.mock('../data/selectors', () => jest.fn().mockImplementation(() => ({ idVerificationSelector: () => ({}) })));
@@ -47,7 +47,7 @@ jest.mock('../panels/SubmittedPanel', () => function SubmittedPanelMock() {
  return <></>;
 });

-const IntlIdVerificationPage = injectIntl(IdVerificationPage);
+const IntlIdVerificationPage = injectIntl(IdVerificationPageSlot);
 const mockStore = configureStore();

 describe('IdVerificationPage', () => {
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -6,12 +6,13 @@ 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';
-import FooterSlot from '@openedx/frontend-slot-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';

 import configureStore from './data/configureStore';
 import AccountSettingsPage, { NotFoundPage } from './account-settings';
@@ -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,6 +68,7 @@ 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,
--- a/src/index.scss
+++ b/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 {
--- a/src/notification-preferences/EmailCadences.jsx
+++ b/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,
 };

--- a/src/notification-preferences/NotificationCourses.jsx
+++ b/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);
--- a/src/notification-preferences/NotificationCourses.test.jsx
+++ b/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();
-  });
-});
--- a/src/notification-preferences/NotificationCoursesDropdown.jsx
+++ b/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;
--- a/src/notification-preferences/NotificationPreferenceApp.jsx
+++ b/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">
--- a/src/notification-preferences/NotificationPreferenceColumn.jsx
+++ b/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}
--- a/src/notification-preferences/NotificationPreferences.jsx
+++ b/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/managing_notifications.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>
  );
 };

--- a/src/notification-preferences/NotificationPreferences.test.jsx
+++ b/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();
  });
 });
--- a/src/notification-preferences/NotificationSettings.jsx
+++ b/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;
--- a/src/notification-preferences/data/actions.js
+++ b/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 => (
--- a/src/notification-preferences/data/constants.js
+++ b/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',
+});
--- a/src/notification-preferences/data/reducers.js
+++ b/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,
--- a/src/notification-preferences/data/reducers.test.js
+++ b/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: {},
--- a/src/notification-preferences/data/service.js
+++ b/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;
+};
--- a/src/notification-preferences/data/thunk.test.js
+++ b/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());
+  });
+});
--- a/src/notification-preferences/data/thunks.js
+++ b/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,
--- a/src/notification-preferences/messages.js
+++ b/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 {New ORA submission for staff grading}
      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;
--- a/src/plugin-slots/AdditionalProfileFieldsSlot/README.md
+++ b/src/plugin-slots/AdditionalProfileFieldsSlot/README.md
@@ -0,0 +1,87 @@
+# Additional Profile Fields
+
+### Slot ID: `org.openedx.frontend.account.additional_profile_fields.v1`
+
+## Description
+
+This slot is used to replace/modify/hide the additional profile fields in the account page.
+
+## Example
+The following `env.config.jsx` will extend the default fields with a additional custom fields through a simple example component.
+
+![Screenshot of Custom Fields](./images/custom_fields.png)
+
+### Using the Example Component
+Create a file named `env.config.jsx` at the MFE root with this:
+
+```jsx
+import { PLUGIN_OPERATIONS, DIRECT_PLUGIN } from '@openedx/frontend-plugin-framework';
+import Example from './src/plugin-slots/AdditionalProfileFieldsSlot/example';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.account.additional_profile_fields.v1': {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'additional_account_fields',
+            type: DIRECT_PLUGIN,
+            RenderWidget: Example,
+          },
+        },
+      ],
+    },
+  },
+};
+
+export default config;
+```
+
+## Plugin Props
+
+When implementing a plugin for this slot, the following props are available:
+
+### `updateUserProfile`
+- **Type**: Function  
+- **Description**: A function for updating the user's profile with new field values. This handles the API call to persist changes to the backend.
+- **Usage**: Pass an object containing the field updates to be saved to the user's profile preserving the required structure. The function automatically handles the persistence and UI updates.
+
+#### Example
+``` javascript
+updateUserProfile({ extendedProfile: [{ fieldName: 'favorite_color', fieldValue: value }] });
+```
+
+### `profileFieldValues`
+- **Type**: Array of Objects
+- **Description**: Contains the current values of all additional profile fields as an array of objects. Each object has a `fieldName` property (string) and a `fieldValue` property (which can be string, boolean, number, or other data types depending on the field type).
+- **Usage**: Access specific field values by finding the object with the matching `fieldName` and reading its `fieldValue` property. Use array methods like `find()` to locate specific fields.
+
+#### Example
+```json
+[
+    {
+        "fieldName": "favorite_color",
+        "fieldValue": "red"
+    },
+    {
+        "fieldName": "data_authorization",
+        "fieldValue": true
+    },
+]
+```
+
+### `profileFieldErrors`
+- **Type**: Object
+- **Description**: Contains validation errors for profile fields. Each key corresponds to a field name, and the value is the error message.
+- **Usage**: Check for field-specific errors to display validation feedback to users.
+
+### `formComponents`
+- **Type**: Object
+- **Description**: Provides access to reusable form components that are consistent with the rest of the account page styling and behavior. These components follow the platform's design system and include proper validation and accessibility features.
+- **Usage**: Use these components in your custom fields implementation to maintain UI consistency. Available components include `SwitchContent` for managing different UI states.
+
+### `refreshUserProfile`
+- **Type**: Function
+- **Description**: A function that triggers a refresh of the user's profile data. This can be used after updating profile fields to ensure the UI reflects the latest data from the server.
+- **Usage**: Call this function when you need to manually reload the user profile information. Note that `updateUserProfile` typically handles data refresh automatically.
--- a/src/plugin-slots/AdditionalProfileFieldsSlot/example/index.jsx
+++ b/src/plugin-slots/AdditionalProfileFieldsSlot/example/index.jsx
@@ -0,0 +1,104 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Form, Button } from '@openedx/paragon';
+
+/**
+ * Straightforward example of how you could use the pluginProps provided by
+ * the AdditionalProfileFieldsSlot to create a custom profile field.
+ *
+ * Here you can set a 'favorite_color' field with radio buttons and
+ * save it to the user's profile, especifically to their `meta` in
+ * the user's model. For more information, see the documentation:
+ *
+ * https://github.com/openedx/edx-platform/blob/master/openedx/core/djangoapps/user_api/README.rst#persisting-optional-user-metadata
+ */
+const Example = ({
+  updateUserProfile, profileFieldValues, profileFieldErrors, formComponents: { SwitchContent } = {},
+}) => {
+  const [formMode, setFormMode] = useState('default');
+
+  // Get current favorite color from profileFieldValues
+  const currentColorField = profileFieldValues?.find(field => field.fieldName === 'favorite_color');
+  const currentColor = currentColorField ? currentColorField.fieldValue : '';
+
+  const [value, setValue] = useState(currentColor);
+  const handleChange = e => setValue(e.target.value);
+
+  // Get any validation errors for the favorite_color field
+  const colorFieldError = profileFieldErrors?.favorite_color;
+
+  const handleSubmit = () => {
+    try {
+      updateUserProfile({ extendedProfile: [{ fieldName: 'favorite_color', fieldValue: value }] });
+      setFormMode('default');
+    } catch (error) {
+      setFormMode('edit');
+    }
+  };
+
+  return (
+    <div className="border .border-accent-500 p-3">
+      <h3 className="h3">Example Additional Profile Fields Slot</h3>
+
+      <SwitchContent
+        expression={formMode}
+        cases={{
+          default: (
+            <>
+              <h3 className="text-muted">
+                {value ? `Selected value: ${value}` : 'No color selected'}
+              </h3>
+              <Button onClick={() => setFormMode('edit')}>Edit</Button>
+            </>
+          ),
+          edit: (
+            <>
+              <Form.Group>
+                <Form.Label>Which Color?</Form.Label>
+                <Form.RadioSet
+                  name="colors"
+                  onChange={handleChange}
+                  value={value}
+                  isInvalid={!!colorFieldError}
+                >
+                  <Form.Radio value="red">Red</Form.Radio>
+                  <Form.Radio value="green">Green</Form.Radio>
+                  <Form.Radio value="blue">Blue</Form.Radio>
+                </Form.RadioSet>
+                {colorFieldError && (
+                  <Form.Control.Feedback type="invalid">
+                    {colorFieldError}
+                  </Form.Control.Feedback>
+                )}
+              </Form.Group>
+
+              <Button onClick={handleSubmit} disabled={!value}>
+                Save
+              </Button>
+            </>
+          ),
+        }}
+      />
+
+    </div>
+  );
+};
+Example.propTypes = {
+  updateUserProfile: PropTypes.func.isRequired,
+  profileFieldValues: PropTypes.arrayOf(
+    PropTypes.shape({
+      fieldName: PropTypes.string.isRequired,
+      fieldValue: PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.bool,
+        PropTypes.number,
+      ]).isRequired,
+    }),
+  ),
+  profileFieldErrors: PropTypes.objectOf(PropTypes.string),
+  formComponents: PropTypes.shape({
+    SwitchContent: PropTypes.elementType.isRequired,
+  }),
+};
+
+export default Example;
--- a/src/plugin-slots/AdditionalProfileFieldsSlot/images/custom_fields.png
+++ b/src/plugin-slots/AdditionalProfileFieldsSlot/images/custom_fields.png
--- a/src/plugin-slots/AdditionalProfileFieldsSlot/index.jsx
+++ b/src/plugin-slots/AdditionalProfileFieldsSlot/index.jsx
@@ -0,0 +1,32 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { useDispatch, useSelector } from 'react-redux';
+import { camelCaseObject, snakeCaseObject } from '@edx/frontend-platform';
+
+import { fetchSettings, saveSettings } from '../../account-settings/data/actions';
+
+import SwitchContent from '../../account-settings/SwitchContent';
+
+const AdditionalProfileFieldsSlot = () => {
+  const dispatch = useDispatch();
+  const extendedProfileValues = useSelector((state) => state.accountSettings.values.extended_profile);
+  const errors = useSelector((state) => state.accountSettings.errors);
+
+  const pluginProps = {
+    refreshUserProfile: (username) => dispatch(fetchSettings(username)),
+    updateUserProfile: (params) => dispatch(saveSettings(null, null, snakeCaseObject(params))),
+    profileFieldValues: camelCaseObject(extendedProfileValues),
+    profileFieldErrors: errors,
+    formComponents: {
+      SwitchContent,
+    },
+  };
+
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.account.additional_profile_fields.v1"
+      pluginProps={pluginProps}
+    />
+  );
+};
+
+export default AdditionalProfileFieldsSlot;
--- a/src/plugin-slots/FooterSlot/README.md
+++ b/src/plugin-slots/FooterSlot/README.md
@@ -1,12 +1,15 @@
 # Footer Slot

-### Slot ID: `footer_slot`
+### Slot ID: `org.openedx.frontend.layout.footer.v1`
+
+### Slot ID Aliases
+* `footer_slot`

 ## Description

 This slot is used to replace/modify/hide the footer.

-The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/tree/master/src/components/footer-slot). 
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/). 

 ## Example

@@ -23,7 +26,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    footer_slot: {
+    'org.openedx.frontend.layout.footer.v1': {
      plugins: [
        {
          // Hide the default footer
--- a/src/plugin-slots/IdVerificationPageSlot/README.md
+++ b/src/plugin-slots/IdVerificationPageSlot/README.md
@@ -1,6 +1,9 @@
-# Footer Slot
+# ID Verification Page Slot

-### Slot ID: `id_verification_page_plugin`
+### Slot ID: `org.openedx.frontend.account.id_verification_page.v1`
+
+### Slot ID Aliases
+* `id_verification_page_plugin`

 ## Description

@@ -19,13 +22,13 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame

 const config = {
  pluginSlots: {
-    id_verification_page_plugin: {
+    'org.openedx.frontend.account.id_verification_page.v1': {
      plugins: [
        {
          // Insert a custom IDV Page
          op: PLUGIN_OPERATIONS.Insert,
          widget: {
-            id: 'id_verification_page_plugin',
+            id: 'custom_id_verification_page',
            type: DIRECT_PLUGIN,
            RenderWidget: () => (
              <div>
--- a/src/plugin-slots/IdVerificationPageSlot/index.jsx
+++ b/src/plugin-slots/IdVerificationPageSlot/index.jsx
@@ -2,7 +2,10 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import IdVerificationPage from '../../id-verification';

 const IdVerificationPageSlot = () => (
-  <PluginSlot id="id_verification_page_plugin">
+  <PluginSlot
+    id="org.openedx.frontend.account.id_verification_page.v1"
+    idAliases={['id_verification_page_plugin']}
+  >
    <IdVerificationPage />
  </PluginSlot>
 );
--- a/src/plugin-slots/README.md
+++ b/src/plugin-slots/README.md
@@ -1,4 +1,5 @@
 # `frontend-app-account` Plugin Slots

-* [`footer_slot`](./FooterSlot/)
-* [`id_verification_page_plugin`](./IdVerificationPageSlot/)
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
+* [`org.openedx.frontend.account.id_verification_page.v1`](./IdVerificationPageSlot/)
+* [`org.openedx.frontend.account.additional_profile_fields.v1`](./AdditionalProfileFieldsSlot/)
--- a/src/tests/MockedPluginSlot.test.jsx
+++ b/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');
  });
Author	SHA1	Message	Date
Brayan Cerón	db7c7babd7	feat: add slot to extend the profile fields [Backport #1254 ] (#1375 ) * feat: add ExtendedProfileFieldsSlot component * feat: update ExtendedProfileFieldsSlot documentation and images * fix: format code in ExtendedProfileFieldsSlot README for consistency * feat: add error handling to ExtendedProfileFieldsSlot component * feat: replace ExtendedProfileFieldsSlot with AdditionalProfileFieldsSlot and update documentation * feat: add Example component for AdditionalProfileFieldsSlot and update README * fix: update README to reflect correct slot name and widget ID for AdditionalProfileFieldsSlot * chore: remove unused default_fields.png image	2025-12-04 15:51:47 -05:00
Awais Ansari	0e1574dba7	chore: updated NODE_ENV string in .env (#1238 )	2025-04-25 15:21:20 +05:00
Brian Smith	0d45ae6599	feat: import `FooterSlot` from component package instead of slot package (#1230 )	2025-04-24 12:18:00 -04:00
Brian Smith	78246cf26b	feat: standardize slot ids (#1237 )	2025-04-24 07:28:24 -04:00
renovate[bot]	ca193563ec	fix(deps): update dependency @edx/frontend-component-header to v6.4.0 (#1236 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-23 16:13:09 -04:00
Awais Ansari	d0efd35e66	Revert "fix: removed extra api call and strict mode (#1234 )" (#1235 ) This reverts commit `375b704eef`.	2025-04-23 15:42:58 -04:00
sundasnoreen12	375b704eef	fix: removed extra api call and strict mode (#1234 ) * fix: removed extra api call and strict mode * fix: added default values	2025-04-23 22:13:06 +05:00
Hassan Raza	ae121358db	fix: Update ORA notification display title (#1233 )	2025-04-23 16:09:29 +05:00
renovate[bot]	92b7c58af7	fix(deps): update dependency long to v5.3.2 (#1232 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-21 05:46:58 +00:00
renovate[bot]	a4097fe6fc	fix(deps): update dependency @openedx/frontend-slot-footer to v1.2.1 (#1231 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-21 05:46:49 +00:00
Awais Ansari	397f688300	fix: scrolling issue for active menu item	2025-04-16 15:29:09 +05:00
Awais Ansari	8bd4b1b9a8	chore: updated package-lock file	2025-04-16 15:29:09 +05:00
Awais Ansari	54d029c181	test: updated test case snapshots	2025-04-16 15:29:09 +05:00
Hassan Raza	e6a4636147	fix: Update course preference title for ora submission (#1222 )	2025-04-16 15:29:09 +05:00
sundasnoreen12	efb4162926	test: added test cases	2025-04-16 15:29:09 +05:00
sundasnoreen12	6061232e10	refactor: refactor code	2025-04-16 15:29:09 +05:00
sundasnoreen12	ba6b8c8f9b	refactor: refactor code	2025-04-16 15:29:09 +05:00
sundasnoreen12	9c16ba0075	fix: fixed course level preference issue	2025-04-16 15:29:09 +05:00
sundasnoreen12	02b987909b	fix: fixed varaible name	2025-04-16 15:29:09 +05:00
sundasnoreen12	1bcc54bb05	fix: added changes for restricted country	2025-04-16 15:29:09 +05:00
sundasnoreen12	5a5b0b905b	fix: removed unused selector	2025-04-16 15:29:09 +05:00
sundasnoreen12	44ed49c7d2	refactor: refactored code	2025-04-16 15:29:09 +05:00
sundasnoreen12	386baa3840	fix: changed frequency from never to daily on email preference change	2025-04-16 15:29:09 +05:00
Awais Ansari	f1a56ad6bc	fix: updated notifications section url (#1185 ) * fix: updated notifiations section url * fix: updated test cases	2025-04-16 15:29:09 +05:00
Awais Ansari	465bb9f7a0	feat: added notification preferences settings at account level (#1159 ) * feat: added notification preferences settings at account level * fix: fixed test cases * feat: added api for account notification type * fix: fixed test cases and label * test: added update account preference test case * fix: fixed issue to update email cadence for account notification type * refactor: updated time * fix: fixed mixed cadence issue * fix: fixed border issue when no preferences * refactor: refactor code --------- Co-authored-by: sundasnoreen12 <sundasnoreen12@gmail.com>	2025-04-16 15:29:09 +05:00
Muhammad Adeel Tajamul	f9b7525d44	refactor: moved unable to delete into component (#1177 )	2025-04-16 15:29:09 +05:00
Muhammad Adeel Tajamul	c7e82295c2	feat: added feature to hide delete button for countries (#1176 )	2025-04-16 15:29:09 +05:00
sundasnoreen12	e02cf28b54	fix: rebase with 2u	2025-04-16 15:29:09 +05:00
Awais Ansari	18c51e8e73	fix: translation and console errors (#1166 )	2025-04-16 15:29:09 +05:00
ayesha waris	88b444e796	chore: rebase with master (#1158 ) * fix: fixed support urls (#1155) * fix(deps): update dependency @edx/frontend-component-header to v5.7.1 (#1156) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix(deps): update dependency @openedx/frontend-slot-footer to v1.0.6 (#1157) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> * fix: fixed certificates url --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-04-16 15:29:09 +05:00
Awais Ansari	71635b33b6	feat: added country disabling feature (#1116 ) * feat: added country disabling feature * refactor: removed isDisabledCountry additional call	2025-04-16 15:29:09 +05:00
Hunia Fatima	515890d5ef	feat: upgrade react to v18 (#1220 )	2025-04-04 11:29:11 -04:00
renovate[bot]	c2960e1232	chore(deps): update dependency @openedx/frontend-build to v14.4.1 (#1223 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-31 06:44:07 +00:00
Brian Smith	17e12f7f87	chore(deps): update `@openedx` dependencies to versions that support React 18 (#1218 ) * chore(deps): update `@openedx` dependencies to versions that support React 18 * fix(tests): update `JumpNav` tests * update JumpNav tests to use RTL render/screen instead of `react-test-renderer` snapshots * update test names to reflect "optional information" not appearing in either scenario * the only difference in the snapshot `ffc39868e9/src/account-settings/test/__snapshots__/JumpNav.test.jsx.snap` is the delete account link * chore(tests): update snapshots * chore: fix lint	2025-03-25 12:22:13 -04:00
renovate[bot]	ffc39868e9	fix(deps): update react-router monorepo to v6.30.0 (#1217 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-24 07:32:44 +00:00
renovate[bot]	9ba01af816	fix(deps): update dependency qs to v6.14.0 (#1216 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-24 07:32:39 +00:00
Sarina Canelake	fc222cc76c	Update README with Tutor instructions; update outdated edx.rtd.io links (#1203 ) * docs: remove Devstack mentions from README instructions * docs: Update edx.rtd.io links to point at new homes * docs: Apply code review suggestions Co-authored-by: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com> --------- Co-authored-by: Brian Smith <112954497+brian-smith-tcril@users.noreply.github.com>	2025-03-21 15:15:04 +00:00
renovate[bot]	99a39568de	fix(deps): update dependency @openedx/frontend-plugin-framework to v1.6.0 (#1210 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-17 06:23:54 +00:00
renovate[bot]	9ce3cbfddd	fix(deps): update dependency long to v5.3.1 (#1211 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-17 06:23:47 +00:00
renovate[bot]	55a72b3f6e	fix(deps): update dependency core-js to v3.41.0 (#1207 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-10 07:26:24 +00:00
renovate[bot]	597004c82e	fix(deps): update dependency @openedx/frontend-slot-footer to v1.1.0 (#1206 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-10 07:25:41 +00:00
renovate[bot]	3458b6f410	chore(deps): update dependency @openedx/frontend-build to v14.3.2 (#1204 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-10 05:52:22 +00:00
renovate[bot]	b70b4a796f	fix(deps): update dependency @openedx/frontend-plugin-framework to v1.5.0 (#1200 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-03 06:16:01 +00:00
renovate[bot]	d76945d2f2	fix(deps): update dependency @edx/frontend-platform to v8.2.1 (#1199 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-03-03 06:15:48 +00:00
renovate[bot]	7ee34f7d9a	chore(deps): update dependency @openedx/frontend-build to v14.3.1 (#1196 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-02-24 06:00:19 +00:00
renovate[bot]	96c619cab8	fix(deps): update dependency @edx/frontend-component-header to v5.8.3 (#1195 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-02-24 06:00:08 +00:00
renovate[bot]	9eda5e588c	chore(deps): update dependency @edx/browserslist-config to v1.5.0 (#1191 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-02-17 05:26:57 +00:00
Feanil Patel	3aff0e03e0	Merge pull request #1190 from openedx/feanil-patch-1 docs: Update catalog-info.yaml	2025-02-14 11:12:57 -05:00
Feanil Patel	852358f243	docs: Update catalog-info.yaml This team was replace/renamed at some point but the catalog file was not updated.	2025-02-14 11:09:12 -05:00
Feanil Patel	5ffd17db4c	Merge pull request #1186 from salman2013/salman/update-catalog-info-file Update catalog-info-file for release data.	2025-01-24 09:40:22 -05:00
renovate[bot]	6f3c9616d6	fix(deps): update dependency long to v5.2.4 (#1188 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-01-20 05:37:47 +00:00
renovate[bot]	5f4812ed47	fix(deps): update dependency @edx/frontend-platform to v8.1.5 (#1187 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-01-20 05:33:41 +00:00
salman2013	d694b5c428	chore: update catalog-info-file for release data and remove openedx.yaml	2025-01-14 15:21:34 +05:00
renovate[bot]	6b73130e9b	fix(deps): update font awesome to v6.7.2 (#1183 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-01-06 07:08:39 +00:00
renovate[bot]	d608f3947e	fix(deps): update dependency @edx/frontend-platform to v8.1.4 (#1182 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2025-01-06 07:08:29 +00:00
renovate[bot]	db83838d5e	fix(deps): update dependency @openedx/paragon to v22.13.0 (#1180 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-30 08:07:33 +00:00
renovate[bot]	004cdf35f1	fix(deps): update dependency core-js to v3.39.0 (#1181 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-30 08:07:20 +00:00
renovate[bot]	6cb015e49d	chore(deps): update dependency @edx/browserslist-config to v1.4.0 (#1179 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-23 06:14:39 +00:00
renovate[bot]	c5ae2c40d7	fix(deps): update dependency @openedx/frontend-slot-footer to v1.0.7 (#1178 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-23 06:14:32 +00:00
renovate[bot]	46edd0cb70	fix(deps): update dependency @edx/frontend-platform to v8.1.3 (#1175 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-16 06:16:09 +00:00
renovate[bot]	2c6b5c34a9	fix(deps): update dependency @edx/frontend-component-header to v5.8.2 (#1174 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-16 06:15:57 +00:00
renovate[bot]	b000d2e048	fix(deps): update dependency @edx/frontend-component-header to v5.8.1 (#1173 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-09 05:35:05 +00:00
renovate[bot]	437fba16fe	chore(deps): update dependency @openedx/frontend-build to v14.2.2 (#1172 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-09 05:34:44 +00:00
renovate[bot]	c4038b4085	fix(deps): update dependency @openedx/paragon to v22.10.0 (#1170 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-02 07:12:14 +00:00
renovate[bot]	496ff21015	fix(deps): update dependency @openedx/frontend-plugin-framework to v1.4.1 (#1169 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-12-02 07:11:53 +00:00
renovate[bot]	23e16ac6e0	fix(deps): update dependency @edx/frontend-component-header to v5.8.0 (#1163 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-27 09:42:18 +00:00
renovate[bot]	d8c5762ee2	chore(deps): update dependency @openedx/frontend-build to v14.2.0 (#1162 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-27 09:42:02 +00:00
sundasnoreen12	4d2d520234	Merge pull request #1165 from openedx/sundas/INF-1655 fix: fixed url break issue	2024-11-27 14:38:48 +05:00
sundasnoreen12	b094722772	fix: fixed url break issue	2024-11-26 17:01:27 +05:00
renovate[bot]	a9f061f10c	fix(deps): update dependency qs to v6.13.1 (#1161 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-18 06:51:21 +00:00
renovate[bot]	4eb5d4effc	fix(deps): update dependency @edx/frontend-component-header to v5.7.2 (#1160 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-18 06:49:32 +00:00
renovate[bot]	925bcce81c	fix(deps): update dependency @openedx/frontend-slot-footer to v1.0.6 (#1157 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-11 07:12:06 +00:00
renovate[bot]	f44e03c7c8	fix(deps): update dependency @edx/frontend-component-header to v5.7.1 (#1156 ) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>	2024-11-11 07:11:39 +00:00
ayesha waris	999988dd88	fix: fixed support urls (#1155 )	2024-11-08 14:12:27 +05:00
renovate[bot]	7ec1226965	fix(deps): update dependency @openedx/frontend-plugin-framework to v1.4.0	2024-11-04 06:24:25 +00:00
renovate[bot]	5b00275371	fix(deps): update dependency @edx/frontend-component-header to v5.7.0	2024-11-04 06:24:10 +00:00
renovate[bot]	30c1158775	fix(deps): update dependency universal-cookie to v7.2.2	2024-11-04 05:09:20 +00:00
renovate[bot]	c196b60b39	chore(deps): update dependency @testing-library/jest-dom to v6.6.3	2024-11-04 05:09:08 +00:00
Bilal Qamar	3022a267b1	test: Remove support for Node 18 (#1112 )	2024-10-31 15:14:19 -04:00
renovate[bot]	19aacdfaf9	chore(deps): update dependency redux-mock-store to v1.5.5	2024-10-28 04:23:38 +00:00