feat: update to header with new FPF pluginProps (#1525 )

2024-11-22 15:21:03 -05:00
318 changed files with 9178 additions and 13512 deletions
--- a/.env
+++ b/.env
@@ -48,4 +48,3 @@ TWITTER_HASHTAG=''
 TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
-SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
--- a/.env.development
+++ b/.env.development
@@ -8,7 +8,7 @@ APP_ID='learning'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-college-credit-or-credit-hours-for-my-course'
+CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_credit_courses.html#keep-track-of-credit-requirements'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
@@ -50,4 +50,3 @@ SESSION_COOKIE_DOMAIN='localhost'
 CHAT_RESPONSE_URL='http://localhost:18000/api/learning_assistant/v1/course_id'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
-SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
--- a/.env.test
+++ b/.env.test
@@ -8,7 +8,7 @@ APP_ID='learning'
 BASE_URL='http://localhost:2000'
 CONTACT_URL='http://localhost:18000/contact'
 CREDENTIALS_BASE_URL='http://localhost:18150'
-CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-college-credit-or-credit-hours-for-my-course'
+CREDIT_HELP_LINK_URL='https://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_credit_courses.html#keep-track-of-credit-requirements'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
@@ -47,4 +47,3 @@ TWITTER_HASHTAG='myedxjourney'
 TWITTER_URL='https://twitter.com/edXOnline'
 USER_INFO_COOKIE_NAME='edx-user-info'
 PRIVACY_POLICY_URL='http://localhost:18000/privacy'
-SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
--- a/.github/workflows/validate.yml
+++ b/.github/workflows/validate.yml
@@ -9,28 +9,35 @@ on:
 jobs:
  tests:
    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [18, 20]
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node }}
    - run: make validate.ci
    - name: Archive code coverage results
      uses: actions/upload-artifact@v4
      with:
-        name: code-coverage-report
+        name: code-coverage-report-${{ matrix.node }}
+        # When we're only using Node 20, replace the line above with the following:
+        # name: code-coverage-report
        path: coverage/*.*
  coverage:
    runs-on: ubuntu-latest
    needs: tests
    steps:
-    - uses: actions/checkout@v4
+    - uses: actions/checkout@v3
    - name: Download code coverage results
      uses: actions/download-artifact@v4
      with:
-        name: code-coverage-report
+        name: code-coverage-report-20
+        # When we're only using Node 20, replace the line above with the following:
+        # name: code-coverage-report
    - name: Upload coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v4
      with:
        fail_ci_if_error: true
        token: ${{ secrets.CODECOV_TOKEN }}
--- a/.husky/_/.gitignore
+++ b/.husky/_/.gitignore
@@ -0,0 +1 @@
+*
--- a/.husky/_/husky.sh
+++ b/.husky/_/husky.sh
@@ -0,0 +1,31 @@
+#!/bin/sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
+  }
+
+  readonly hook_name="$(basename "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  export readonly husky_skip_init=1
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+  fi
+
+  exit $exitCode
+fi
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint
--- a/README.rst
+++ b/README.rst
@@ -41,8 +41,9 @@ Cloning and Setup

    git clone https://github.com/openedx/frontend-app-learning.git

-2. Use the version of Node specified in ``.nvmrc``.
+2. Use node v20.x.

+  The current version of the micro-frontend build scripts supports node 18.
  Using other major versions of node *may* work, but this is unsupported.  For
  convenience, this repository includes an ``.nvmrc`` file to help in setting the
  correct node version via `nvm <https://github.com/nvm-sh/nvm>`_.
@@ -130,7 +131,7 @@ Deployment

 The Learning MFE is similar to all the other Open edX MFEs. Read the Open
 edX Developer Guide's section on
-`MFE applications <https://openedx.github.io/frontend-platform/>`_.
+`MFE applications <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html>`_.

 Plugins
 =======
@@ -144,7 +145,7 @@ Environment Variables
 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://openedx.github.io/frontend-platform/>`_.
+`Required Environment Variables <https://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`_.

 The learning micro-frontend also supports the following additional variables:

--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -12,7 +12,6 @@ metadata:
      icon: "Web"
  annotations:
    openedx.org/arch-interest-groups: ""
-    openedx.org/release: "master"
 spec:
  owner: group:committers-frontend-app-learning
  type: 'website'
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,10 @@
+# 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
+
+oeps: {}
+owner: edx/platform-core-tnl
+openedx-release:
+  # The openedx-release key is described in OEP-10:
+  #   https://open-edx-proposals.readthedocs.io/en/latest/oep-0010-proc-openedx-releases.html
+  # The FAQ might also be helpful: https://openedx.atlassian.net/wiki/spaces/COMM/pages/1331268879/Open+edX+Release+FAQ
+  ref: master
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -15,11 +15,12 @@
    "i18n_extract": "fedx-scripts formatjs extract",
    "lint": "fedx-scripts eslint --ext .js --ext .jsx --ext .ts --ext .tsx .",
    "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
+    "prepare": "husky install",
+    "postinstall": "patch-package",
    "snapshot": "fedx-scripts jest --updateSnapshot",
    "start": "fedx-scripts webpack-dev-server --progress",
    "dev": "PUBLIC_PATH=/learning/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
    "test": "fedx-scripts jest --coverage --passWithNoTests",
-    "test:watch": "fedx-scripts jest --watch --passWithNoTests",
    "types": "tsc --noEmit"
  },
  "author": "edX",
@@ -33,41 +34,43 @@
  },
  "dependencies": {
    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/browserslist-config": "1.5.0",
-    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-lib-learning-assistant": "^2.20.0",
-    "@edx/frontend-lib-special-exams": "^3.5.0",
-    "@edx/frontend-platform": "^8.3.1",
+    "@edx/browserslist-config": "1.2.0",
+    "@edx/frontend-component-header": "^5.8.0",
+    "@edx/frontend-lib-learning-assistant": "^2.2.4",
+    "@edx/frontend-lib-special-exams": "^3.1.3",
+    "@edx/frontend-platform": "^8.0.0",
    "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
+    "@edx/react-unit-test-utils": "3.0.0",
    "@fortawesome/free-brands-svg-icons": "5.15.4",
    "@fortawesome/free-regular-svg-icons": "5.15.4",
    "@fortawesome/free-solid-svg-icons": "5.15.4",
    "@fortawesome/react-fontawesome": "^0.1.4",
-    "@openedx/frontend-build": "^14.5.0",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^22.16.0",
+    "@openedx/frontend-build": "14.1.2",
+    "@openedx/frontend-plugin-framework": "^1.2.1",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.3.0",
    "@popperjs/core": "2.11.8",
-    "@reduxjs/toolkit": "1.9.7",
+    "@reduxjs/toolkit": "1.8.1",
    "buffer": "^6.0.3",
    "classnames": "2.5.1",
-    "copy-webpack-plugin": "^12.0.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "husky": "7.0.4",
    "joi": "^17.11.0",
    "js-cookie": "3.0.5",
    "lodash": "^4.17.21",
    "lodash.camelcase": "4.3.0",
+    "patch-package": "^8.0.0",
    "postcss-loader": "^8.1.1",
    "prop-types": "15.8.1",
    "query-string": "^7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
    "react-helmet": "6.1.0",
    "react-redux": "7.2.9",
    "react-router": "6.15.0",
    "react-router-dom": "6.15.0",
    "react-share": "4.4.1",
-    "redux": "4.2.1",
+    "redux": "4.1.2",
    "reselect": "4.1.8",
    "sass": "^1.79.3",
    "sass-loader": "^16.0.2",
@@ -77,10 +80,11 @@
  "devDependencies": {
    "@edx/reactifex": "2.2.0",
    "@pact-foundation/pact": "^13.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
-    "@testing-library/user-event": "14.6.1",
-    "axios-mock-adapter": "2.1.0",
+    "@testing-library/jest-dom": "5.17.0",
+    "@testing-library/react": "12.1.5",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "13.5.0",
+    "axios-mock-adapter": "2.0.0",
    "bundlewatch": "^0.4.0",
    "eslint-import-resolver-webpack": "^0.13.9",
    "jest": "^29.7.0",
@@ -92,7 +96,7 @@
    "files": [
      {
        "path": "dist/*.js",
-        "maxSize": "1450kB"
+        "maxSize": "1300kB"
      }
    ],
    "normalizeFilenames": "^.+?(\\..+?)\\.\\w+$"
--- a/patches/@openedx+frontend-build+13.0.30.patch
+++ b/patches/@openedx+frontend-build+13.0.30.patch
@@ -0,0 +1,36 @@
+diff --git a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
+index 2879dd9..9efd0fc 100644
+--- a/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
+++ b/node_modules/@openedx/frontend-build/config/webpack.prod.config.js
+@@ -12,6 +12,7 @@ const NewRelicSourceMapPlugin = require('@edx/new-relic-source-map-webpack-plugi
+ const HtmlWebpackPlugin = require('html-webpack-plugin');
+ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+ const path = require('path');
+const fs = require('fs');
+ const PostCssAutoprefixerPlugin = require('autoprefixer');
+ const PostCssRTLCSS = require('postcss-rtlcss');
+ const PostCssCustomMediaCSS = require('postcss-custom-media');
+@@ -23,6 +24,23 @@ const HtmlWebpackNewRelicPlugin = require('../lib/plugins/html-webpack-new-relic
+ const commonConfig = require('./webpack.common.config');
+ const presets = require('../lib/presets');
+ 
+/**
+ * This condition confirms whether the configuration for the MFE has switched to a JS-based configuration
+ * as previously implemented in frontend-build and frontend-platform. If the environment variable JS_CONFIG_FILEPATH
+ * exists, then an env.config.js(x) file will be copied from the location referenced by the environment variable to the
+ * root directory. Its env variables can be accessed with getConfig().
+ *
+ * https://github.com/openedx/frontend-build/blob/master/docs/0002-js-environment-config.md
+ * https://github.com/openedx/frontend-platform/blob/master/docs/decisions/0007-javascript-file-configuration.rst
+ */
+
+const envConfigPath = process.env.JS_CONFIG_FILEPATH;
+
+if (envConfigPath) {
+  const envConfigFilename = envConfigPath.slice(envConfigPath.indexOf('env.config'));
+  fs.copyFileSync(envConfigPath, envConfigFilename);
+}
+
+ // Add process env vars. Currently used only for setting the PUBLIC_PATH.
+ dotenv.config({
+   path: path.resolve(process.cwd(), '.env'),
--- a/public/index.html
+++ b/public/index.html
@@ -9,9 +9,6 @@
    <% if (htmlWebpackPlugin.options.OPTIMIZELY_PROJECT_ID) { %>
      <script src="https://www.edx.org/optimizelyjs/<%= htmlWebpackPlugin.options.OPTIMIZELY_PROJECT_ID %>.js"></script>
    <% } %>
-    <% if (htmlWebpackPlugin.options.META_TAG_ROBOTS_CONTENT_ATTR) { %>
-      <meta name="robots" content="<%= htmlWebpackPlugin.options.META_TAG_ROBOTS_CONTENT_ATTR %>">
-    <% } %>
  </head>
  <body>
    <div id="root"></div>
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -1,224 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<React Strict Mode>
-  <ErrorPage
-    message="test-error-message"
-  />
-</React Strict Mode>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<React Strict Mode>
-  <AppProvider
-    store={
-      {
-        "dispatch": [Function],
-        "getState": [Function],
-        "replaceReducer": [Function],
-        "subscribe": [Function],
-        Symbol(Symbol.observable): [Function],
-      }
-    }
-  >
-    <HelmetWrapper
-      defer={true}
-      encodeSpecialCharacters={true}
-    >
-      <link
-        href="favicon-url"
-        rel="shortcut icon"
-        type="image/x-icon"
-      />
-    </HelmetWrapper>
-    <PathFixesProvider>
-      <NoticesProvider>
-        <UserMessagesProvider>
-          <Routes>
-            <Route
-              element={
-                <PageWrap>
-                  <Page Not Found />
-                </PageWrap>
-              }
-              path="*"
-            />
-            <Route
-              element={
-                <PageWrap>
-                  <Goal Unsubscribe />
-                </PageWrap>
-              }
-              path="/goal-unsubscribe/:token"
-            />
-            <Route
-              element={
-                <PageWrap>
-                  <Courseware Redirect Landing Page />
-                </PageWrap>
-              }
-              path="/redirect/*"
-            />
-            <Route
-              element={
-                <PageWrap>
-                  <Preferences Unsubscribe />
-                </PageWrap>
-              }
-              path="/preferences-unsubscribe/:userToken/:updatePatch"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Course Access Error Page />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/access-denied"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="outline"
-                  >
-                    <Outline Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/home"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="lti_live"
-                  >
-                    <Live Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/live"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="dates"
-                  >
-                    <Dates Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/dates"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="discussion"
-                  >
-                    <Discussion Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/discussion/:path/*"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    isProgressTab={true}
-                    slice="courseHome"
-                    tab="progress"
-                  >
-                    <Progress Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/progress/:targetUserId/"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    isProgressTab={true}
-                    slice="courseHome"
-                    tab="progress"
-                  >
-                    <Progress Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/progress"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseware"
-                    tab="courseware"
-                  >
-                    <Course Exit />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/course-end"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/:sequenceId/:unitId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/:sequenceId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/preview/course/:courseId/:sequenceId/:unitId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/preview/course/:courseId/:sequenceId"
-            />
-          </Routes>
-        </UserMessagesProvider>
-      </NoticesProvider>
-    </PathFixesProvider>
-  </AppProvider>
-</React Strict Mode>
-`;
--- a/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
+++ b/src/alerts/access-expiration-alert/AccessExpirationAlert.jsx
@@ -1,13 +1,14 @@
 import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { FormattedMessage, FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  FormattedMessage, FormattedDate, injectIntl, intlShape,
+} from '@edx/frontend-platform/i18n';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { Info } from '@openedx/paragon/icons';

 import messages from './messages';

-const AccessExpirationAlert = ({ payload }) => {
-  const intl = useIntl();
+const AccessExpirationAlert = ({ intl, payload }) => {
  const {
    accessExpiration,
    courseId,
@@ -118,6 +119,7 @@ const AccessExpirationAlert = ({ payload }) => {
 };

 AccessExpirationAlert.propTypes = {
+  intl: intlShape.isRequired,
  payload: PropTypes.shape({
    accessExpiration: PropTypes.shape({
      expirationDate: PropTypes.string.isRequired,
@@ -132,4 +134,4 @@ AccessExpirationAlert.propTypes = {
  }).isRequired,
 };

-export default AccessExpirationAlert;
+export default injectIntl(AccessExpirationAlert);
--- a/src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.jsx
+++ b/src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { WarningFilled } from '@openedx/paragon/icons';
@@ -7,8 +7,7 @@ import { WarningFilled } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 import genericMessages from './messages';

-const ActiveEnterpriseAlert = ({ payload }) => {
-  const intl = useIntl();
+const ActiveEnterpriseAlert = ({ intl, payload }) => {
  const { text, courseId } = payload;
  const changeActiveEnterprise = (
    <Hyperlink
@@ -39,10 +38,11 @@ const ActiveEnterpriseAlert = ({ payload }) => {
 };

 ActiveEnterpriseAlert.propTypes = {
+  intl: intlShape.isRequired,
  payload: PropTypes.shape({
    text: PropTypes.string,
    courseId: PropTypes.string,
  }).isRequired,
 };

-export default ActiveEnterpriseAlert;
+export default injectIntl(ActiveEnterpriseAlert);
--- a/src/alerts/enrollment-alert/EnrollmentAlert.jsx
+++ b/src/alerts/enrollment-alert/EnrollmentAlert.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Alert, Button } from '@openedx/paragon';
 import { Info, WarningFilled } from '@openedx/paragon/icons';
@@ -11,8 +11,7 @@ import { useModel } from '../../generic/model-store';
 import messages from './messages';
 import useEnrollClickHandler from './clickHook';

-const EnrollmentAlert = ({ payload }) => {
-  const intl = useIntl();
+const EnrollmentAlert = ({ intl, payload }) => {
  const {
    canEnroll,
    courseId,
@@ -59,6 +58,7 @@ const EnrollmentAlert = ({ payload }) => {
 };

 EnrollmentAlert.propTypes = {
+  intl: intlShape.isRequired,
  payload: PropTypes.shape({
    canEnroll: PropTypes.bool,
    courseId: PropTypes.string,
@@ -67,4 +67,4 @@ EnrollmentAlert.propTypes = {
  }).isRequired,
 };

-export default EnrollmentAlert;
+export default injectIntl(EnrollmentAlert);
--- a/src/alerts/logistration-alert/AccountActivationAlert.jsx
+++ b/src/alerts/logistration-alert/AccountActivationAlert.jsx
@@ -9,12 +9,13 @@ import {
  Icon,
 } from '@openedx/paragon';
 import { Check, ArrowForward } from '@openedx/paragon/icons';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { sendActivationEmail } from '../../courseware/data';
 import messages from './messages';

-const AccountActivationAlert = () => {
-  const intl = useIntl();
+const AccountActivationAlert = ({
+  intl,
+}) => {
  const [showModal, setShowModal] = useState(false);
  const [showSpinner, setShowSpinner] = useState(false);
  const [showCheck, setShowCheck] = useState(false);
@@ -124,4 +125,8 @@ const AccountActivationAlert = () => {
  );
 };

-export default AccountActivationAlert;
+AccountActivationAlert.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(AccountActivationAlert);
--- a/src/alerts/logistration-alert/LogistrationAlert.jsx
+++ b/src/alerts/logistration-alert/LogistrationAlert.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { WarningFilled } from '@openedx/paragon/icons';

 import genericMessages from '../../generic/messages';

-const LogistrationAlert = () => {
-  const intl = useIntl();
+const LogistrationAlert = ({ intl }) => {
  const signIn = (
    <Hyperlink
      style={{ textDecoration: 'underline' }}
@@ -44,4 +43,8 @@ const LogistrationAlert = () => {
  );
 };

-export default LogistrationAlert;
+LogistrationAlert.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(LogistrationAlert);
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -13,8 +13,6 @@ export const DECODE_ROUTES = {
    '/course/:courseId/:sequenceId/:unitId',
    '/course/:courseId/:sequenceId',
    '/course/:courseId',
-    '/preview/course/:courseId/:sequenceId/:unitId',
-    '/preview/course/:courseId/:sequenceId',
  ],
  REDIRECT_HOME: 'home/:courseId',
  REDIRECT_SURVEY: 'survey/:courseId',
@@ -48,20 +46,6 @@ export const VERIFIED_MODES = [
  'paid-bootcamp',
 ] as const satisfies readonly string[];

-export const AUDIT_MODES = [
-  'audit',
-  'honor',
-  'unpaid-executive-education',
-  'unpaid-bootcamp',
-] as const satisfies readonly string[];
-
-// In sync with CourseMode.UPSELL_TO_VERIFIED_MODES
-// https://github.com/openedx/edx-platform/blob/master/common/djangoapps/course_modes/models.py#L231
-export const ALLOW_UPSELL_MODES = [
-  'audit',
-  'honor',
-] as const satisfies readonly string[];
-
 export const WIDGETS = {
  DISCUSSIONS: 'DISCUSSIONS',
  NOTIFICATIONS: 'NOTIFICATIONS',
--- a/src/course-home/courseware-search/CoursewareResultsFilter.jsx
+++ b/src/course-home/courseware-search/CoursewareResultsFilter.jsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Tabs, Tab } from '@openedx/paragon';

 import { useParams } from 'react-router';
@@ -13,8 +13,7 @@ const filterTypes = ['text', 'video', 'sequence'];
 const filterOther = 'other';
 const validFilters = [filterAll, ...filterTypes, filterOther];

-export const CoursewareSearchResultsFilter = () => {
-  const intl = useIntl();
+export const CoursewareSearchResultsFilter = ({ intl }) => {
  const { courseId } = useParams();
  const lastSearch = useModel('contentSearchResults', courseId);
  const { filter: filterKeyword, setFilter } = useCoursewareSearchParams();
@@ -74,4 +73,8 @@ export const CoursewareSearchResultsFilter = () => {
  );
 };

-export default CoursewareSearchResultsFilter;
+CoursewareSearchResultsFilter.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearchResultsFilter);
--- a/src/course-home/courseware-search/CoursewareSearch.jsx
+++ b/src/course-home/courseware-search/CoursewareSearch.jsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Alert, Button, Icon, Spinner,
 } from '@openedx/paragon';
@@ -18,8 +18,7 @@ import CoursewareSearchResultsFilterContainer from './CoursewareResultsFilter';
 import { updateModel, useModel } from '../../generic/model-store';
 import { searchCourseContent } from '../data/thunks';

-const CoursewareSearch = ({ ...sectionProps }) => {
-  const { formatMessage } = useIntl();
+const CoursewareSearch = ({ intl, ...sectionProps }) => {
  const { courseId } = useParams();
  const { query: searchKeyword, setQuery, clearSearchParams } = useCoursewareSearchParams();
  const dispatch = useDispatch();
@@ -30,7 +29,6 @@ const CoursewareSearch = ({ ...sectionProps }) => {
    errors,
    total,
  } = useModel('contentSearchResults', courseId);
-  const dialogRef = useRef();

  useLockScroll();

@@ -46,8 +44,7 @@ const CoursewareSearch = ({ ...sectionProps }) => {
        searchKeyword: '',
        results: [],
        errors: undefined,
-        loading:
-        false,
+        loading: false,
      },
    }));
  };
@@ -69,46 +66,20 @@ const CoursewareSearch = ({ ...sectionProps }) => {
    setQuery(value);
  };

+  useEffect(() => {
+    handleSubmit(searchKeyword);
+  }, []);
+
  const handleOnChange = (value) => {
    if (value === searchKeyword) { return; }
    if (!value) { clearSearch(); }
  };

-  const close = () => {
+  const handleSearchCloseClick = () => {
    clearSearch();
    dispatch(setShowSearch(false));
  };

-  const handlePopState = () => close();
-
-  const handleBackdropClick = function (event) {
-    if (event.target === dialogRef.current) {
-      dialogRef.current.close();
-    }
-  };
-
-  useEffect(() => {
-    // We need this to keep the dialog reference when unmounting.
-    const dialog = dialogRef.current;
-
-    // Open the dialog as a modal on render to confine focus within it.
-    dialogRef.current.showModal();
-
-    if (searchKeyword) {
-      handleSubmit(searchKeyword); // In case it's opened with a search link, we run the search.
-    }
-
-    const controller = new AbortController();
-    const { signal } = controller;
-
-    window.addEventListener('popstate', handlePopState, { signal });
-    dialog.addEventListener('click', handleBackdropClick, { signal });
-
-    return () => controller.abort(); // Removes event listeners.
-  }, []);
-
-  const handleSearchClose = () => close();
-
  let status = 'idle';
  if (loading) {
    status = 'loading';
@@ -119,58 +90,59 @@ const CoursewareSearch = ({ ...sectionProps }) => {
  }

  return (
-    <dialog ref={dialogRef} className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-dialog" onClose={handleSearchClose} {...sectionProps}>
+    <section className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-section" {...sectionProps}>
+      <div className="courseware-search__close">
+        <Button
+          variant="tertiary"
+          className="p-1"
+          aria-label={intl.formatMessage(messages.searchCloseAction)}
+          onClick={handleSearchCloseClick}
+          data-testid="courseware-search-close-button"
+        ><Icon src={Close} />
+        </Button>
+      </div>
      <div className="courseware-search__outer-content">
-        <div className="courseware-search__content" data-testid="courseware-search-content">
-          <div className="courseware-search__form">
-            <h1 className="h2">{formatMessage(messages.searchModuleTitle)}</h1>
-            <CoursewareSearchForm
-              searchTerm={searchKeyword}
-              onSubmit={handleSubmit}
-              onChange={handleOnChange}
-              placeholder={formatMessage(messages.searchBarPlaceholderText)}
-            />
-            <div className="courseware-search__close">
-              <Button
-                variant="tertiary"
-                className="p-1"
-                aria-label={formatMessage(messages.searchCloseAction)}
-                onClick={() => dialogRef.current.close()}
-                data-testid="courseware-search-close-button"
-              ><Icon src={Close} />
-              </Button>
+        <div className="courseware-search__content">
+          <h1 className="h2">{intl.formatMessage(messages.searchModuleTitle)}</h1>
+          <CoursewareSearchForm
+            searchTerm={searchKeyword}
+            onSubmit={handleSubmit}
+            onChange={handleOnChange}
+            placeholder={intl.formatMessage(messages.searchBarPlaceholderText)}
+          />
+          {status === 'loading' ? (
+            <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
+              <Spinner animation="border" variant="light" screenReaderText={intl.formatMessage(messages.loading)} />
            </div>
-          </div>
-          <div className="courseware-search__results" aria-live="polite" data-testid="courseware-search-results">
-            {status === 'loading' ? (
-              <div className="courseware-search__spinner" data-testid="courseware-search-spinner">
-                <Spinner animation="border" variant="light" screenReaderText={formatMessage(messages.loading)} />
-              </div>
-            ) : null}
-            {status === 'error' && (
-              <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
-                {formatMessage(messages.searchResultsError)}
-              </Alert>
-            )}
-            {status === 'results' ? (
-              <>
-                {total > 0 ? (
-                  <div
-                    className="courseware-search__results-summary"
-                    aria-relevant="all"
-                    aria-atomic="true"
-                    data-testid="courseware-search-summary"
-                  >{formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
-                  </div>
-                ) : null}
-                <CoursewareSearchResultsFilterContainer />
-              </>
-            ) : null}
-          </div>
+          ) : null}
+          {status === 'error' && (
+            <Alert className="mt-4" variant="danger" data-testid="courseware-search-error">
+              {intl.formatMessage(messages.searchResultsError)}
+            </Alert>
+          )}
+          {status === 'results' ? (
+            <>
+              {total > 0 ? (
+                <div
+                  className="courseware-search__results-summary"
+                  aria-live="polite"
+                  aria-relevant="all"
+                  aria-atomic="true"
+                  data-testid="courseware-search-summary"
+                >{intl.formatMessage(messages.searchResultsLabel, { total, keyword: lastSearchKeyword })}
+                </div>
+              ) : null}
+              <CoursewareSearchResultsFilterContainer />
+            </>
+          ) : null}
        </div>
      </div>
-    </dialog>
+    </section>
  );
 };

-export default CoursewareSearch;
+CoursewareSearch.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearch);
--- a/src/course-home/courseware-search/CoursewareSearch.test.jsx
+++ b/src/course-home/courseware-search/CoursewareSearch.test.jsx
@@ -9,7 +9,6 @@ import {
  screen,
  waitFor,
  fireEvent,
-  within,
 } from '../../setupTest';
 import { CoursewareSearch } from './index';
 import { useElementBoundingBox, useLockScroll, useCoursewareSearchParams } from './hooks';
@@ -20,7 +19,6 @@ import { updateModel, useModel } from '../../generic/model-store';

 jest.mock('./hooks');
 jest.mock('../../generic/model-store', () => ({
-  ...jest.requireActual('../../generic/model-store'),
  updateModel: jest.fn(),
  useModel: jest.fn(),
 }));
@@ -58,7 +56,7 @@ const defaultProps = {
  total: 0,
 };

-const defaultSearchParams = {
+const coursewareSearch = {
  query: '',
  filter: '',
  setQuery: jest.fn(),
@@ -98,20 +96,14 @@ const mockModels = ((props = defaultProps) => {
  });
 });

-const mockSearchParams = ((params) => {
-  const props = { ...defaultSearchParams, ...params };
+const mockSearchParams = ((props = coursewareSearch) => {
  useCoursewareSearchParams.mockReturnValue(props);
 });

 describe('CoursewareSearch', () => {
-  beforeAll(() => initializeMockApp());
+  beforeAll(initializeMockApp);

  beforeEach(() => {
-    mockModels();
-    mockSearchParams();
-  });
-
-  afterEach(() => {
    jest.clearAllMocks();
  });

@@ -121,22 +113,27 @@ describe('CoursewareSearch', () => {
    });

    it('should use useElementBoundingBox() and useLockScroll() hooks', () => {
+      mockModels();
+      mockSearchParams();
      renderComponent();

-      expect(useElementBoundingBox).toHaveBeenCalledTimes(1);
-      expect(useLockScroll).toHaveBeenCalledTimes(1);
+      expect(useElementBoundingBox).toBeCalledTimes(1);
+      expect(useLockScroll).toBeCalledTimes(1);
    });

    it('should have a "--modal-top-position" CSS variable matching the CourseTabsNavigation top position', () => {
+      mockModels();
+      mockSearchParams();
      renderComponent();

-      const section = screen.getByTestId('courseware-search-dialog');
+      const section = screen.getByTestId('courseware-search-section');
      expect(section.style.getPropertyValue('--modal-top-position')).toBe(`${tabsTopPosition}px`);
    });
  });

  describe('when clicking on the "Close" button', () => {
-    it('should close the dialog', async () => {
+    it('should dispatch setShowSearch(false)', async () => {
+      mockModels();
      renderComponent();

      await waitFor(() => {
@@ -144,8 +141,7 @@ describe('CoursewareSearch', () => {
        fireEvent.click(close);
      });

-      expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
-      expect(setShowSearch).toHaveBeenCalledWith(false);
+      expect(setShowSearch).toBeCalledWith(false);
    });
  });

@@ -153,24 +149,29 @@ describe('CoursewareSearch', () => {
    it('should use "--modal-top-position: 0" if  nce element is not present', () => {
      useElementBoundingBox.mockImplementation(() => undefined);

+      mockModels();
+      mockSearchParams();
      renderComponent();

-      const section = screen.getByTestId('courseware-search-dialog');
+      const section = screen.getByTestId('courseware-search-section');
      expect(section.style.getPropertyValue('--modal-top-position')).toBe('0');
    });
  });

  describe('when passing extra props', () => {
    it('should pass on extra props to section element', () => {
+      mockModels();
+      mockSearchParams();
      renderComponent({ foo: 'bar' });

-      const section = screen.getByTestId('courseware-search-dialog');
+      const section = screen.getByTestId('courseware-search-section');
      expect(section).toHaveAttribute('foo', 'bar');
    });
  });

  describe('when submitting an empty search', () => {
    it('should clear the search by dispatch updateModel', async () => {
+      mockModels();
      renderComponent();

      await waitFor(() => {
@@ -202,6 +203,7 @@ describe('CoursewareSearch', () => {
    });

    it('should call searchCourseContent', async () => {
+      mockModels();
      renderComponent();

      const searchKeyword = 'course';
@@ -244,23 +246,19 @@ describe('CoursewareSearch', () => {
      expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
    });

-    it('should show a summary for the results within a container with aria-live="polite"', () => {
+    it('should show a summary for the results', () => {
      mockModels({
        searchKeyword: 'fubar',
        total: 1,
      });
      renderComponent();

-      const results = screen.queryByTestId('courseware-search-results');
-
-      expect(results).toHaveAttribute('aria-live', 'polite');
-      expect(within(results).queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
+      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
    });
  });

  describe('when clearing the search input', () => {
    it('should clear the search by dispatch updateModel', async () => {
-      mockSearchParams({ query: 'fubar' });
      mockModels({
        searchKeyword: 'fubar',
        total: 2,
--- a/src/course-home/courseware-search/CoursewareSearchEmpty.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchEmpty.jsx
@@ -1,14 +1,15 @@
 import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';

-const CoursewareSearchEmpty = () => {
-  const intl = useIntl();
-  return (
-    <div className="courseware-search-results">
-      <p className="courseware-search-results__empty" data-testid="no-results">{intl.formatMessage(messages.searchResultsNone)}</p>
-    </div>
-  );
+const CoursewareSearchEmpty = ({ intl }) => (
+  <div className="courseware-search-results">
+    <p className="courseware-search-results__empty" data-testid="no-results">{intl.formatMessage(messages.searchResultsNone)}</p>
+  </div>
+);
+
+CoursewareSearchEmpty.propTypes = {
+  intl: intlShape.isRequired,
 };

-export default CoursewareSearchEmpty;
+export default injectIntl(CoursewareSearchEmpty);
--- a/src/course-home/courseware-search/CoursewareSearchForm.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchForm.jsx
@@ -1,44 +1,43 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import { SearchField } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import messages from './messages';

 const CoursewareSearchForm = ({
+  intl,
  searchTerm,
  onSubmit,
  onChange,
  placeholder,
-}) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <SearchField.Advanced
-      value={searchTerm}
-      onSubmit={onSubmit}
-      onChange={onChange}
+}) => (
+  <SearchField.Advanced
+    value={searchTerm}
+    onSubmit={onSubmit}
+    onChange={onChange}
+    submitButtonLocation="external"
+    className="courseware-search-form"
+    screenReaderText={{
+      label: intl.formatMessage(messages.searchSubmitLabel),
+      clearButton: intl.formatMessage(messages.searchClearAction),
+      submitButton: null, // Remove the sr-only label in the button.
+    }}
+  >
+    <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
+      <SearchField.Label />
+      <SearchField.Input placeholder={placeholder} autoFocus />
+      <SearchField.ClearButton />
+    </div>
+    <SearchField.SubmitButton
+      buttonText={intl.formatMessage(messages.searchSubmitLabel)}
      submitButtonLocation="external"
-      className="courseware-search-form"
-      screenReaderText={{
-        label: formatMessage(messages.searchSubmitLabel),
-        clearButton: formatMessage(messages.searchClearAction),
-        submitButton: null, // Remove the sr-only label in the button.
-      }}
-    >
-      <div className="pgn__searchfield_wrapper" data-testid="courseware-search-form">
-        <SearchField.Label />
-        <SearchField.Input placeholder={placeholder} autoFocus />
-        <SearchField.ClearButton />
-      </div>
-      <SearchField.SubmitButton
-        buttonText={formatMessage(messages.searchSubmitLabel)}
-        submitButtonLocation="external"
-        data-testid="courseware-search-form-submit"
-      />
-    </SearchField.Advanced>
-  );
-};
+      data-testid="courseware-search-form-submit"
+    />
+  </SearchField.Advanced>
+);

 CoursewareSearchForm.propTypes = {
+  intl: intlShape.isRequired,
  searchTerm: PropTypes.string,
  onSubmit: PropTypes.func,
  onChange: PropTypes.func,
@@ -52,4 +51,4 @@ CoursewareSearchForm.defaultProps = {
  placeholder: undefined,
 };

-export default CoursewareSearchForm;
+export default injectIntl(CoursewareSearchForm);
--- a/src/course-home/courseware-search/CoursewareSearchToggle.jsx
+++ b/src/course-home/courseware-search/CoursewareSearchToggle.jsx
@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import { ManageSearch } from '@openedx/paragon/icons';
 import { useDispatch } from 'react-redux';
@@ -7,8 +7,9 @@ import messages from './messages';
 import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
 import { setShowSearch } from '../data/slice';

-const CoursewareSearchToggle = () => {
-  const intl = useIntl();
+const CoursewareSearchToggle = ({
+  intl,
+}) => {
  const dispatch = useDispatch();
  const enabled = useCoursewareSearchFeatureFlag();
  const { query } = useCoursewareSearchParams();
@@ -40,4 +41,8 @@ const CoursewareSearchToggle = () => {
  );
 };

-export default CoursewareSearchToggle;
+CoursewareSearchToggle.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CoursewareSearchToggle);
--- a/src/course-home/courseware-search/courseware-search.scss
+++ b/src/course-home/courseware-search/courseware-search.scss
@@ -5,25 +5,13 @@
  left: 0;
  right: 0;
  bottom: 0;
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  margin: 0;
  border-top: 1px solid $light-300;
  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.

-  &__form {
-    position: relative;
-
-    .h2 {
-      margin-right: 2.5rem;
-    }
-  }
-
  &__close {
    position: absolute !important; // For some reason it gets overridden
-    top: 0;
-    right: 0;
+    top: 0.5rem;
+    right: 1rem;
    font-size: 1.5rem;
    line-height: 1;
  }
@@ -164,16 +152,9 @@
 }

@media (min-width: map-get($grid-breakpoints, 'md')) {
-  .courseware-search {
-    &__close {
-      right: -2.5rem;
-    }
-
-    &__content {
-      padding-top: 8rem;
-    }
+  .courseware-search__content {
+    padding-top: 8rem;
  }
-
 }

 body._search-no-scroll {
--- a/src/course-home/courseware-search/hooks.test.jsx
+++ b/src/course-home/courseware-search/hooks.test.jsx
@@ -1,4 +1,4 @@
-import { renderHook, act, waitFor } from '@testing-library/react';
+import { renderHook, act } from '@testing-library/react-hooks';
 import { useParams, useSearchParams } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { fetchCoursewareSearchSettings } from '../data/thunks';
@@ -38,13 +38,13 @@ describe('CoursewareSearch Hooks', () => {

    it('should return true if feature is enabled', async () => {
      const hook = await renderTestHook();
-      await waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
      expect(hook.result.current).toBe(true);
    });

    it('should return false if feature is disabled', async () => {
      const hook = await renderTestHook(false);
-      await waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
      expect(hook.result.current).toBe(false);
    });
  });
@@ -125,7 +125,7 @@ describe('CoursewareSearch Hooks', () => {
      it('should return the element bounding box', async () => {
        const hook = await renderTestHook({ elementId: 'test', mockedInfo });

-        await waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());
+        hook.waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());

        expect(hook.result.current).toEqual(mockedInfo);
      });
--- a/src/course-home/data/factories/outlineTabData.factory.js
+++ b/src/course-home/data/factories/outlineTabData.factory.js
@@ -31,6 +31,7 @@ Factory.define('outlineTabData')
    course_access_redirect: false,
    has_scheduled_content: null,
    access_expiration: null,
+    can_show_upgrade_sock: false,
    cert_data: {
      cert_status: null,
      cert_web_view_url: null,
--- a/src/course-home/data/snapshots/redux.test.js.snap
+++ b/src/course-home/data/snapshots/redux.test.js.snap
@@ -489,6 +489,7 @@ exports[`Data layer integration tests Test fetchOutlineTab Should fetch, normali
    "outline": {
      "course-v1:edX+DemoX+Demo_Course": {
        "accessExpiration": null,
+        "canShowUpgradeSock": false,
        "certData": {
          "certStatus": null,
          "certWebViewUrl": null,
--- a/src/course-home/data/api.js
+++ b/src/course-home/data/api.js
@@ -289,17 +289,9 @@ export async function getProgressTabData(courseId, targetUserId) {
 }

 export async function getProctoringInfoData(courseId, username) {
-  let url;
-  if (!getConfig().EXAMS_BASE_URL) {
-    url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
-    if (username) {
-      url += `&username=${encodeURIComponent(username)}`;
-    }
-  } else {
-    url = `${getConfig().EXAMS_BASE_URL}/api/v1/student/course_id/${encodeURIComponent(courseId)}/onboarding`;
-    if (username) {
-      url += `?username=${encodeURIComponent(username)}`;
-    }
+  let url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}`;
+  if (username) {
+    url += `&username=${encodeURIComponent(username)}`;
  }
  try {
    const { data } = await getAuthenticatedHttpClient().get(url);
@@ -367,6 +359,7 @@ export async function getOutlineTabData(courseId) {
  } = tabData;

  const accessExpiration = camelCaseObject(data.access_expiration);
+  const canShowUpgradeSock = data.can_show_upgrade_sock;
  const certData = camelCaseObject(data.cert_data);
  const courseBlocks = data.course_blocks ? normalizeOutlineBlocks(courseId, data.course_blocks.blocks) : {};
  const courseGoals = camelCaseObject(data.course_goals);
@@ -388,6 +381,7 @@ export async function getOutlineTabData(courseId) {

  return {
    accessExpiration,
+    canShowUpgradeSock,
    certData,
    courseBlocks,
    courseGoals,
@@ -455,7 +449,7 @@ export async function unsubscribeFromCourseGoal(token) {
    .then(res => camelCaseObject(res));
 }

-export async function getCoursewareSearchEnabled(courseId) {
+export async function getCoursewareSearchEnabledFlag(courseId) {
  const url = new URL(`${getConfig().LMS_BASE_URL}/courses/${courseId}/courseware-search/enabled/`);
  const { data } = await getAuthenticatedHttpClient().get(url.href);
  return { enabled: data.enabled || false };
--- a/src/course-home/data/pact-tests/lmsPact.test.jsx
+++ b/src/course-home/data/pact-tests/lmsPact.test.jsx
@@ -46,6 +46,7 @@ describe('Course Home Service', () => {
          willRespondWith: {
            status: 200,
            body: {
+              can_show_upgrade_sock: boolean(false),
              verified_mode: like({
                access_expiration_date: null,
                currency: 'USD',
@@ -88,11 +89,11 @@ describe('Course Home Service', () => {
              }),
              title: string('Demonstration Course'),
              username: string('edx'),
-              has_course_author_access: boolean(true),
            },
          },
        });
        const normalizedTabData = {
+          canShowUpgradeSock: false,
          verifiedMode: {
            accessExpirationDate: null,
            currency: 'USD',
@@ -132,7 +133,6 @@ describe('Course Home Service', () => {
          ],
          title: 'Demonstration Course',
          username: 'edx',
-          hasCourseAuthorAccess: true,
        };
        const response = getCourseHomeCourseMetadata(courseId, 'outline');
        expect(response).toBeTruthy();
--- a/src/course-home/data/thunks.js
+++ b/src/course-home/data/thunks.js
@@ -12,7 +12,7 @@ import {
  postDismissWelcomeMessage,
  postRequestCert,
  getLiveTabIframe,
-  getCoursewareSearchEnabled,
+  getCoursewareSearchEnabledFlag,
  searchCourseContentFromAPI,
 } from './api';

@@ -159,7 +159,7 @@ export function processEvent(eventData, getTabData) {

 export async function fetchCoursewareSearchSettings(courseId) {
  try {
-    const { enabled } = await getCoursewareSearchEnabled(courseId);
+    const { enabled } = await getCoursewareSearchEnabledFlag(courseId);
    return { enabled };
  } catch (e) {
    return { enabled: false };
--- a/src/course-home/dates-tab/DatesTab.jsx
+++ b/src/course-home/dates-tab/DatesTab.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import messages from './messages';
 import Timeline from './timeline/Timeline';
@@ -14,8 +14,7 @@ import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
 import UpgradeToCompleteAlert from '../suggested-schedule-messaging/UpgradeToCompleteAlert';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';

-const DatesTab = () => {
-  const intl = useIntl();
+const DatesTab = ({ intl }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -60,4 +59,8 @@ const DatesTab = () => {
  );
 };

-export default DatesTab;
+DatesTab.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DatesTab);
--- a/src/course-home/dates-tab/DatesTab.test.jsx
+++ b/src/course-home/dates-tab/DatesTab.test.jsx
@@ -135,7 +135,6 @@ describe('DatesTab', () => {
    });

    it('shows extra info', async () => {
-      const user = userEvent.setup();
      const { items } = await getDay('Sat, Aug 17, 2030');
      expect(items).toHaveLength(3);

@@ -143,12 +142,10 @@ describe('DatesTab', () => {
      const tipText = "ORA Dates are set by the instructor, and can't be changed";

      expect(screen.queryByText(tipText)).toBeNull(); // tooltip does not start in DOM
-      await user.hover(tipIcon);
-      screen.getByText(tipText); // now it's there
-      await user.unhover(tipIcon);
-      await waitFor(() => {
-        expect(screen.queryByText(tipText)).toBeNull(); // and it's gone again
-      });
+      userEvent.hover(tipIcon);
+      const tooltip = screen.getByText(tipText); // now it's there
+      userEvent.unhover(tipIcon);
+      await waitForElementToBeRemoved(tooltip); // and it's gone again
    });
  });

--- a/src/course-home/dates-tab/timeline/Day.jsx
+++ b/src/course-home/dates-tab/timeline/Day.jsx
@@ -5,7 +5,8 @@ import { useSelector } from 'react-redux';
 import {
  FormattedDate,
  FormattedTime,
-  useIntl,
+  injectIntl,
+  intlShape,
 } from '@edx/frontend-platform/i18n';
 import { Tooltip, OverlayTrigger } from '@openedx/paragon';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
@@ -19,10 +20,10 @@ import { isLearnerAssignment } from '../utils';
 const Day = ({
  date,
  first,
+  intl,
  items,
  last,
 }) => {
-  const intl = useIntl();
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -107,6 +108,7 @@ const Day = ({
 Day.propTypes = {
  date: PropTypes.objectOf(Date).isRequired,
  first: PropTypes.bool,
+  intl: intlShape.isRequired,
  items: PropTypes.arrayOf(PropTypes.shape({
    date: PropTypes.string,
    dateType: PropTypes.string,
@@ -124,4 +126,4 @@ Day.defaultProps = {
  last: false,
 };

-export default Day;
+export default injectIntl(Day);
--- a/src/course-home/discussion-tab/DiscussionTab.jsx
+++ b/src/course-home/discussion-tab/DiscussionTab.jsx
@@ -1,4 +1,5 @@
 import { getConfig } from '@edx/frontend-platform';
+import { injectIntl } from '@edx/frontend-platform/i18n';
 import React, { useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useParams, generatePath, useNavigate } from 'react-router-dom';
@@ -29,4 +30,6 @@ const DiscussionTab = () => {
  );
 };

-export default DiscussionTab;
+DiscussionTab.propTypes = {};
+
+export default injectIntl(DiscussionTab);
--- a/src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx
+++ b/src/course-home/goal-unsubscribe/GoalUnsubscribe.jsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import HeaderSlot from '../../plugin-slots/HeaderSlot';
 import PageLoading from '../../generic/PageLoading';
@@ -10,8 +10,7 @@ import { unsubscribeFromCourseGoal } from '../data/api';
 import messages from './messages';
 import ResultPage from './ResultPage';

-const GoalUnsubscribe = () => {
-  const intl = useIntl();
+const GoalUnsubscribe = ({ intl }) => {
  const { token } = useParams();
  const [error, setError] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
@@ -52,4 +51,8 @@ const GoalUnsubscribe = () => {
  );
 };

-export default GoalUnsubscribe;
+GoalUnsubscribe.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GoalUnsubscribe);
--- a/src/course-home/goal-unsubscribe/ResultPage.jsx
+++ b/src/course-home/goal-unsubscribe/ResultPage.jsx
@@ -1,26 +1,28 @@
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button, Hyperlink } from '@openedx/paragon';

 import messages from './messages';
 import { ReactComponent as UnsubscribeIcon } from './unsubscribe.svg';

-const ResultPage = ({ courseTitle, error }) => {
-  const intl = useIntl();
-  const errorDescription = intl.formatMessage(
-    messages.errorDescription,
-    {
-      contactSupport: (
-        <Hyperlink
-          className="text-reset"
-          style={{ textDecoration: 'underline' }}
-          destination={`${getConfig().CONTACT_URL}`}
-        >
-          {intl.formatMessage(messages.contactSupport)}
-        </Hyperlink>
-      ),
-    },
+const ResultPage = ({ courseTitle, error, intl }) => {
+  const errorDescription = (
+    <FormattedMessage
+      id="learning.goals.unsubscribe.errorDescription"
+      defaultMessage="We were unable to unsubscribe you from goal reminder emails. Please try again later or {contactSupport} for help."
+      values={{
+        contactSupport: (
+          <Hyperlink
+            className="text-reset"
+            style={{ textDecoration: 'underline' }}
+            destination={`${getConfig().CONTACT_URL}`}
+          >
+            {intl.formatMessage(messages.contactSupport)}
+          </Hyperlink>
+        ),
+      }}
+    />
  );

  const header = error
@@ -52,6 +54,7 @@ ResultPage.defaultProps = {
 ResultPage.propTypes = {
  courseTitle: PropTypes.string,
  error: PropTypes.bool,
+  intl: intlShape.isRequired,
 };

-export default ResultPage;
+export default injectIntl(ResultPage);
--- a/src/course-home/goal-unsubscribe/messages.ts
+++ b/src/course-home/goal-unsubscribe/messages.ts
@@ -16,11 +16,6 @@ const messages = defineMessages({
    defaultMessage: 'Something went wrong',
    description: 'It indicate that the unsubscribing request has failed',
  },
-  errorDescription: {
-    id: 'learning.goals.unsubscribe.errorDescription',
-    defaultMessage: 'We were unable to unsubscribe you from goal reminder emails. Please try again later or {contactSupport} for help.',
-    description: 'Message that notifies user that unsubscribing failed and to try again',
-  },
  goToDashboard: {
    id: 'learning.goals.unsubscribe.goToDashboard',
    defaultMessage: 'Go to dashboard',
--- a/src/course-home/outline-tab/OutlineTab.jsx
+++ b/src/course-home/outline-tab/OutlineTab.jsx
@@ -1,11 +1,11 @@
-import { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
-import { CourseOutlineTabNotificationsSlot } from '../../plugin-slots/CourseOutlineTabNotificationsSlot';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { AlertList } from '../../generic/user-messages';

 import CourseDates from './widgets/CourseDates';
@@ -15,7 +15,9 @@ import WeeklyLearningGoalCard from './widgets/WeeklyLearningGoalCard';
 import CourseTools from './widgets/CourseTools';
 import { fetchOutlineTab } from '../data';
 import messages from './messages';
+import Section from './Section';
 import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
+import UpgradeNotification from '../../generic/upgrade-notification/UpgradeNotification';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';
 import useCertificateAvailableAlert from './alerts/certificate-status-alert';
 import useCourseEndAlert from './alerts/course-end-alert';
@@ -26,10 +28,8 @@ import { useModel } from '../../generic/model-store';
 import WelcomeMessage from './widgets/WelcomeMessage';
 import ProctoringInfoPanel from './widgets/ProctoringInfoPanel';
 import AccountActivationAlert from '../../alerts/logistration-alert/AccountActivationAlert';
-import CourseHomeSectionOutlineSlot from '../../plugin-slots/CourseHomeSectionOutlineSlot';

-const OutlineTab = () => {
-  const intl = useIntl();
+const OutlineTab = ({ intl }) => {
  const {
    courseId,
    proctoringPanelStatus,
@@ -39,11 +39,11 @@ const OutlineTab = () => {
    isSelfPaced,
    org,
    title,
+    userTimezone,
  } = useModel('courseHomeMeta', courseId);

-  const expandButtonRef = useRef();
-
  const {
+    accessExpiration,
    courseBlocks: {
      courses,
      sections,
@@ -52,12 +52,20 @@ const OutlineTab = () => {
      selectedGoal,
      weeklyLearningGoalEnabled,
    } = {},
+    datesBannerInfo,
    datesWidget: {
      courseDateBlocks,
    },
    enableProctoredExams,
+    offer,
+    timeOffsetMillis,
+    verifiedMode,
  } = useModel('outline', courseId);

+  const {
+    marketingUrl,
+  } = useModel('coursewareMeta', courseId);
+
  const [expandAll, setExpandAll] = useState(false);
  const navigate = useNavigate();

@@ -151,21 +159,27 @@ const OutlineTab = () => {
            </>
          )}
          <StartOrResumeCourseCard />
-          <WelcomeMessage courseId={courseId} nextElementRef={expandButtonRef} />
+          <WelcomeMessage courseId={courseId} />
          {rootCourseId && (
            <>
-              <div id="expand-button-row" className="row w-100 m-0 mb-3 justify-content-end">
+              <div className="row w-100 m-0 mb-3 justify-content-end">
                <div className="col-12 col-md-auto p-0">
-                  <Button ref={expandButtonRef} variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
+                  <Button variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
                    {expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
                  </Button>
                </div>
              </div>
-              <CourseHomeSectionOutlineSlot
-                expandAll={expandAll}
-                sectionIds={courses[rootCourseId].sectionIds}
-                sections={sections}
-              />
+              <ol id="courseHome-outline" className="list-unstyled">
+                {courses[rootCourseId].sectionIds.map((sectionId) => (
+                  <Section
+                    key={sectionId}
+                    courseId={courseId}
+                    defaultOpen={sections[sectionId].resumeBlock}
+                    expand={expandAll}
+                    section={sections[sectionId]}
+                  />
+                ))}
+              </ol>
            </>
          )}
        </div>
@@ -181,7 +195,27 @@ const OutlineTab = () => {
              />
            )}
            <CourseTools />
-            <CourseOutlineTabNotificationsSlot courseId={courseId} />
+            <PluginSlot
+              id="outline_tab_notifications_slot"
+              pluginProps={{
+                courseId,
+                model: 'outline',
+              }}
+            >
+              <UpgradeNotification
+                offer={offer}
+                verifiedMode={verifiedMode}
+                accessExpiration={accessExpiration}
+                contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
+                marketingUrl={marketingUrl}
+                upsellPageName="course_home"
+                userTimezone={userTimezone}
+                shouldDisplayBorder
+                timeOffsetMillis={timeOffsetMillis}
+                courseId={courseId}
+                org={org}
+              />
+            </PluginSlot>
            <CourseDates />
            <CourseHandouts />
          </div>
@@ -191,4 +225,8 @@ const OutlineTab = () => {
  );
 };

-export default OutlineTab;
+OutlineTab.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(OutlineTab);
--- a/src/course-home/outline-tab/OutlineTab.test.jsx
+++ b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -5,7 +5,7 @@ import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { Factory } from 'rosie';
 import { getConfig } from '@edx/frontend-platform';
-import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import MockAdapter from 'axios-mock-adapter';
 import Cookies from 'js-cookie';
@@ -54,7 +54,7 @@ describe('Outline Tab', () => {
  const goalUrl = `${getConfig().LMS_BASE_URL}/api/course_home/save_course_goal`;
  const masqueradeUrl = `${getConfig().LMS_BASE_URL}/courses/${courseId}/masquerade`;
  const outlineUrl = `${getConfig().LMS_BASE_URL}/api/course_home/outline/${courseId}`;
-  const proctoringInfoUrl = `${getConfig().EXAMS_BASE_URL}/api/v1/student/course_id/${encodeURIComponent(courseId)}/onboarding?username=MockUser`;
+  const proctoringInfoUrl = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}&username=MockUser`;

  const store = initializeStore();
  const defaultMetadata = Factory.build('courseHomeMetadata');
@@ -139,11 +139,10 @@ describe('Outline Tab', () => {
      });
      await fetchAndRender();

-      expect(screen.getByTestId('org.openedx.frontend.learning.course_outline_tab_notifications.v1')).toBeInTheDocument();
+      expect(screen.getByTestId('outline_tab_notifications_slot')).toBeInTheDocument();
    });

    it('handles expand/collapse all button click', async () => {
-      const user = userEvent.setup();
      await fetchAndRender();
      // Button renders as "Expand All"
      const expandButton = screen.getByRole('button', { name: 'Expand all' });
@@ -154,11 +153,11 @@ describe('Outline Tab', () => {
      expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false');

      // Click to expand section
-      await user.click(expandButton);
+      userEvent.click(expandButton);
      await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true'));

      // Click to collapse section
-      await user.click(expandButton);
+      userEvent.click(expandButton);
      await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false'));
    });

@@ -168,7 +167,7 @@ describe('Outline Tab', () => {
        course_blocks: { blocks: courseBlocks.blocks },
      });
      await fetchAndRender();
-      expect(screen.getByLabelText('Completed section')).toBeInTheDocument();
+      expect(screen.getByTitle('Completed section')).toBeInTheDocument();
    });

    it('displays correct icon for incomplete assignment', async () => {
@@ -177,7 +176,7 @@ describe('Outline Tab', () => {
        course_blocks: { blocks: courseBlocks.blocks },
      });
      await fetchAndRender();
-      expect(screen.getByLabelText('Incomplete section')).toBeInTheDocument();
+      expect(screen.getByTitle('Incomplete section')).toBeInTheDocument();
    });

    it('SequenceLink displays link', async () => {
@@ -276,34 +275,21 @@ describe('Outline Tab', () => {
      });

      it('renders show more/less button and handles click', async () => {
-        const user = userEvent.setup();
        expect(screen.getByTestId('alert-container-welcome')).toBeInTheDocument();
        let showMoreButton = screen.getByRole('button', { name: 'Show More' });
        expect(showMoreButton).toBeInTheDocument();

-        await user.click(showMoreButton);
+        userEvent.click(showMoreButton);
        let showLessButton = screen.getByRole('button', { name: 'Show Less' });
        expect(showLessButton).toBeInTheDocument();
        expect(screen.getByTestId('long-welcome-message-iframe')).toBeInTheDocument();

-        await user.click(showLessButton);
+        userEvent.click(showLessButton);
        showLessButton = screen.queryByRole('button', { name: 'Show Less' });
        expect(showLessButton).not.toBeInTheDocument();
        showMoreButton = screen.getByRole('button', { name: 'Show More' });
        expect(showMoreButton).toBeInTheDocument();
      });
-
-      it('dismisses message', async () => {
-        expect(screen.getByTestId('alert-container-welcome')).toBeInTheDocument();
-        const dismissButton = screen.queryByRole('button', { name: 'Dismiss' });
-        const expandButton = screen.queryByRole('button', { name: 'Expand all' });
-
-        fireEvent.click(dismissButton);
-
-        expect(expandButton).toHaveFocus();
-
-        expect(screen.queryByText('Welcome Message')).toBeNull();
-      });
    });

    it('ignores comments and misformatted HTML', async () => {
@@ -1190,6 +1176,80 @@ describe('Outline Tab', () => {
    });
  });

+  describe('Upgrade Card', () => {
+    it('renders title when upgrade is available', async () => {
+      await fetchAndRender();
+      expect(screen.queryByRole('heading', { name: 'Pursue a verified certificate' })).toBeInTheDocument();
+    });
+
+    it('displays link to upgrade', async () => {
+      await fetchAndRender();
+      expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
+    });
+
+    it('viewing upgrade card sends analytics', async () => {
+      sendTrackEvent.mockClear();
+      sendTrackingLogEvent.mockClear();
+      await fetchAndRender();
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackEvent).toHaveBeenCalledWith('Promotion Viewed', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        creative: 'sidebarupsell',
+        name: 'In-Course Verification Prompt',
+        position: 'sidebar-message',
+        promotion_id: 'courseware_verified_certificate_upsell',
+      });
+
+      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(1);
+      expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.bi.course.upgrade.sidebarupsell.displayed', {
+        org_key: 'edX',
+        courserun_key: courseId,
+      });
+    });
+
+    it('clicking upgrade link sends analytics', async () => {
+      await fetchAndRender();
+
+      // Clearing after render to remove any events sent on view (ex. 'Promotion Viewed')
+      sendTrackEvent.mockClear();
+      sendTrackingLogEvent.mockClear();
+      const upgradeButton = screen.getByRole('link', { name: 'Upgrade for $149' });
+
+      fireEvent.click(upgradeButton);
+
+      expect(sendTrackEvent).toHaveBeenCalledTimes(2);
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(1, 'Promotion Clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        creative: 'sidebarupsell',
+        name: 'In-Course Verification Prompt',
+        position: 'sidebar-message',
+        promotion_id: 'courseware_verified_certificate_upsell',
+      });
+      expect(sendTrackEvent).toHaveBeenNthCalledWith(2, 'edx.bi.ecommerce.upsell_links_clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        linkCategory: 'green_upgrade',
+        linkName: 'course_home_green',
+        linkType: 'button',
+        pageName: 'course_home',
+      });
+
+      expect(sendTrackingLogEvent).toHaveBeenCalledTimes(2);
+      expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(1, 'edx.bi.course.upgrade.sidebarupsell.clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+      });
+      expect(sendTrackingLogEvent).toHaveBeenNthCalledWith(2, 'edx.course.enrollment.upgrade.clicked', {
+        org_key: 'edX',
+        courserun_key: courseId,
+        location: 'sidebar-message',
+      });
+    });
+  });
+
  describe('Account Activation Alert', () => {
    beforeEach(() => {
      const intersectionObserverMock = () => ({
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -0,0 +1,137 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Collapsible, IconButton, Icon } from '@openedx/paragon';
+import { faCheckCircle as fasCheckCircle, faMinus, faPlus } from '@fortawesome/free-solid-svg-icons';
+import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { DisabledVisible } from '@openedx/paragon/icons';
+import SequenceLink from './SequenceLink';
+import { useModel } from '../../generic/model-store';
+
+import genericMessages from '../../generic/messages';
+import messages from './messages';
+
+const Section = ({
+  courseId,
+  defaultOpen,
+  expand,
+  intl,
+  section,
+}) => {
+  const {
+    complete,
+    sequenceIds,
+    title,
+    hideFromTOC,
+  } = section;
+  const {
+    courseBlocks: {
+      sequences,
+    },
+  } = useModel('outline', courseId);
+
+  const [open, setOpen] = useState(defaultOpen);
+
+  useEffect(() => {
+    setOpen(expand);
+  }, [expand]);
+
+  useEffect(() => {
+    setOpen(defaultOpen);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const sectionTitle = (
+    <div className="d-flex row w-100 m-0">
+      <div className="col-auto p-0">
+        {complete ? (
+          <FontAwesomeIcon
+            icon={fasCheckCircle}
+            fixedWidth
+            className="float-left mt-1 text-success"
+            aria-hidden="true"
+            title={intl.formatMessage(messages.completedSection)}
+          />
+        ) : (
+          <FontAwesomeIcon
+            icon={farCheckCircle}
+            fixedWidth
+            className="float-left mt-1 text-gray-400"
+            aria-hidden="true"
+            title={intl.formatMessage(messages.incompleteSection)}
+          />
+        )}
+      </div>
+      <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
+        <span className="align-middle col-6">{title}</span>
+        <span className="sr-only">
+          , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
+        </span>
+      </div>
+      {hideFromTOC && (
+      <div className="row">
+        {hideFromTOC && (
+          <span className="small d-flex align-content-end">
+            <Icon className="mr-2" src={DisabledVisible} data-testid="hide-from-toc-section-icon" />
+            <span data-testid="hide-from-toc-section-text">
+              {intl.formatMessage(messages.hiddenSection)}
+            </span>
+          </span>
+        )}
+      </div>
+      )}
+    </div>
+  );
+
+  return (
+    <li>
+      <Collapsible
+        className="mb-2"
+        styling="card-lg"
+        title={sectionTitle}
+        open={open}
+        onToggle={() => { setOpen(!open); }}
+        iconWhenClosed={(
+          <IconButton
+            alt={intl.formatMessage(messages.openSection)}
+            icon={faPlus}
+            onClick={() => { setOpen(true); }}
+            size="sm"
+          />
+        )}
+        iconWhenOpen={(
+          <IconButton
+            alt={intl.formatMessage(genericMessages.close)}
+            icon={faMinus}
+            onClick={() => { setOpen(false); }}
+            size="sm"
+          />
+        )}
+      >
+        <ol className="list-unstyled">
+          {sequenceIds.map((sequenceId, index) => (
+            <SequenceLink
+              key={sequenceId}
+              id={sequenceId}
+              courseId={courseId}
+              sequence={sequences[sequenceId]}
+              first={index === 0}
+            />
+          ))}
+        </ol>
+      </Collapsible>
+    </li>
+  );
+};
+
+Section.propTypes = {
+  courseId: PropTypes.string.isRequired,
+  defaultOpen: PropTypes.bool.isRequired,
+  expand: PropTypes.bool.isRequired,
+  intl: intlShape.isRequired,
+  section: PropTypes.shape().isRequired,
+};
+
+export default injectIntl(Section);
--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -0,0 +1,147 @@
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Link } from 'react-router-dom';
+import {
+  FormattedMessage,
+  FormattedTime,
+  injectIntl,
+  intlShape,
+} from '@edx/frontend-platform/i18n';
+import { faCheckCircle as fasCheckCircle } from '@fortawesome/free-solid-svg-icons';
+import { faCheckCircle as farCheckCircle } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+import { Icon } from '@openedx/paragon';
+import { Block } from '@openedx/paragon/icons';
+import EffortEstimate from '../../shared/effort-estimate';
+import { useModel } from '../../generic/model-store';
+import messages from './messages';
+
+const SequenceLink = ({
+  id,
+  intl,
+  courseId,
+  first,
+  sequence,
+}) => {
+  const {
+    complete,
+    description,
+    due,
+    showLink,
+    title,
+    hideFromTOC,
+  } = sequence;
+  const {
+    userTimezone,
+  } = useModel('outline', courseId);
+
+  const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
+
+  const coursewareUrl = <Link to={`/course/${courseId}/${id}`}>{title}</Link>;
+  const displayTitle = showLink ? coursewareUrl : title;
+
+  const dueDateMessage = (
+    <FormattedMessage
+      id="learning.outline.sequence-due-date-set"
+      defaultMessage="{description} due {assignmentDue}"
+      description="Used below an assignment title"
+      values={{
+        assignmentDue: (
+          <FormattedTime
+            key={`${id}-due`}
+            day="numeric"
+            month="short"
+            year="numeric"
+            timeZoneName="short"
+            value={due}
+            {...timezoneFormatArgs}
+          />
+        ),
+        description: description || '',
+      }}
+    />
+  );
+
+  const noDueDateMessage = (
+    <FormattedMessage
+      id="learning.outline.sequence-due-date-not-set"
+      defaultMessage="{description}"
+      description="Used below an assignment title"
+      values={{
+        assignmentDue: (
+          <FormattedTime
+            key={`${id}-due`}
+            day="numeric"
+            month="short"
+            year="numeric"
+            timeZoneName="short"
+            value={due}
+            {...timezoneFormatArgs}
+          />
+        ),
+        description: description || '',
+      }}
+    />
+  );
+
+  return (
+    <li>
+      <div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
+        <div className="row w-100 m-0">
+          <div className="col-auto p-0">
+            {complete ? (
+              <FontAwesomeIcon
+                icon={fasCheckCircle}
+                fixedWidth
+                className="float-left text-success mt-1"
+                aria-hidden={complete}
+                title={intl.formatMessage(messages.completedAssignment)}
+              />
+            ) : (
+              <FontAwesomeIcon
+                icon={farCheckCircle}
+                fixedWidth
+                className="float-left text-gray-400 mt-1"
+                aria-hidden={complete}
+                title={intl.formatMessage(messages.incompleteAssignment)}
+              />
+            )}
+          </div>
+          <div className="col-10 p-0 ml-3 text-break">
+            <span className="align-middle">{displayTitle}</span>
+            <span className="sr-only">
+              , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
+            </span>
+            <EffortEstimate className="ml-3 align-middle" block={sequence} />
+          </div>
+        </div>
+        {hideFromTOC && (
+          <div className="row w-100 my-2 mx-4 pl-3">
+            <span className="small d-flex">
+              <Icon className="mr-2" src={Block} data-testid="hide-from-toc-sequence-link-icon" />
+              <span data-testid="hide-from-toc-sequence-link-text">
+                {intl.formatMessage(messages.hiddenSequenceLink)}
+              </span>
+            </span>
+          </div>
+        )}
+        <div className="row w-100 m-0 ml-3 pl-3">
+          <small className="text-body pl-2">
+            {due ? dueDateMessage : noDueDateMessage}
+          </small>
+        </div>
+      </div>
+    </li>
+  );
+};
+
+SequenceLink.propTypes = {
+  id: PropTypes.string.isRequired,
+  intl: intlShape.isRequired,
+  courseId: PropTypes.string.isRequired,
+  first: PropTypes.bool.isRequired,
+  sequence: PropTypes.shape().isRequired,
+};
+
+export default injectIntl(SequenceLink);
--- a/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx
+++ b/src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx
@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 import {
  FormattedDate,
  FormattedMessage,
-  useIntl,
+  injectIntl,
+  intlShape,
 } from '@edx/frontend-platform/i18n';
 import { Alert, Button } from '@openedx/paragon';
 import { useDispatch } from 'react-redux';
@@ -24,8 +25,7 @@ export const CERT_STATUS_TYPE = {
  UNVERIFIED: 'unverified',
 };

-const CertificateStatusAlert = ({ payload }) => {
-  const intl = useIntl();
+const CertificateStatusAlert = ({ intl, payload }) => {
  const dispatch = useDispatch();
  const {
    certificateAvailableDate,
@@ -192,6 +192,7 @@ const CertificateStatusAlert = ({ payload }) => {
 };

 CertificateStatusAlert.propTypes = {
+  intl: intlShape.isRequired,
  payload: PropTypes.shape({
    certificateAvailableDate: PropTypes.string,
    certStatus: PropTypes.string,
@@ -209,4 +210,4 @@ CertificateStatusAlert.propTypes = {
  }).isRequired,
 };

-export default CertificateStatusAlert;
+export default injectIntl(CertificateStatusAlert);
--- a/src/course-home/outline-tab/alerts/private-course-alert/PrivateCourseAlert.jsx
+++ b/src/course-home/outline-tab/alerts/private-course-alert/PrivateCourseAlert.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
 import { getLoginRedirectUrl } from '@edx/frontend-platform/auth';
 import { Alert, Button, Hyperlink } from '@openedx/paragon';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
@@ -14,8 +14,7 @@ import outlineMessages from '../../messages';
 import useEnrollClickHandler from '../../../../alerts/enrollment-alert/clickHook';
 import { useModel } from '../../../../generic/model-store';

-const PrivateCourseAlert = ({ payload }) => {
-  const intl = useIntl();
+const PrivateCourseAlert = ({ intl, payload }) => {
  const {
    anonymousUser,
    canEnroll,
@@ -104,6 +103,7 @@ const PrivateCourseAlert = ({ payload }) => {
 };

 PrivateCourseAlert.propTypes = {
+  intl: intlShape.isRequired,
  payload: PropTypes.shape({
    anonymousUser: PropTypes.bool,
    canEnroll: PropTypes.bool,
@@ -111,4 +111,4 @@ PrivateCourseAlert.propTypes = {
  }).isRequired,
 };

-export default PrivateCourseAlert;
+export default injectIntl(PrivateCourseAlert);
--- a/src/course-home/outline-tab/messages.ts
+++ b/src/course-home/outline-tab/messages.ts
@@ -341,16 +341,6 @@ const messages = defineMessages({
    defaultMessage: 'Onboarding Past Due',
    description: 'Text that show when the deadline of proctortrack onboarding exam has passed, it appears on button that start the onboarding exam however for this case the button is disabled for obvious reason',
  },
-  sequenceDueDate: {
-    id: 'learning.outline.sequence-due-date-set',
-    defaultMessage: '{description} due {assignmentDue}',
-    description: 'Used below an assignment title',
-  },
-  sequenceNoDueDate: {
-    id: 'learning.outline.sequence-due-date-not-set',
-    defaultMessage: '{description}',
-    description: 'Used below an assignment title',
-  },
 });

 export default messages;
--- a/src/course-home/outline-tab/section-outline/HiddenSequenceLink.tsx
+++ b/src/course-home/outline-tab/section-outline/HiddenSequenceLink.tsx
@@ -1,25 +0,0 @@
-import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon } from '@openedx/paragon';
-import { Block } from '@openedx/paragon/icons';
-
-import messages from '../messages';
-
-interface Props {}
-
-const HiddenSequenceLink: React.FC<Props> = () => {
-  const intl = useIntl();
-
-  return (
-    <div className="row w-100 my-2 mx-4 pl-3">
-      <span className="small d-flex">
-        <Icon className="mr-2" src={Block} data-testid="hide-from-toc-sequence-link-icon" />
-        <span data-testid="hide-from-toc-sequence-link-text">
-          {intl.formatMessage(messages.hiddenSequenceLink)}
-        </span>
-      </span>
-    </div>
-  );
-};
-
-export default HiddenSequenceLink;
--- a/src/course-home/outline-tab/section-outline/Section.tsx
+++ b/src/course-home/outline-tab/section-outline/Section.tsx
@@ -1,94 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Collapsible, IconButton } from '@openedx/paragon';
-import { Minus, Plus } from '@openedx/paragon/icons';
-
-import { useModel } from '../../../generic/model-store';
-import genericMessages from '../../../generic/messages';
-import { useContextId } from '../../../data/hooks';
-import messages from '../messages';
-import SectionTitle from './SectionTitle';
-import SequenceLink from './SequenceLink';
-
-interface Props {
-  defaultOpen: boolean;
-  expand: boolean;
-  section: {
-    complete: boolean;
-    sequenceIds: string[];
-    title: string;
-    hideFromTOC: boolean;
-  };
-}
-
-const Section: React.FC<Props> = ({
-  defaultOpen,
-  expand,
-  section,
-}) => {
-  const intl = useIntl();
-  const courseId = useContextId();
-  const {
-    complete,
-    sequenceIds,
-    title,
-    hideFromTOC,
-  } = section;
-  const {
-    courseBlocks: {
-      sequences,
-    },
-  } = useModel('outline', courseId);
-
-  const [open, setOpen] = useState(defaultOpen);
-
-  useEffect(() => {
-    setOpen(expand);
-  }, [expand]);
-
-  useEffect(() => {
-    setOpen(defaultOpen);
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  return (
-    <li>
-      <Collapsible
-        className="mb-2"
-        styling="card-lg"
-        title={<SectionTitle {...{ complete, hideFromTOC, title }} />}
-        open={open}
-        onToggle={() => { setOpen(!open); }}
-        iconWhenClosed={(
-          <IconButton
-            alt={intl.formatMessage(messages.openSection)}
-            iconAs={Plus}
-            onClick={() => { setOpen(true); }}
-            size="sm"
-          />
-        )}
-        iconWhenOpen={(
-          <IconButton
-            alt={intl.formatMessage(genericMessages.close)}
-            iconAs={Minus}
-            onClick={() => { setOpen(false); }}
-            size="sm"
-          />
-        )}
-      >
-        <ol className="list-unstyled">
-          {sequenceIds.map((sequenceId, index) => (
-            <SequenceLink
-              key={sequenceId}
-              id={sequenceId}
-              sequence={sequences[sequenceId]}
-              first={index === 0}
-            />
-          ))}
-        </ol>
-      </Collapsible>
-    </li>
-  );
-};
-
-export default Section;
--- a/src/course-home/outline-tab/section-outline/SectionTitle.tsx
+++ b/src/course-home/outline-tab/section-outline/SectionTitle.tsx
@@ -1,59 +0,0 @@
-import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Icon } from '@openedx/paragon';
-import { CheckCircle, CheckCircleOutline, DisabledVisible } from '@openedx/paragon/icons';
-
-import messages from '../messages';
-
-interface Props {
-  complete: boolean;
-  hideFromTOC: boolean;
-  title: string;
-}
-
-const SectionTitle: React.FC<Props> = ({ complete, hideFromTOC, title }) => {
-  const intl = useIntl();
-  return (
-    <div className="d-flex row w-100 m-0">
-      <div className="col-auto p-0">
-        {complete ? (
-          <Icon
-            src={CheckCircle}
-            className="float-left mt-1 text-success"
-            aria-hidden="true"
-            svgAttrs={{ 'aria-label': intl.formatMessage(messages.completedSection) }}
-            size="sm"
-          />
-        ) : (
-          <Icon
-            src={CheckCircleOutline}
-            className="float-left mt-1 text-gray-400"
-            aria-hidden="true"
-            svgAttrs={{ 'aria-label': intl.formatMessage(messages.incompleteSection) }}
-            size="sm"
-          />
-        )}
-      </div>
-      <div className="col-7 ml-3 p-0 font-weight-bold text-dark-500">
-        <span className="align-middle col-6">{title}</span>
-        <span className="sr-only">
-          , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
-        </span>
-      </div>
-      {hideFromTOC && (
-      <div className="row">
-        {hideFromTOC && (
-          <span className="small d-flex align-content-end">
-            <Icon className="mr-2" src={DisabledVisible} data-testid="hide-from-toc-section-icon" />
-            <span data-testid="hide-from-toc-section-text">
-              {intl.formatMessage(messages.hiddenSection)}
-            </span>
-          </span>
-        )}
-      </div>
-      )}
-    </div>
-  );
-};
-
-export default SectionTitle;
--- a/src/course-home/outline-tab/section-outline/SequenceDueDate.tsx
+++ b/src/course-home/outline-tab/section-outline/SequenceDueDate.tsx
@@ -1,60 +0,0 @@
-import React from 'react';
-import { FormattedTime, useIntl } from '@edx/frontend-platform/i18n';
-import { useModel } from '../../../generic/model-store';
-
-import { useContextId } from '../../../data/hooks';
-import messages from '../messages';
-
-interface Props {
-  due: string;
-  id: string;
-  description: string;
-}
-
-const SequenceDueDate: React.FC<Props> = ({
-  due,
-  id,
-  description,
-}) => {
-  const intl = useIntl();
-  const courseId = useContextId();
-  let dueDateMessage: string | React.ReactNode = intl.formatMessage(
-    messages.sequenceNoDueDate,
-    { description: description || '' },
-  );
-  const {
-    userTimezone,
-  } = useModel('outline', courseId);
-
-  if (due) {
-    const timezoneFormatArgs = userTimezone ? { timeZone: userTimezone } : {};
-
-    dueDateMessage = intl.formatMessage(
-      messages.sequenceDueDate,
-      {
-        assignmentDue: (
-          <FormattedTime
-            key={`${id}-due`}
-            day="numeric"
-            month="short"
-            year="numeric"
-            timeZoneName="short"
-            value={due}
-            {...timezoneFormatArgs}
-          />
-        ),
-        description: description || '',
-      },
-    );
-  }
-
-  return (
-    <div className="row w-100 m-0 ml-3 pl-3">
-      <small className="text-body pl-2">
-        {dueDateMessage}
-      </small>
-    </div>
-  );
-};
-
-export default SequenceDueDate;
--- a/src/course-home/outline-tab/section-outline/SequenceLink.tsx
+++ b/src/course-home/outline-tab/section-outline/SequenceLink.tsx
@@ -1,56 +0,0 @@
-import React from 'react';
-import classNames from 'classnames';
-
-import SequenceDueDate from './SequenceDueDate';
-import HiddenSequenceLink from './HiddenSequenceLink';
-import SequenceTitle from './SequenceTitle';
-
-interface Props {
-  id: string;
-  first: boolean;
-  sequence: {
-    complete: boolean;
-    description: string;
-    due: string;
-    showLink: boolean;
-    title: string;
-    hideFromTOC: boolean;
-  }
-}
-
-const SequenceLink: React.FC<Props> = ({
-  id,
-  first,
-  sequence,
-}) => {
-  const {
-    complete,
-    description,
-    due,
-    showLink,
-    title,
-    hideFromTOC,
-  } = sequence;
-
-  return (
-    <li>
-      <div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
-        <SequenceTitle
-          {...{
-            complete,
-            showLink,
-            title,
-            sequence,
-            id,
-          }}
-        />
-        {hideFromTOC && (
-          <HiddenSequenceLink />
-        )}
-        <SequenceDueDate {...{ due, id, description }} />
-      </div>
-    </li>
-  );
-};
-
-export default SequenceLink;
--- a/src/course-home/outline-tab/section-outline/SequenceTitle.tsx
+++ b/src/course-home/outline-tab/section-outline/SequenceTitle.tsx
@@ -1,63 +0,0 @@
-import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Link } from 'react-router-dom';
-import { Icon } from '@openedx/paragon';
-import { CheckCircleOutline, CheckCircle } from '@openedx/paragon/icons';
-
-import EffortEstimate from '../../../shared/effort-estimate';
-import messages from '../messages';
-import { useContextId } from '../../../data/hooks';
-
-interface Props {
-  complete: boolean;
-  showLink: boolean;
-  title: string;
-  sequence: object;
-  id: string;
-}
-
-const SequenceTitle: React.FC<Props> = ({
-  complete,
-  showLink,
-  title,
-  sequence,
-  id,
-}) => {
-  const intl = useIntl();
-  const courseId = useContextId();
-  const coursewareUrl = <Link to={`/course/${courseId}/${id}`}>{title}</Link>;
-  const displayTitle = showLink ? coursewareUrl : title;
-
-  return (
-    <div className="row w-100 m-0">
-      <div className="col-auto p-0">
-        {complete ? (
-          <Icon
-            src={CheckCircle}
-            className="float-left text-success mt-1"
-            aria-hidden={complete}
-            svgAttrs={{ 'aria-label': intl.formatMessage(messages.completedAssignment) }}
-            size="sm"
-          />
-        ) : (
-          <Icon
-            src={CheckCircleOutline}
-            className="float-left text-gray-400 mt-1"
-            aria-hidden={complete}
-            svgAttrs={{ 'aria-label': intl.formatMessage(messages.incompleteAssignment) }}
-            size="sm"
-          />
-        )}
-      </div>
-      <div className="col-10 p-0 ml-3 text-break">
-        <span className="align-middle">{displayTitle}</span>
-        <span className="sr-only">
-          , {intl.formatMessage(complete ? messages.completedAssignment : messages.incompleteAssignment)}
-        </span>
-        <EffortEstimate className="ml-3 align-middle" block={sequence} />
-      </div>
-    </div>
-  );
-};
-
-export default SequenceTitle;
--- a/src/course-home/outline-tab/widgets/CourseDates.jsx
+++ b/src/course-home/outline-tab/widgets/CourseDates.jsx
@@ -1,14 +1,15 @@
 import React from 'react';
 import { useSelector } from 'react-redux';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import DateSummary from '../DateSummary';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';

-const CourseDates = () => {
-  const intl = useIntl();
+const CourseDates = ({
+  intl,
+}) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -47,4 +48,8 @@ const CourseDates = () => {
  );
 };

-export default CourseDates;
+CourseDates.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseDates);
--- a/src/course-home/outline-tab/widgets/CourseHandouts.jsx
+++ b/src/course-home/outline-tab/widgets/CourseHandouts.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import { useSelector } from 'react-redux';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import LmsHtmlFragment from '../LmsHtmlFragment';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';

-const CourseHandouts = () => {
-  const intl = useIntl();
+const CourseHandouts = ({ intl }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -32,4 +31,8 @@ const CourseHandouts = () => {
  );
 };

-export default CourseHandouts;
+CourseHandouts.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseHandouts);
--- a/src/course-home/outline-tab/widgets/CourseTools.jsx
+++ b/src/course-home/outline-tab/widgets/CourseTools.jsx
@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';

 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
  faBookmark, faCertificate, faInfo, faCalendar, faStar,
@@ -14,8 +14,7 @@ import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 import LaunchCourseHomeTourButton from '../../../product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton';

-const CourseTools = () => {
-  const intl = useIntl();
+const CourseTools = ({ intl }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -82,4 +81,8 @@ const CourseTools = () => {
  );
 };

-export default CourseTools;
+CourseTools.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseTools);
--- a/src/course-home/outline-tab/widgets/LearningGoalButton.jsx
+++ b/src/course-home/outline-tab/widgets/LearningGoalButton.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 // These flag svgs are derivatives of the Flag icon from paragon
 import { ReactComponent as FlagIntenseIcon } from './flag_black.svg';
 import { ReactComponent as FlagCasualIcon } from './flag_outline.svg';
@@ -13,8 +13,8 @@ const LearningGoalButton = ({
  level,
  isSelected,
  handleSelect,
+  intl,
 }) => {
-  const intl = useIntl();
  const buttonDetails = {
    casual: {
      daysPerWeek: 1,
@@ -53,6 +53,7 @@ LearningGoalButton.propTypes = {
  level: PropTypes.string.isRequired,
  isSelected: PropTypes.bool.isRequired,
  handleSelect: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
 };

-export default LearningGoalButton;
+export default injectIntl(LearningGoalButton);
--- a/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
+++ b/src/course-home/outline-tab/widgets/ProctoringInfoPanel.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import camelCase from 'lodash.camelcase';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';

 import messages from '../messages';
@@ -10,8 +10,7 @@ import { getProctoringInfoData } from '../../data/api';
 import { fetchProctoringInfoResolved } from '../../data/slice';
 import { useModel } from '../../../generic/model-store';

-const ProctoringInfoPanel = () => {
-  const intl = useIntl();
+const ProctoringInfoPanel = ({ intl }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -217,4 +216,8 @@ const ProctoringInfoPanel = () => {
  );
 };

-export default ProctoringInfoPanel;
+ProctoringInfoPanel.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ProctoringInfoPanel);
--- a/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
+++ b/src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx
@@ -1,14 +1,13 @@
 import React from 'react';
 import { Button, Card } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useSelector } from 'react-redux';
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';

-const StartOrResumeCourseCard = () => {
-  const intl = useIntl();
+const StartOrResumeCourseCard = ({ intl }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -63,4 +62,8 @@ const StartOrResumeCourseCard = () => {
  );
 };

-export default StartOrResumeCourseCard;
+StartOrResumeCourseCard.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(StartOrResumeCourseCard);
--- a/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
+++ b/src/course-home/outline-tab/widgets/WeeklyLearningGoalCard.jsx
@@ -6,7 +6,7 @@ import { Form, Card, Icon } from '@openedx/paragon';
 import { history } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Email } from '@openedx/paragon/icons';
 import { useSelector } from 'react-redux';
 import messages from '../messages';
@@ -18,8 +18,8 @@ import './FlagButton.scss';
 const WeeklyLearningGoalCard = ({
  daysPerWeek,
  subscribedToReminders,
+  intl,
 }) => {
-  const intl = useIntl();
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -152,10 +152,11 @@ const WeeklyLearningGoalCard = ({
 WeeklyLearningGoalCard.propTypes = {
  daysPerWeek: PropTypes.number,
  subscribedToReminders: PropTypes.bool,
+  intl: intlShape.isRequired,
 };

 WeeklyLearningGoalCard.defaultProps = {
  daysPerWeek: null,
  subscribedToReminders: false,
 };
-export default WeeklyLearningGoalCard;
+export default injectIntl(WeeklyLearningGoalCard);
--- a/src/course-home/outline-tab/widgets/WelcomeMessage.jsx
+++ b/src/course-home/outline-tab/widgets/WelcomeMessage.jsx
@@ -1,7 +1,7 @@
-import { useState, useMemo, useRef } from 'react';
+import React, { useState, useMemo } from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Alert, Button, TransitionReplace } from '@openedx/paragon';
 import truncate from 'truncate-html';

@@ -11,13 +11,11 @@ import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 import { dismissWelcomeMessage } from '../../data/thunks';

-const WelcomeMessage = ({ courseId, nextElementRef }) => {
-  const intl = useIntl();
+const WelcomeMessage = ({ courseId, intl }) => {
  const {
    welcomeMessageHtml,
  } = useModel('outline', courseId);

-  const messageBodyRef = useRef();
  const [display, setDisplay] = useState(true);

  // welcomeMessageHtml can contain comments or malformatted HTML which can impact the length that determines
@@ -51,20 +49,13 @@ const WelcomeMessage = ({ courseId, nextElementRef }) => {
      dismissible
      show={display}
      onClose={() => {
-        nextElementRef.current?.focus();
        setDisplay(false);
        dispatch(dismissWelcomeMessage(courseId));
      }}
      className="raised-card"
      actions={messageCanBeShortened ? [
        <Button
-          onClick={() => {
-            if (showShortMessage) {
-              messageBodyRef.current?.focus();
-            }
-
-            setShowShortMessage(!showShortMessage);
-          }}
+          onClick={() => setShowShortMessage(!showShortMessage)}
          variant="outline-primary"
        >
          {showShortMessage ? intl.formatMessage(messages.welcomeMessageShowMoreButton)
@@ -72,34 +63,32 @@ const WelcomeMessage = ({ courseId, nextElementRef }) => {
        </Button>,
      ] : []}
    >
-      <div ref={messageBodyRef} tabIndex="-1">
-        <TransitionReplace className="mb-3" enterDuration={400} exitDuration={200}>
-          {showShortMessage ? (
-            <LmsHtmlFragment
-              className="inline-link"
-              data-testid="short-welcome-message-iframe"
-              key="short-html"
-              html={shortWelcomeMessageHtml}
-              title={intl.formatMessage(messages.welcomeMessage)}
-            />
-          ) : (
-            <LmsHtmlFragment
-              className="inline-link"
-              data-testid="long-welcome-message-iframe"
-              key="full-html"
-              html={cleanedWelcomeMessageHtml}
-              title={intl.formatMessage(messages.welcomeMessage)}
-            />
-          )}
-        </TransitionReplace>
-      </div>
+      <TransitionReplace className="mb-3" enterDuration={400} exitDuration={200}>
+        {showShortMessage ? (
+          <LmsHtmlFragment
+            className="inline-link"
+            data-testid="short-welcome-message-iframe"
+            key="short-html"
+            html={shortWelcomeMessageHtml}
+            title={intl.formatMessage(messages.welcomeMessage)}
+          />
+        ) : (
+          <LmsHtmlFragment
+            className="inline-link"
+            data-testid="long-welcome-message-iframe"
+            key="full-html"
+            html={cleanedWelcomeMessageHtml}
+            title={intl.formatMessage(messages.welcomeMessage)}
+          />
+        )}
+      </TransitionReplace>
    </Alert>
  );
 };

 WelcomeMessage.propTypes = {
  courseId: PropTypes.string.isRequired,
-  nextElementRef: PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) }),
+  intl: intlShape.isRequired,
 };

-export default WelcomeMessage;
+export default injectIntl(WelcomeMessage);
--- a/src/course-home/progress-tab/ProgressHeader.jsx
+++ b/src/course-home/progress-tab/ProgressHeader.jsx
@@ -1,14 +1,15 @@
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
+import React from 'react';
 import { useSelector } from 'react-redux';

+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Button } from '@openedx/paragon';
+
 import { useModel } from '../../generic/model-store';

 import messages from './messages';

-const ProgressHeader = () => {
-  const intl = useIntl();
+const ProgressHeader = ({ intl }) => {
  const {
    courseId,
    targetUserId,
@@ -36,4 +37,8 @@ const ProgressHeader = () => {
  );
 };

-export default ProgressHeader;
+ProgressHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(ProgressHeader);
--- a/src/course-home/progress-tab/ProgressTab.jsx
+++ b/src/course-home/progress-tab/ProgressTab.jsx
@@ -1,20 +1,27 @@
 import React from 'react';
-import { useWindowSize } from '@openedx/paragon';
-import { useContextId } from '../../data/hooks';
-import ProgressTabCertificateStatusSidePanelSlot from '../../plugin-slots/ProgressTabCertificateStatusSidePanelSlot';
+import { useSelector } from 'react-redux';
+import { breakpoints, useWindowSize } from '@openedx/paragon';

+import CertificateStatus from './certificate-status/CertificateStatus';
 import CourseCompletion from './course-completion/CourseCompletion';
+import CourseGrade from './grades/course-grade/CourseGrade';
+import DetailedGrades from './grades/detailed-grades/DetailedGrades';
+import GradeSummary from './grades/grade-summary/GradeSummary';
 import ProgressHeader from './ProgressHeader';
+import RelatedLinks from './related-links/RelatedLinks';

-import ProgressTabCertificateStatusMainBodySlot from '../../plugin-slots/ProgressTabCertificateStatusMainBodySlot';
-import ProgressTabCourseGradeSlot from '../../plugin-slots/ProgressTabCourseGradeSlot';
-import ProgressTabGradeBreakdownSlot from '../../plugin-slots/ProgressTabGradeBreakdownSlot';
-import ProgressTabRelatedLinksSlot from '../../plugin-slots/ProgressTabRelatedLinksSlot';
 import { useModel } from '../../generic/model-store';

 const ProgressTab = () => {
-  const courseId = useContextId();
-  const { disableProgressGraph } = useModel('progress', courseId);
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
+
+  const {
+    gradesFeatureIsFullyLocked, disableProgressGraph,
+  } = useModel('progress', courseId);
+
+  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';

  const windowWidth = useWindowSize().width;
  if (windowWidth === undefined) {
@@ -24,6 +31,7 @@ const ProgressTab = () => {
    return null;
  }

+  const wideScreen = windowWidth >= breakpoints.large.minWidth;
  return (
    <>
      <ProgressHeader />
@@ -31,15 +39,18 @@ const ProgressTab = () => {
        {/* Main body */}
        <div className="col-12 col-md-8 p-0">
          {!disableProgressGraph && <CourseCompletion />}
-          <ProgressTabCertificateStatusMainBodySlot />
-          <ProgressTabCourseGradeSlot />
-          <ProgressTabGradeBreakdownSlot />
+          {!wideScreen && <CertificateStatus />}
+          <CourseGrade />
+          <div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
+            <GradeSummary />
+            <DetailedGrades />
+          </div>
        </div>

        {/* Side panel */}
        <div className="col-12 col-md-4 p-0 px-md-4">
-          <ProgressTabCertificateStatusSidePanelSlot />
-          <ProgressTabRelatedLinksSlot />
+          {wideScreen && <CertificateStatus />}
+          <RelatedLinks />
        </div>
      </div>
    </>
--- a/src/course-home/progress-tab/ProgressTab.test.jsx
+++ b/src/course-home/progress-tab/ProgressTab.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { getConfig, setConfig } from '@edx/frontend-platform';
+import { getConfig } from '@edx/frontend-platform';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { breakpoints } from '@openedx/paragon';
@@ -111,7 +111,7 @@ describe('Progress Tab', () => {
      await fetchAndRender();
      sendTrackEvent.mockClear();

-      const outlineTabLink = screen.getAllByRole('link', { name: 'Course outline' });
+      const outlineTabLink = screen.getAllByRole('link', { name: 'Course Outline' });
      fireEvent.click(outlineTabLink[1]); // outlineTabLink[0] corresponds to the link in the DetailedGrades component

      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
@@ -471,12 +471,9 @@ describe('Progress Tab', () => {
      await fetchAndRender();
      expect(screen.getByText('limited feature')).toBeInTheDocument();
      expect(screen.getByText('Unlock to work towards a certificate.')).toBeInTheDocument();
-      expect(screen.queryAllByText(
-        'You have limited access to graded assignments as part of the audit track in this course.',
-        { exact: false },
-      )).toHaveLength(2);
+      expect(screen.queryAllByText('You have limited access to graded assignments as part of the audit track in this course.')).toHaveLength(2);

-      expect(screen.queryAllByTestId('locked-icon')).toHaveLength(4);
+      expect(screen.queryAllByTestId('blocked-icon')).toHaveLength(4);
    });

    it('does not render subsections for which showGrades is false', async () => {
@@ -548,111 +545,6 @@ describe('Progress Tab', () => {
      await fetchAndRender();
      expect(screen.getByText('Grades & Credit')).toBeInTheDocument();
    });
-
-    it('does not render ungraded subsections when SHOW_UNGRADED_ASSIGNMENT_PROGRESS is false', async () => {
-      // The second assignment has has_graded_assignment set to false, so it should not be shown.
-      setTabData({
-        section_scores: [
-          {
-            display_name: 'First section',
-            subsections: [
-              {
-                assignment_type: 'Homework',
-                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
-                display_name: 'First subsection',
-                learner_has_access: true,
-                has_graded_assignment: true,
-                num_points_earned: 1,
-                num_points_possible: 2,
-                percent_graded: 1.0,
-                show_correctness: 'always',
-                show_grades: true,
-                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
-              },
-            ],
-          },
-          {
-            display_name: 'Second section',
-            subsections: [
-              {
-                assignment_type: 'Homework',
-                display_name: 'Second subsection',
-                learner_has_access: true,
-                has_graded_assignment: false,
-                num_points_earned: 1,
-                num_points_possible: 1,
-                percent_graded: 1.0,
-                show_correctness: 'always',
-                show_grades: true,
-                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
-              },
-            ],
-          },
-        ],
-      });
-
-      await fetchAndRender();
-      expect(screen.getByText('First subsection')).toBeInTheDocument();
-      expect(screen.queryByText('Second subsection')).not.toBeInTheDocument();
-    });
-
-    it('renders both graded and ungraded subsections when SHOW_UNGRADED_ASSIGNMENT_PROGRESS is true', async () => {
-      // The second assignment has has_graded_assignment set to false.
-      setConfig({
-        ...getConfig(),
-        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: true,
-      });
-
-      setTabData({
-        section_scores: [
-          {
-            display_name: 'First section',
-            subsections: [
-              {
-                assignment_type: 'Homework',
-                block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
-                display_name: 'First subsection',
-                learner_has_access: true,
-                has_graded_assignment: true,
-                num_points_earned: 1,
-                num_points_possible: 2,
-                percent_graded: 1.0,
-                show_correctness: 'always',
-                show_grades: true,
-                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/first_subsection',
-              },
-            ],
-          },
-          {
-            display_name: 'Second section',
-            subsections: [
-              {
-                assignment_type: 'Homework',
-                display_name: 'Second subsection',
-                learner_has_access: true,
-                has_graded_assignment: false,
-                num_points_earned: 1,
-                num_points_possible: 1,
-                percent_graded: 1.0,
-                show_correctness: 'always',
-                show_grades: true,
-                url: 'http://learning.edx.org/course/course-v1:edX+Test+run/second_subsection',
-              },
-            ],
-          },
-        ],
-      });
-
-      await fetchAndRender();
-      expect(screen.getByText('First subsection')).toBeInTheDocument();
-      expect(screen.getByText('Second subsection')).toBeInTheDocument();
-
-      // reset config for other tests
-      setConfig({
-        ...getConfig(),
-        SHOW_UNGRADED_ASSIGNMENT_PROGRESS: false,
-      });
-    });
  });

  describe('Grade Summary', () => {
@@ -896,7 +788,7 @@ describe('Progress Tab', () => {
      sendTrackEvent.mockClear();
      expect(screen.getByText('Detailed grades')).toBeInTheDocument();

-      const outlineLink = screen.getAllByRole('link', { name: 'Course outline' })[0];
+      const outlineLink = screen.getAllByRole('link', { name: 'Course Outline' })[0];
      fireEvent.click(outlineLink);

      expect(sendTrackEvent).toHaveBeenCalledTimes(1);
@@ -917,7 +809,7 @@ describe('Progress Tab', () => {

      // Open the problem score drawer
      fireEvent.click(problemScoreDrawerToggle);
-      expect(screen.getAllByText('Graded Scores:').length).toBeGreaterThan(1);
+      expect(screen.getByText('Problem Scores:')).toBeInTheDocument();
      expect(screen.getAllByText('0/1')).toHaveLength(3);
    });

@@ -929,14 +821,6 @@ describe('Progress Tab', () => {
      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
      expect(screen.getByText('You currently have no graded problem scores.')).toBeInTheDocument();
    });
-
-    it('renders Detailed Grades table when section scores are populated', async () => {
-      await fetchAndRender();
-      expect(screen.getByText('Detailed grades')).toBeInTheDocument();
-
-      expect(screen.getByText('First subsection'));
-      expect(screen.getByText('Second subsection'));
-    });
  });

  describe('Certificate Status', () => {
--- a/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
+++ b/src/course-home/progress-tab/certificate-status/CertificateStatus.jsx
@@ -1,22 +1,23 @@
-import { useEffect } from 'react';
-import { useDispatch } from 'react-redux';
+import React, { useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { FormattedDate, FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  FormattedDate, FormattedMessage, injectIntl, intlShape,
+} from '@edx/frontend-platform/i18n';

 import { Button, Card } from '@openedx/paragon';
 import { getConfig } from '@edx/frontend-platform';
-import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
 import { COURSE_EXIT_MODES, getCourseExitMode } from '../../../courseware/course/course-exit/utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
 import { requestCert } from '../../data/thunks';
 import messages from './messages';
-import ProgressCertificateStatusSlot from '../../../plugin-slots/ProgressCertificateStatusSlot';

-const CertificateStatus = () => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const CertificateStatus = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    entranceExamData,
@@ -214,6 +215,7 @@ const CertificateStatus = () => {
    });
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
+
  if (!certCase) {
    return null;
  }
@@ -241,32 +243,32 @@ const CertificateStatus = () => {
  return (
    <section data-testid="certificate-status-component" className="text-dark-700 mb-4">
      <Card className="bg-light-200 raised-card">
-        <ProgressCertificateStatusSlot courseId={courseId}>
-          <div id={`${certCase}_certificate_status`}>
-            <Card.Header title={header} />
-            <Card.Section className="small text-gray-700">
-              {body}
-            </Card.Section>
-            <Card.Footer>
-              {buttonText && (buttonLocation || buttonAction) && (
-                <Button
-                  variant="outline-brand"
-                  onClick={() => {
-                    logCertificateStatusButtonClicked(certStatus);
-                    if (buttonAction) { buttonAction(); }
-                  }}
-                  href={buttonLocation}
-                  block
-                >
-                  {buttonText}
-                </Button>
-              )}
-            </Card.Footer>
-          </div>
-        </ProgressCertificateStatusSlot>
+        <Card.Header title={header} />
+        <Card.Section className="small text-gray-700">
+          {body}
+        </Card.Section>
+        <Card.Footer>
+          {buttonText && (buttonLocation || buttonAction) && (
+            <Button
+              variant="outline-brand"
+              onClick={() => {
+                logCertificateStatusButtonClicked(certStatus);
+                if (buttonAction) { buttonAction(); }
+              }}
+              href={buttonLocation}
+              block
+            >
+              {buttonText}
+            </Button>
+          )}
+        </Card.Footer>
      </Card>
    </section>
  );
 };

-export default CertificateStatus;
+CertificateStatus.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CertificateStatus);
--- a/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx
@@ -1,13 +1,12 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from './messages';

-const CompleteDonutSegment = ({ completePercentage, lockedPercentage }) => {
-  const intl = useIntl();
+const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) => {
  const [showCompletePopover, setShowCompletePopover] = useState(false);

  if (!completePercentage) {
@@ -83,7 +82,8 @@ const CompleteDonutSegment = ({ completePercentage, lockedPercentage }) => {

 CompleteDonutSegment.propTypes = {
  completePercentage: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
  lockedPercentage: PropTypes.number.isRequired,
 };

-export default CompleteDonutSegment;
+export default injectIntl(CompleteDonutSegment);
--- a/src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx
+++ b/src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx
@@ -1,5 +1,8 @@
-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
-import { useContextId } from '../../../data/hooks';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { useModel } from '../../../generic/model-store';

 import CompleteDonutSegment from './CompleteDonutSegment';
@@ -7,9 +10,10 @@ import IncompleteDonutSegment from './IncompleteDonutSegment';
 import LockedDonutSegment from './LockedDonutSegment';
 import messages from './messages';

-const CompletionDonutChart = () => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const CompletionDonutChart = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    completionSummary: {
@@ -58,4 +62,8 @@ const CompletionDonutChart = () => {
  );
 };

-export default CompletionDonutChart;
+CompletionDonutChart.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CompletionDonutChart);
--- a/src/course-home/progress-tab/course-completion/CourseCompletion.jsx
+++ b/src/course-home/progress-tab/course-completion/CourseCompletion.jsx
@@ -1,26 +1,27 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
+import React from 'react';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import CompletionDonutChart from './CompletionDonutChart';
 import messages from './messages';

-const CourseCompletion = () => {
-  const intl = useIntl();
-
-  return (
-    <section className="text-dark-700 mb-4 rounded raised-card p-4">
-      <div className="row w-100 m-0">
-        <div className="col-12 col-sm-6 col-md-7 p-0">
-          <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
-          <p className="small">
-            {intl.formatMessage(messages.completionBody)}
-          </p>
-        </div>
-        <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
-          <CompletionDonutChart />
-        </div>
+const CourseCompletion = ({ intl }) => (
+  <section className="text-dark-700 mb-4 rounded raised-card p-4">
+    <div className="row w-100 m-0">
+      <div className="col-12 col-sm-6 col-md-7 p-0">
+        <h2>{intl.formatMessage(messages.courseCompletion)}</h2>
+        <p className="small">
+          {intl.formatMessage(messages.completionBody)}
+        </p>
      </div>
-    </section>
-  );
+      <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
+        <CompletionDonutChart />
+      </div>
+    </div>
+  </section>
+);
+
+CourseCompletion.propTypes = {
+  intl: intlShape.isRequired,
 };

-export default CourseCompletion;
+export default injectIntl(CourseCompletion);
--- a/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx
@@ -1,13 +1,12 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from './messages';

-const IncompleteDonutSegment = ({ incompletePercentage }) => {
-  const intl = useIntl();
+const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
  const [showIncompletePopover, setShowIncompletePopover] = useState(false);

  if (!incompletePercentage) {
@@ -54,6 +53,7 @@ const IncompleteDonutSegment = ({ incompletePercentage }) => {

 IncompleteDonutSegment.propTypes = {
  incompletePercentage: PropTypes.number.isRequired,
+  intl: intlShape.isRequired,
 };

-export default IncompleteDonutSegment;
+export default injectIntl(IncompleteDonutSegment);
--- a/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
+++ b/src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx
@@ -1,13 +1,12 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';

 import { OverlayTrigger, Popover } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import messages from './messages';

-const LockedDonutSegment = ({ lockedPercentage }) => {
-  const intl = useIntl();
+const LockedDonutSegment = ({ intl, lockedPercentage }) => {
  const [showLockedPopover, setShowLockedPopover] = useState(false);

  if (!lockedPercentage) {
@@ -66,7 +65,8 @@ const LockedDonutSegment = ({ lockedPercentage }) => {
 };

 LockedDonutSegment.propTypes = {
+  intl: intlShape.isRequired,
  lockedPercentage: PropTypes.number.isRequired,
 };

-export default LockedDonutSegment;
+export default injectIntl(LockedDonutSegment);
--- a/src/course-home/progress-tab/credit-information/CreditInformation.jsx
+++ b/src/course-home/progress-tab/credit-information/CreditInformation.jsx
@@ -1,17 +1,19 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { CheckCircle, WarningFilled, WatchFilled } from '@openedx/paragon/icons';
 import { Hyperlink, Icon } from '@openedx/paragon';
-import { useContextId } from '../../../data/hooks';

 import { useModel } from '../../../generic/model-store';
 import { DashboardLink } from '../../../shared/links';

 import messages from './messages';

-const CreditInformation = () => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const CreditInformation = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    creditCourseRequirements,
@@ -34,13 +36,36 @@ const CreditInformation = () => {

  switch (creditCourseRequirements.eligibilityStatus) {
    case 'not_eligible':
-      eligibilityStatus = intl.formatMessage(messages.creditNotEligibleStatus, { creditLink });
+      eligibilityStatus = (
+        <FormattedMessage
+          id="progress.creditInformation.creditNotEligible"
+          defaultMessage="You are no longer eligible for credit in this course. Learn more about {creditLink}."
+          description="Message to learner who are not eligible for course credit, it can because the a requirement deadline have passed"
+          values={{ creditLink }}
+        />
+      );
      break;
    case 'eligible':
-      eligibilityStatus = intl.formatMessage(messages.creditEligibleStatus, { dashboardLink, creditLink });
+      eligibilityStatus = (
+        <FormattedMessage
+          id="progress.creditInformation.creditEligible"
+          defaultMessage="
+          You have met the requirements for credit in this course. Go to your
+          {dashboardLink} to purchase course credit. Or learn more about {creditLink}."
+          description="After the credit requirements are met, leaners can then do the last step which purchasing the credit. Note that is only doable for leaners after they met all the requirements"
+          values={{ dashboardLink, creditLink }}
+        />
+      );
      break;
    case 'partial_eligible':
-      eligibilityStatus = intl.formatMessage(messages.creditPartialEligibleStatus, { creditLink });
+      eligibilityStatus = (
+        <FormattedMessage
+          id="progress.creditInformation.creditPartialEligible"
+          defaultMessage="You have not yet met the requirements for credit. Learn more about {creditLink}."
+          description="This means that one or more requirements is not satisfied yet"
+          values={{ creditLink }}
+        />
+      );
      break;
    default:
      break;
@@ -83,4 +108,8 @@ const CreditInformation = () => {
  );
 };

-export default CreditInformation;
+CreditInformation.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CreditInformation);
--- a/src/course-home/progress-tab/credit-information/messages.ts
+++ b/src/course-home/progress-tab/credit-information/messages.ts
@@ -35,22 +35,6 @@ const messages = defineMessages({
    defaultMessage: 'Verification submitted',
    description: 'It indicate that the learner submitted a requirement but is not graded or reviewed yet',
  },
-  creditNotEligibleStatus: {
-    id: 'progress.creditInformation.creditNotEligible',
-    defaultMessage: 'You are no longer eligible for credit in this course. Learn more about {creditLink}.',
-    description: 'Message to learner who are not eligible for course credit, it can be that a requirement deadline has passed',
-  },
-  creditEligibleStatus: {
-    id: 'progress.creditInformation.creditEligible',
-    defaultMessage: `You have met the requirements for credit in this course. Go to your
-      {dashboardLink} to purchase course credit. Or learn more about {creditLink}.`,
-    description: 'After the credit requirements are met, leaners can then do the last step which purchasing the credit. Note that is only doable for leaners after they met all the requirements',
-  },
-  creditPartialEligibleStatus: {
-    id: 'progress.creditInformation.creditPartialEligible',
-    defaultMessage: 'You have not yet met the requirements for credit. Learn more about {creditLink}.',
-    description: 'This means that one or more requirements is not satisfied yet',
-  },
 });

 export default messages;
--- a/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx
@@ -1,5 +1,6 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { useContextId } from '../../../../data/hooks';
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import { useModel } from '../../../../generic/model-store';

@@ -10,9 +11,10 @@ import CreditInformation from '../../credit-information/CreditInformation';

 import messages from '../messages';

-const CourseGrade = () => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const CourseGrade = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    creditCourseRequirements,
@@ -52,4 +54,8 @@ const CourseGrade = () => {
  );
 };

-export default CourseGrade;
+CourseGrade.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseGrade);
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx
@@ -1,17 +1,19 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { CheckCircle, WarningFilled } from '@openedx/paragon/icons';
 import { breakpoints, Icon, useWindowSize } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';

 import GradeRangeTooltip from './GradeRangeTooltip';
 import messages from '../messages';

-const CourseGradeFooter = ({ passingGrade }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const CourseGradeFooter = ({ intl, passingGrade }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    courseGrade: {
@@ -84,7 +86,8 @@ const CourseGradeFooter = ({ passingGrade }) => {
 };

 CourseGradeFooter.propTypes = {
+  intl: intlShape.isRequired,
  passingGrade: PropTypes.number.isRequired,
 };

-export default CourseGradeFooter;
+export default injectIntl(CourseGradeFooter);
--- a/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx
@@ -1,16 +1,19 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Locked } from '@openedx/paragon/icons';
 import { Button, Icon } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';

 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';

-const CourseGradeHeader = () => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const CourseGradeHeader = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
  const {
    org,
  } = useModel('courseHomeMeta', courseId);
@@ -80,4 +83,8 @@ const CourseGradeHeader = () => {
  );
 };

-export default CourseGradeHeader;
+CourseGradeHeader.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(CourseGradeHeader);
--- a/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx
@@ -1,16 +1,20 @@
+import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';

-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';

 import { useModel } from '../../../../generic/model-store';

 import messages from '../messages';

-const CurrentGradeTooltip = ({ tooltipClassName }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const CurrentGradeTooltip = ({ intl, tooltipClassName }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    courseGrade: {
@@ -65,7 +69,8 @@ CurrentGradeTooltip.defaultProps = {
 };

 CurrentGradeTooltip.propTypes = {
+  intl: intlShape.isRequired,
  tooltipClassName: PropTypes.string,
 };

-export default CurrentGradeTooltip;
+export default injectIntl(CurrentGradeTooltip);
--- a/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeBar.jsx
@@ -1,16 +1,20 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
-import { useContextId } from '../../../../data/hooks';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { useModel } from '../../../../generic/model-store';
 import CurrentGradeTooltip from './CurrentGradeTooltip';
 import PassingGradeTooltip from './PassingGradeTooltip';

 import messages from '../messages';

-const GradeBar = ({ passingGrade }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const GradeBar = ({ intl, passingGrade }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    courseGrade: {
@@ -48,7 +52,8 @@ const GradeBar = ({ passingGrade }) => {
 };

 GradeBar.propTypes = {
+  intl: intlShape.isRequired,
  passingGrade: PropTypes.number.isRequired,
 };

-export default GradeBar;
+export default injectIntl(GradeBar);
--- a/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx
@@ -1,19 +1,20 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { InfoOutline } from '@openedx/paragon/icons';
 import {
  Icon, IconButton, OverlayTrigger, Popover,
 } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';

 import messages from '../messages';

-const GradeRangeTooltip = ({ iconButtonClassName, passingGrade }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const GradeRangeTooltip = ({ intl, iconButtonClassName, passingGrade }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    gradesFeatureIsFullyLocked,
@@ -79,7 +80,8 @@ GradeRangeTooltip.defaultProps = {

 GradeRangeTooltip.propTypes = {
  iconButtonClassName: PropTypes.string,
+  intl: intlShape.isRequired,
  passingGrade: PropTypes.number.isRequired,
 };

-export default GradeRangeTooltip;
+export default injectIntl(GradeRangeTooltip);
--- a/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
+++ b/src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx
@@ -1,12 +1,14 @@
+import React from 'react';
 import PropTypes from 'prop-types';

-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';

 import messages from '../messages';

-const PassingGradeTooltip = ({ passingGrade, tooltipClassName }) => {
-  const intl = useIntl();
+const PassingGradeTooltip = ({ intl, passingGrade, tooltipClassName }) => {
  const isLocaleRtl = isRtl(getLocale());

  let passingGradeDirection = passingGrade < 50 ? '' : '-';
@@ -52,8 +54,9 @@ PassingGradeTooltip.defaultProps = {
 };

 PassingGradeTooltip.propTypes = {
+  intl: intlShape.isRequired,
  passingGrade: PropTypes.number.isRequired,
  tooltipClassName: PropTypes.string,
 };

-export default PassingGradeTooltip;
+export default injectIntl(PassingGradeTooltip);
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx
@@ -1,20 +1,22 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Locked } from '@openedx/paragon/icons';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Blocked } from '@openedx/paragon/icons';
 import { Icon, Hyperlink } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
-import { showUngradedAssignments } from '../../utils';

 import DetailedGradesTable from './DetailedGradesTable';

 import messages from '../messages';

-const DetailedGrades = () => {
-  const intl = useIntl();
+const DetailedGrades = ({ intl }) => {
  const { administrator } = getAuthenticatedUser();
-  const courseId = useContextId();
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
  const {
    org,
    tabs,
@@ -26,8 +28,6 @@ const DetailedGrades = () => {
  } = useModel('progress', courseId);

  const hasSectionScores = sectionScores.length > 0;
-  const emptyTableMsg = showUngradedAssignments()
-    ? messages.detailedGradesEmpty : messages.detailedGradesEmptyOnlyGraded;

  const logOutlineLinkClick = () => {
    sendTrackEvent('edx.ui.lms.course_progress.detailed_grades.course_outline_link.clicked', {
@@ -54,36 +54,35 @@ const DetailedGrades = () => {

  return (
    <section className="text-dark-700">
-      <h3 className="h4">{intl.formatMessage(messages.detailedGrades)}</h3>
-      <ul className="micro mb-3 pl-3 text-gray-700">
-        <li>
-          <b>{intl.formatMessage(messages.practiceScoreLabel)} </b>
-          {intl.formatMessage(messages.practiceScoreInfoText)}
-        </li>
-        <li>
-          <b>{intl.formatMessage(messages.gradedScoreLabel)} </b>
-          {intl.formatMessage(messages.gradedScoreInfoText)}
-        </li>
-      </ul>
+      <h3 className="h4 mb-3">{intl.formatMessage(messages.detailedGrades)}</h3>
      {gradesFeatureIsPartiallyLocked && (
        <div className="mb-3 small ml-0 d-inline">
-          <Icon className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Locked} data-testid="locked-icon" />
-          {intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation, { upgradeLink: '' })}
+          <Icon className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" />
+          {intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation)}
        </div>
      )}
      {hasSectionScores && (
        <DetailedGradesTable />
      )}
      {!hasSectionScores && (
-        <p className="small">{intl.formatMessage(emptyTableMsg)}</p>
+        <p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>
      )}
-      {overviewTabUrl && !showUngradedAssignments() && (
+      {overviewTabUrl && (
        <p className="x-small m-0">
-          {intl.formatMessage(messages.ungradedAlert, { outlineLink })}
+          <FormattedMessage
+            id="progress.ungradedAlert"
+            defaultMessage="For progress on ungraded aspects of the course, view your {outlineLink}."
+            description="Text that precede link that redirect to course outline page"
+            values={{ outlineLink }}
+          />
        </p>
      )}
    </section>
  );
 };

-export default DetailedGrades;
+DetailedGrades.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DetailedGrades);
--- a/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx
@@ -1,15 +1,19 @@
-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { DataTable } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';

 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';
 import SubsectionTitleCell from './SubsectionTitleCell';
-import { showUngradedAssignments } from '../../utils';

-const DetailedGradesTable = () => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const DetailedGradesTable = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    sectionScores,
@@ -20,10 +24,9 @@ const DetailedGradesTable = () => {
    sectionScores.map((chapter) => {
      const subsectionScores = chapter.subsections.filter(
        (subsection) => !!(
-          (showUngradedAssignments() || subsection.hasGradedAssignment)
-            && subsection.showGrades
-            && (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)
-        ),
+          subsection.hasGradedAssignment
+          && subsection.showGrades
+          && (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)),
      );

      if (subsectionScores.length === 0) {
@@ -63,4 +66,8 @@ const DetailedGradesTable = () => {
  );
 };

-export default DetailedGradesTable;
+DetailedGradesTable.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(DetailedGradesTable);
--- a/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx
@@ -1,19 +1,18 @@
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';

-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';

 import messages from '../messages';

-const ProblemScoreDrawer = ({ problemScores, subsection }) => {
-  const intl = useIntl();
+const ProblemScoreDrawer = ({ intl, problemScores, subsection }) => {
  const isLocaleRtl = isRtl(getLocale());
-
-  const scoreLabel = subsection.hasGradedAssignment ? messages.gradedScoreLabel : messages.practiceScoreLabel;
-
  return (
    <span className="row w-100 m-0 x-small ml-4 pt-2 pl-1 text-gray-700 flex-nowrap">
-      <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(scoreLabel)}</span>
+      <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(messages.problemScoreLabel)}</span>
      <div className={classNames('col', 'p-0', { 'greyed-out': !subsection.learnerHasAccess })}>
        <ul className="list-unstyled row w-100 m-0" aria-labelledby="problem-score-label">
          {problemScores.map((problemScore, i) => (
@@ -27,14 +26,12 @@ const ProblemScoreDrawer = ({ problemScores, subsection }) => {
 };

 ProblemScoreDrawer.propTypes = {
+  intl: intlShape.isRequired,
  problemScores: PropTypes.arrayOf(PropTypes.shape({
    earned: PropTypes.number.isRequired,
    possible: PropTypes.number.isRequired,
  })).isRequired,
-  subsection: PropTypes.shape({
-    learnerHasAccess: PropTypes.bool,
-    hasGradedAssignment: PropTypes.bool,
-  }).isRequired,
+  subsection: PropTypes.shape({ learnerHasAccess: PropTypes.bool }).isRequired,
 };

-export default ProblemScoreDrawer;
+export default injectIntl(ProblemScoreDrawer);
--- a/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
+++ b/src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx
@@ -1,24 +1,23 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Collapsible, Icon, Row } from '@openedx/paragon';
 import {
-  ArrowDropDown,
-  ArrowDropUp,
-  Info,
-  Locked,
+  ArrowDropDown, ArrowDropUp, Blocked, Info,
 } from '@openedx/paragon/icons';
-import { useContextId } from '../../../../data/hooks';

 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
 import ProblemScoreDrawer from './ProblemScoreDrawer';

-const SubsectionTitleCell = ({ subsection }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const SubsectionTitleCell = ({ intl, subsection }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
  const {
    org,
  } = useModel('courseHomeMeta', courseId);
@@ -62,8 +61,8 @@ const SubsectionTitleCell = ({ subsection }) => {
                aria-label={intl.formatMessage(messages.noAccessToSubsection, { displayName })}
                className="mr-1 mt-1 d-inline-flex"
                style={{ height: '1rem', width: '1rem' }}
-                src={Locked}
-                data-testid="locked-icon"
+                src={Blocked}
+                data-testid="blocked-icon"
              />
            )}
          {url ? (
@@ -103,6 +102,7 @@ const SubsectionTitleCell = ({ subsection }) => {
 };

 SubsectionTitleCell.propTypes = {
+  intl: intlShape.isRequired,
  subsection: PropTypes.shape({
    blockKey: PropTypes.string.isRequired,
    displayName: PropTypes.string.isRequired,
@@ -119,4 +119,4 @@ SubsectionTitleCell.propTypes = {
  }).isRequired,
 };

-export default SubsectionTitleCell;
+export default injectIntl(SubsectionTitleCell);
--- a/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx
@@ -1,22 +1,24 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Locked } from '@openedx/paragon/icons';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { Blocked } from '@openedx/paragon/icons';
 import { Icon } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 import messages from '../messages';

 const AssignmentTypeCell = ({
-  assignmentType, footnoteMarker, footnoteId, locked,
+  intl, assignmentType, footnoteMarker, footnoteId, locked,
 }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    gradesFeatureIsFullyLocked,
  } = useModel('progress', courseId);

-  const lockedIcon = locked ? <Icon id={`assignmentTypeBlockedIcon${assignmentType}`} aria-label={intl.formatMessage(messages.noAccessToAssignmentType, { assignmentType })} className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Locked} data-testid="locked-icon" /> : '';
+  const lockedIcon = locked ? <Icon id={`assignmentTypeBlockedIcon${assignmentType}`} aria-label={intl.formatMessage(messages.noAccessToAssignmentType, { assignmentType })} className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" /> : '';

  return (
    <div className="d-flex small">
@@ -43,6 +45,7 @@ const AssignmentTypeCell = ({
 };

 AssignmentTypeCell.propTypes = {
+  intl: intlShape.isRequired,
  assignmentType: PropTypes.string.isRequired,
  footnoteId: PropTypes.string,
  footnoteMarker: PropTypes.number,
@@ -55,4 +58,4 @@ AssignmentTypeCell.defaultProps = {
  locked: false,
 };

-export default AssignmentTypeCell;
+export default injectIntl(AssignmentTypeCell);
--- a/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx
@@ -1,14 +1,16 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
-import { useContextId } from '../../../../data/hooks';
+import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';

-const DroppableAssignmentFootnote = ({ footnotes }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const DroppableAssignmentFootnote = ({ footnotes, intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
  const {
    gradesFeatureIsFullyLocked,
  } = useModel('progress', courseId);
@@ -19,10 +21,14 @@ const DroppableAssignmentFootnote = ({ footnotes }) => {
        {footnotes.map((footnote, index) => (
          <li id={`${footnote.id}-footnote`} key={footnote.id} className="x-small mt-1">
            <sup>{index + 1}</sup>
-            {intl.formatMessage(messages.droppableAssignmentsText, {
-              numDroppable: footnote.numDroppable,
-              assignmentType: footnote.assignmentType,
-            })}
+            <FormattedMessage
+              id="progress.footnotes.droppableAssignments"
+              defaultMessage="The lowest {numDroppable, plural, one{# {assignmentType} score is} other{# {assignmentType} scores are}} dropped."
+              values={{
+                numDroppable: footnote.numDroppable,
+                assignmentType: footnote.assignmentType,
+              }}
+            />
            <a className="sr-only" href={`#${footnote.id}-ref`} tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}>
              {intl.formatMessage(messages.backToContent)}
            </a>
@@ -39,6 +45,7 @@ DroppableAssignmentFootnote.propTypes = {
    id: PropTypes.string.isRequired,
    numDroppable: PropTypes.number.isRequired,
  })).isRequired,
+  intl: intlShape.isRequired,
 };

-export default DroppableAssignmentFootnote;
+export default injectIntl(DroppableAssignmentFootnote);
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummary.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummary.jsx
@@ -1,13 +1,14 @@
 import React, { useState } from 'react';
-
-import { useContextId } from '../../../../data/hooks';
+import { useSelector } from 'react-redux';
 import { useModel } from '../../../../generic/model-store';

 import GradeSummaryHeader from './GradeSummaryHeader';
 import GradeSummaryTable from './GradeSummaryTable';

 const GradeSummary = () => {
-  const courseId = useContextId();
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    gradingPolicy: {
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx
@@ -1,69 +1,64 @@
+import React, { useState } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
-  Hyperlink,
-  Icon,
-  OverlayTrigger,
-  Stack,
-  Tooltip,
+  Icon, IconButton, OverlayTrigger, Popover,
 } from '@openedx/paragon';
-import { InfoOutline, Locked } from '@openedx/paragon/icons';
-import { useContextId } from '../../../../data/hooks';
+import { Blocked, InfoOutline } from '@openedx/paragon/icons';

 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';

-const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const GradeSummaryHeader = ({ intl, allOfSomeAssignmentTypeIsLocked }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
  const {
-    verifiedMode,
    gradesFeatureIsFullyLocked,
  } = useModel('progress', courseId);
+  const [showTooltip, setShowTooltip] = useState(false);

  return (
-    <Stack gap={2} className="mb-3">
-      <Stack direction="horizontal" gap={2}>
-        <h3 className="h4 m-0">{intl.formatMessage(messages.gradeSummary)}</h3>
-        <OverlayTrigger
-          trigger="hover"
-          placement="top"
-          overlay={(
-            <Tooltip>
+    <div className="row w-100 m-0 align-items-center">
+      <h3 className="h4 mb-3 mr-1">{intl.formatMessage(messages.gradeSummary)}</h3>
+      <OverlayTrigger
+        trigger="click"
+        placement="top"
+        show={showTooltip}
+        overlay={(
+          <Popover>
+            <Popover.Content className="small text-dark-700">
              {intl.formatMessage(messages.gradeSummaryTooltipBody)}
-            </Tooltip>
-          )}
-        >
-          <Icon
-            alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
-            src={InfoOutline}
-            size="sm"
-          />
-        </OverlayTrigger>
-      </Stack>
+            </Popover.Content>
+          </Popover>
+        )}
+      >
+        <IconButton
+          onClick={() => { setShowTooltip(!showTooltip); }}
+          onBlur={() => { setShowTooltip(false); }}
+          alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
+          src={InfoOutline}
+          iconAs={Icon}
+          className="mb-3"
+          size="sm"
+          disabled={gradesFeatureIsFullyLocked}
+        />
+      </OverlayTrigger>
      {!gradesFeatureIsFullyLocked && allOfSomeAssignmentTypeIsLocked && (
-        <Stack direction="horizontal" className="small" gap={2}>
-          <Icon size="sm" src={Locked} data-testid="locked-icon" />
-          <span>
-            {intl.formatMessage(
-              messages.gradeSummaryLimitedAccessExplanation,
-              {
-                upgradeLink: verifiedMode && (
-                  <Hyperlink destination={verifiedMode.upgradeUrl}>
-                    {intl.formatMessage(messages.courseGradePreviewUpgradeButton)}.
-                  </Hyperlink>
-                ),
-              },
-            )}
-          </span>
-        </Stack>
+        <div className="mb-3 small ml-0 d-inline">
+          <Icon className="mr-1 mt-1 d-inline-flex" style={{ height: '1rem', width: '1rem' }} src={Blocked} data-testid="blocked-icon" />
+          {intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation)}
+        </div>
      )}
-    </Stack>
+    </div>
  );
 };

 GradeSummaryHeader.propTypes = {
+  intl: intlShape.isRequired,
  allOfSomeAssignmentTypeIsLocked: PropTypes.bool.isRequired,
 };

-export default GradeSummaryHeader;
+export default injectIntl(GradeSummaryHeader);
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTable.jsx
@@ -1,8 +1,11 @@
+import React from 'react';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';

-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import {
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
 import { DataTable } from '@openedx/paragon';
-import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';

 import AssignmentTypeCell from './AssignmentTypeCell';
@@ -11,9 +14,10 @@ import GradeSummaryTableFooter from './GradeSummaryTableFooter';

 import messages from '../messages';

-const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const GradeSummaryTable = ({ intl, setAllOfSomeAssignmentTypeIsLocked }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    gradingPolicy: {
@@ -30,14 +34,6 @@ const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
    return footnoteId.replace(/[^A-Za-z0-9.-_]+/g, '-');
  };

-  const getGradePercent = (grade) => {
-    if (Number.isInteger(grade * 100)) {
-      return (grade * 100).toFixed(0);
-    }
-
-    return (grade * 100).toFixed(2);
-  };
-
  const hasNoAccessToAssignmentsOfType = (assignmentType) => {
    const subsectionAssignmentsOfType = sectionScores.map((chapter) => chapter.subsections.filter((subsection) => (
      subsection.assignmentType === assignmentType && subsection.hasGradedAssignment
@@ -56,37 +52,31 @@ const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
  };

  const gradeSummaryData = assignmentPolicies.map((assignment) => {
-    const {
-      averageGrade,
-      numDroppable,
-      type: assignmentType,
-      weight,
-      weightedGrade,
-    } = assignment;
    let footnoteId = '';
    let footnoteMarker;

-    if (numDroppable > 0) {
+    if (assignment.numDroppable > 0) {
      footnoteId = getFootnoteId(assignment);
      footnotes.push({
        id: footnoteId,
-        numDroppable,
-        assignmentType,
+        numDroppable: assignment.numDroppable,
+        assignmentType: assignment.type,
      });

      footnoteMarker = footnotes.length;
    }

-    const locked = !gradesFeatureIsFullyLocked && hasNoAccessToAssignmentsOfType(assignmentType);
+    const locked = !gradesFeatureIsFullyLocked && hasNoAccessToAssignmentsOfType(assignment.type);
+
    const isLocaleRtl = isRtl(getLocale());

    return {
      type: {
-        footnoteId, footnoteMarker, type: assignmentType, locked,
+        footnoteId, footnoteMarker, type: assignment.type, locked,
      },
-      weight: { weight: `${(weight * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
-      grade: { grade: `${getGradePercent(averageGrade)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
-      weightedGrade: { weightedGrade: `${getGradePercent(weightedGrade)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
+      weight: { weight: `${(assignment.weight * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
+      grade: { grade: `${(assignment.averageGrade * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
+      weightedGrade: { weightedGrade: `${(assignment.weightedGrade * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
    };
  });
  const getAssignmentTypeCell = (value) => (
@@ -147,7 +137,8 @@ const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
 };

 GradeSummaryTable.propTypes = {
+  intl: intlShape.isRequired,
  setAllOfSomeAssignmentTypeIsLocked: PropTypes.func.isRequired,
 };

-export default GradeSummaryTable;
+export default injectIntl(GradeSummaryTable);
--- a/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
+++ b/src/course-home/progress-tab/grades/grade-summary/GradeSummaryTableFooter.jsx
@@ -1,35 +1,18 @@
-import { useContext } from 'react';
+import React from 'react';
+import { useSelector } from 'react-redux';

-import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
 import {
-  DataTable,
-  DataTableContext,
-  Icon,
-  OverlayTrigger,
-  Stack,
-  Tooltip,
-} from '@openedx/paragon';
-import { InfoOutline } from '@openedx/paragon/icons';
-import { useContextId } from '../../../../data/hooks';
-
+  getLocale, injectIntl, intlShape, isRtl,
+} from '@edx/frontend-platform/i18n';
+import { DataTable } from '@openedx/paragon';
 import { useModel } from '../../../../generic/model-store';
+
 import messages from '../messages';

-const GradeSummaryTableFooter = () => {
-  const intl = useIntl();
-
-  const { data } = useContext(DataTableContext);
-
-  const rawGrade = data.reduce(
-    (grade, currentValue) => {
-      const { weightedGrade } = currentValue.weightedGrade;
-      const percent = weightedGrade.replace(/%/g, '').trim();
-      return grade + parseFloat(percent);
-    },
-    0,
-  ).toFixed(2);
-
-  const courseId = useContextId();
+const GradeSummaryTableFooter = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);

  const {
    courseGrade: {
@@ -46,33 +29,15 @@ const GradeSummaryTableFooter = () => {
  return (
    <DataTable.TableFooter className={`border-top border-primary ${bgColor}`}>
      <div className="row w-100 m-0">
-        <div id="weighted-grade-summary" className="col-8 p-0 small">
-          <Stack gap={2} direction="horizontal">
-            {intl.formatMessage(messages.weightedGradeSummary)}
-            <OverlayTrigger
-              trigger="hover"
-              placement="bottom"
-              overlay={(
-                <Tooltip>
-                  {intl.formatMessage(
-                    messages.weightedGradeSummaryTooltip,
-                    { roundedGrade: totalGrade, rawGrade },
-                  )}
-                </Tooltip>
-              )}
-            >
-              <Icon
-                src={InfoOutline}
-                size="sm"
-                alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
-              />
-            </OverlayTrigger>
-          </Stack>
-        </div>
+        <div id="weighted-grade-summary" className="col-8 p-0 small">{intl.formatMessage(messages.weightedGradeSummary)}</div>
        <div data-testid="gradeSummaryFooterTotalWeightedGrade" aria-labelledby="weighted-grade-summary" className="col-4 p-0 text-right font-weight-bold small">{totalGrade}{isLocaleRtl && '\u200f'}%</div>
      </div>
    </DataTable.TableFooter>
  );
 };

-export default GradeSummaryTableFooter;
+GradeSummaryTableFooter.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(GradeSummaryTableFooter);
--- a/src/course-home/progress-tab/grades/messages.ts
+++ b/src/course-home/progress-tab/grades/messages.ts
@@ -78,7 +78,7 @@ const messages = defineMessages({
  },
  courseOutline: {
    id: 'progress.courseOutline',
-    defaultMessage: 'Course outline',
+    defaultMessage: 'Course Outline',
    description: 'Anchor text for link that redirects to (course outline) tab',
  },
  currentGradeLabel: {
@@ -91,14 +91,9 @@ const messages = defineMessages({
    defaultMessage: 'Detailed grades',
    description: 'Headline for the (detailed grade) section in the progress tab',
  },
-  detailedGradesEmptyOnlyGraded: {
+  detailedGradesEmpty: {
    id: 'progress.detailedGrades.emptyTable',
    defaultMessage: 'You currently have no graded problem scores.',
-    description: 'It indicate that there are no graded problem or assignments to be scored',
-  },
-  detailedGradesEmpty: {
-    id: 'progress.detailedGrades.including-ungraded.emptyTable',
-    defaultMessage: 'You currently have no graded or ungraded problem scores.',
    description: 'It indicate that there are no problem or assignments to be scored',
  },
  footnotesTitle: {
@@ -133,7 +128,7 @@ const messages = defineMessages({
  },
  gradeSummaryLimitedAccessExplanation: {
    id: 'progress.gradeSummary.limitedAccessExplanation',
-    defaultMessage: 'You have limited access to graded assignments as part of the audit track in this course. {upgradeLink}',
+    defaultMessage: 'You have limited access to graded assignments as part of the audit track in this course.',
    description: 'Text shown when learner has limited access to grade feature',
  },
  gradeSummaryTooltipAlt: {
@@ -163,16 +158,11 @@ const messages = defineMessages({
    defaultMessage: 'Passing grade',
    description: 'Label for mark on the (grade bar) chart which indicate the poisition of passing grade on the bar',
  },
-  gradedScoreLabel: {
+  problemScoreLabel: {
    id: 'progress.detailedGrades.problemScore.label',
-    defaultMessage: 'Graded Scores:',
+    defaultMessage: 'Problem Scores:',
    description: 'Label text which precedes detailed view of all scores per assignment',
  },
-  practiceScoreLabel: {
-    id: 'progress.detailedGrades.practice.problemScore.label',
-    defaultMessage: 'Practice Scores:',
-    description: 'Label text which precedes detailed view of all ungraded problem scores per assignment',
-  },
  problemScoreToggleAltText: {
    id: 'progress.detailedGrades.problemScore.toggleButton',
    defaultMessage: 'Toggle individual problem scores for {subsectionTitle}',
@@ -203,31 +193,7 @@ const messages = defineMessages({
    defaultMessage: 'Your current weighted grade summary',
    description: 'It the text precede the sum of weighted grades of all the assignment',
  },
-  weightedGradeSummaryTooltip: {
-    id: 'progress.weightedGradeSummary',
-    defaultMessage: 'Your raw weighted grade summary is {rawGrade} and rounds to {roundedGrade}.',
-    description: 'Tooltip content that explains the rounding of the summary versus individual assignments',
-  },
-  practiceScoreInfoText: {
-    id: 'progress.detailedGrades.practice-label.info.text',
-    defaultMessage: 'Scores from non-graded activities meant for practice and self-assessment.',
-    description: 'Information text about non-graded practice score label',
-  },
-  gradedScoreInfoText: {
-    id: 'progress.detailedGrades.problem-label.info.text',
-    defaultMessage: 'Scores from activities that contribute to your final grade.',
-    description: 'Information text about graded problem score label',
-  },
-  ungradedAlert: {
-    id: 'progress.ungradedAlert',
-    defaultMessage: 'For progress on ungraded aspects of the course, view your {outlineLink}.',
-    description: 'Text that precede link that redirect to course outline page',
-  },
-  droppableAssignmentsText: {
-    id: 'progress.footnotes.droppableAssignments',
-    defaultMessage: 'The lowest {numDroppable, plural, one{# {assignmentType} score is} other{# {assignmentType} scores are}} dropped.',
-    description: 'Footnote text stating how many assignments are dropped',
-  },
+
 });

 export default messages;
--- a/src/course-home/progress-tab/related-links/RelatedLinks.jsx
+++ b/src/course-home/progress-tab/related-links/RelatedLinks.jsx
@@ -1,15 +1,18 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Hyperlink } from '@openedx/paragon';
-import { useContextId } from '../../../data/hooks';

 import messages from './messages';
 import { useModel } from '../../../generic/model-store';

-const RelatedLinks = () => {
-  const intl = useIntl();
-  const courseId = useContextId();
+const RelatedLinks = ({ intl }) => {
+  const {
+    courseId,
+  } = useSelector(state => state.courseHome);
  const {
    org,
    tabs,
@@ -55,4 +58,8 @@ const RelatedLinks = () => {
  );
 };

-export default RelatedLinks;
+RelatedLinks.propTypes = {
+  intl: intlShape.isRequired,
+};
+
+export default injectIntl(RelatedLinks);
--- a/src/course-home/progress-tab/related-links/messages.ts
+++ b/src/course-home/progress-tab/related-links/messages.ts
@@ -18,7 +18,7 @@ const messages = defineMessages({
  },
  outlineCardLink: {
    id: 'progress.relatedLinks.outlineCard.link',
-    defaultMessage: 'Course outline',
+    defaultMessage: 'Course Outline',
    description: 'Anchor text for link that redirects to course outline tab',
  },
  relatedLinks: {
--- a/src/course-home/progress-tab/utils.ts
+++ b/src/course-home/progress-tab/utils.ts
@@ -1,7 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-
-/* eslint-disable import/prefer-default-export */
-export const showUngradedAssignments = () => (
-  getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === 'true'
-  || getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === true
-);
--- a/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/ShiftDatesAlert.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Alert,
  Button,
@@ -14,8 +14,7 @@ import { resetDeadlines } from '../data';
 import { useModel } from '../../generic/model-store';
 import messages from './messages';

-const ShiftDatesAlert = ({ fetch, model }) => {
-  const intl = useIntl();
+const ShiftDatesAlert = ({ fetch, intl, model }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -60,7 +59,8 @@ const ShiftDatesAlert = ({ fetch, model }) => {

 ShiftDatesAlert.propTypes = {
  fetch: PropTypes.func.isRequired,
+  intl: intlShape.isRequired,
  model: PropTypes.string.isRequired,
 };

-export default ShiftDatesAlert;
+export default injectIntl(ShiftDatesAlert);
--- a/src/course-home/suggested-schedule-messaging/SuggestedScheduleHeader.jsx
+++ b/src/course-home/suggested-schedule-messaging/SuggestedScheduleHeader.jsx
@@ -1,15 +1,16 @@
 import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';

 import messages from './messages';

-const SuggestedScheduleHeader = () => {
-  const intl = useIntl();
-  return (
-    <p className="large">
-      {intl.formatMessage(messages.suggestedSchedule)}
-    </p>
-  );
+const SuggestedScheduleHeader = ({ intl }) => (
+  <p className="large">
+    {intl.formatMessage(messages.suggestedSchedule)}
+  </p>
+);
+
+SuggestedScheduleHeader.propTypes = {
+  intl: intlShape.isRequired,
 };

-export default SuggestedScheduleHeader;
+export default injectIntl(SuggestedScheduleHeader);
--- a/src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Alert,
  Button,
@@ -12,8 +12,7 @@ import {
 import { useModel } from '../../generic/model-store';
 import messages from './messages';

-const UpgradeToCompleteAlert = ({ logUpgradeLinkClick }) => {
-  const intl = useIntl();
+const UpgradeToCompleteAlert = ({ intl, logUpgradeLinkClick }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -59,6 +58,7 @@ const UpgradeToCompleteAlert = ({ logUpgradeLinkClick }) => {
 };

 UpgradeToCompleteAlert.propTypes = {
+  intl: intlShape.isRequired,
  logUpgradeLinkClick: PropTypes.func,
 };

@@ -66,4 +66,4 @@ UpgradeToCompleteAlert.defaultProps = {
  logUpgradeLinkClick: () => {},
 };

-export default UpgradeToCompleteAlert;
+export default injectIntl(UpgradeToCompleteAlert);
--- a/src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx
+++ b/src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';

-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import {
  Alert,
  Button,
@@ -13,8 +13,7 @@ import {
 import { useModel } from '../../generic/model-store';
 import messages from './messages';

-const UpgradeToShiftDatesAlert = ({ logUpgradeLinkClick, model }) => {
-  const intl = useIntl();
+const UpgradeToShiftDatesAlert = ({ intl, logUpgradeLinkClick, model }) => {
  const {
    courseId,
  } = useSelector(state => state.courseHome);
@@ -61,6 +60,7 @@ const UpgradeToShiftDatesAlert = ({ logUpgradeLinkClick, model }) => {
 };

 UpgradeToShiftDatesAlert.propTypes = {
+  intl: intlShape.isRequired,
  logUpgradeLinkClick: PropTypes.func,
  model: PropTypes.string.isRequired,
 };
@@ -69,4 +69,4 @@ UpgradeToShiftDatesAlert.defaultProps = {
  logUpgradeLinkClick: () => {},
 };

-export default UpgradeToShiftDatesAlert;
+export default injectIntl(UpgradeToShiftDatesAlert);
--- a/src/course-tabs/CourseTabsNavigation.jsx
+++ b/src/course-tabs/CourseTabsNavigation.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import classNames from 'classnames';

 import messages from './messages';
@@ -9,9 +9,8 @@ import { CoursewareSearch, CoursewareSearchToggle } from '../course-home/coursew
 import { useCoursewareSearchState } from '../course-home/courseware-search/hooks';

 const CourseTabsNavigation = ({
-  activeTabSlug, className, tabs,
+  activeTabSlug, className, tabs, intl,
 }) => {
-  const intl = useIntl();
  const { show } = useCoursewareSearchState();

  return (
@@ -52,6 +51,7 @@ CourseTabsNavigation.propTypes = {
    slug: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
  })).isRequired,
+  intl: intlShape.isRequired,
 };

 CourseTabsNavigation.defaultProps = {
@@ -59,4 +59,4 @@ CourseTabsNavigation.defaultProps = {
  className: null,
 };

-export default CourseTabsNavigation;
+export default injectIntl(CourseTabsNavigation);
--- a/src/course-tabs/CourseTabsNavigation.test.jsx
+++ b/src/course-tabs/CourseTabsNavigation.test.jsx
@@ -73,13 +73,13 @@ describe('Course Tabs Navigation', () => {
  it('should NOT render CoursewareSearch if the flag is off', () => {
    renderComponent();

-    expect(screen.queryByTestId('courseware-search-dialog')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('courseware-search-section')).not.toBeInTheDocument();
  });

  it('should render CoursewareSearch if the flag is on', () => {
    useCoursewareSearchState.mockImplementation(() => ({ show: true }));
    renderComponent();

-    expect(screen.queryByTestId('courseware-search-dialog')).toBeInTheDocument();
+    expect(screen.queryByTestId('courseware-search-section')).toBeInTheDocument();
  });
 });
--- a/Show More
+++ b/Show More