fix: react state never updated when tour opened

feat: improved local translation handling

.env

@@ -12,10 +12,12 @@ CREDIT_HELP_LINK_URL=''
 CSRF_TOKEN_API_PATH=''
 DISCOVERY_API_BASE_URL=''
 DISCUSSIONS_MFE_BASE_URL=''
+DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL=''
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME=''
+ENTERPRISE_LEARNER_PORTAL_URL=''
 EXAMS_BASE_URL=''
 FAVICON_URL=''
 IGNORED_ERROR_REGEX=''
@@ -48,3 +50,6 @@ TWITTER_HASHTAG=''
 TWITTER_URL=''
 USER_INFO_COOKIE_NAME=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
+SHOW_UNGRADED_ASSIGNMENT_PROGRESS=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -8,14 +8,16 @@ 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://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_credit_courses.html#keep-track-of-credit-requirements'
+CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-college-credit-or-credit-hours-for-my-course'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
+DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
+ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:8734'
 EXAMS_BASE_URL=''
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 IGNORED_ERROR_REGEX=''
@@ -50,3 +52,6 @@ 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=''
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -8,14 +8,16 @@ 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://edx.readthedocs.io/projects/edx-guide-for-students/en/latest/SFD_credit_courses.html#keep-track-of-credit-requirements'
+CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-college-credit-or-credit-hours-for-my-course'
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 DISCOVERY_API_BASE_URL='http://localhost:18381'
 DISCUSSIONS_MFE_BASE_URL='http://localhost:2002'
+DISCOUNT_CODE_INFO_URL=''
 ECOMMERCE_BASE_URL='http://localhost:18130'
 ENABLE_JUMPNAV='true'
 ENABLE_NOTICES=''
 ENTERPRISE_LEARNER_PORTAL_HOSTNAME='localhost:8734'
+ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:8734'
 EXAMS_BASE_URL='http://localhost:18740'
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 IGNORED_ERROR_REGEX=''
@@ -47,3 +49,6 @@ 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=''
+ENTERPRISE_LEARNER_PORTAL_URL='http://localhost:Enterprise'
+FEATURE_ENABLE_CHAT_V2_ENDPOINT='false'

.github/workflows/add-issue-to-btr-project.yml

@@ -0,0 +1,18 @@
+# Run the workflow that adds new tickets that are labelled "release testing"
+# to the org-wide BTR project board
+
+name: Add release testing issues to the BTR project board
+
+on:
+  issues:
+    types: [labeled]
+    # This workflow is triggered when an issue is labeled with 'release testing'.
+    # It adds the issue to the BTR project and applies the 'needs triage' label
+    # if it doesn't already have it.
+
+jobs:
+  handle-release-testing:
+    uses: openedx/.github/.github/workflows/add-issue-to-btr-project.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}

.github/workflows/validate.yml

@@ -9,35 +9,28 @@ 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: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
     - run: make validate.ci
     - name: Archive code coverage results
       uses: actions/upload-artifact@v4
       with:
-        name: code-coverage-report-${{ matrix.node }}
-        # When we're only using Node 20, replace the line above with the following:
-        # name: code-coverage-report
+        name: code-coverage-report
         path: coverage/*.*
   coverage:
     runs-on: ubuntu-latest
     needs: tests
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
     - name: Download code coverage results
       uses: actions/download-artifact@v4
       with:
-        name: code-coverage-report-20
-        # When we're only using Node 20, replace the line above with the following:
-        # name: code-coverage-report
+        name: code-coverage-report
     - name: Upload coverage
-      uses: codecov/codecov-action@v4
+      uses: codecov/codecov-action@v5
       with:
         fail_ci_if_error: true
         token: ${{ secrets.CODECOV_TOKEN }}

.husky/_/.gitignore

@@ -1 +0,0 @@
-*

.husky/_/husky.sh

@@ -1,31 +0,0 @@
-#!/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

.husky/pre-commit

@@ -1,4 +0,0 @@
-#!/bin/sh
-. "$(dirname "$0")/_/husky.sh"
-
-npm run lint

Makefile

@@ -40,9 +40,10 @@ pull_translations:
 	           translations/frontend-component-header/src/i18n/messages:frontend-component-header \
 	           translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
 	           translations/frontend-lib-special-exams/src/i18n/messages:frontend-lib-special-exams \
-	           translations/frontend-app-learning/src/i18n/messages:frontend-app-learning
+	           translations/frontend-app-learning/src/i18n/messages:frontend-app-learning \
+	           $(ATLAS_EXTRA_SOURCES)
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-lib-special-exams frontend-app-learning
+	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-lib-special-exams frontend-app-learning $(ATLAS_EXTRA_INTL_IMPORTS)
 
 
 # This target is used by Travis.

README.rst

@@ -41,9 +41,8 @@ Cloning and Setup
 
     git clone https://github.com/openedx/frontend-app-learning.git
 
-2. Use node v20.x.
+2. Use the version of Node specified in ``.nvmrc``.
 
-  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>`_.
@@ -131,7 +130,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://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html>`_.
+`MFE applications <https://openedx.github.io/frontend-platform/>`_.
 
 Plugins
 =======
@@ -145,7 +144,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://edx.readthedocs.io/projects/edx-developer-docs/en/latest/developers_guide/micro_frontends_in_open_edx.html#required-environment-variables>`_.
+`Required Environment Variables <https://openedx.github.io/frontend-platform/>`_.
 
 The learning micro-frontend also supports the following additional variables:
 

catalog-info.yaml

@@ -12,6 +12,7 @@ metadata:
       icon: "Web"
   annotations:
     openedx.org/arch-interest-groups: ""
+    openedx.org/release: "master"
 spec:
   owner: group:committers-frontend-app-learning
   type: 'website'

openedx.yaml

@@ -1,10 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# https://open-edx-proposals.readthedocs.io/en/latest/oep-0002-bp-repo-metadata.html#specification
-
-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

package.json

@@ -15,12 +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",
+    "start:with-theme": "paragon install-theme && npm start && npm install",
     "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": "NODE_ENV=test fedx-scripts jest --coverage --passWithNoTests",
+    "test:watch": "fedx-scripts jest --watch --passWithNoTests",
     "types": "tsc --noEmit"
   },
   "author": "edX",
@@ -34,43 +34,41 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/browserslist-config": "1.2.0",
-    "@edx/frontend-component-header": "^5.6.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": "3.0.0",
+    "@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.24.0",
+    "@edx/frontend-lib-special-exams": "^4.0.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/react-unit-test-utils": "^4.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.1.2",
-    "@openedx/frontend-plugin-framework": "^1.2.1",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.3.0",
+    "@openedx/frontend-build": "^14.5.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.5",
     "@popperjs/core": "2.11.8",
-    "@reduxjs/toolkit": "1.8.1",
+    "@reduxjs/toolkit": "1.9.7",
     "buffer": "^6.0.3",
     "classnames": "2.5.1",
-    "copy-webpack-plugin": "^11.0.0",
-    "husky": "7.0.4",
+    "copy-webpack-plugin": "^12.0.0",
     "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": "17.0.2",
-    "react-dom": "17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "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.1.2",
+    "redux": "4.2.1",
     "reselect": "4.1.8",
     "sass": "^1.79.3",
     "sass-loader": "^16.0.2",
@@ -80,11 +78,10 @@
   "devDependencies": {
     "@edx/reactifex": "2.2.0",
     "@pact-foundation/pact": "^13.0.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",
+    "@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",
     "bundlewatch": "^0.4.0",
     "eslint-import-resolver-webpack": "^0.13.9",
     "jest": "^29.7.0",
@@ -96,7 +93,7 @@
     "files": [
       {
         "path": "dist/*.js",
-        "maxSize": "1300kB"
+        "maxSize": "1450kB"
       }
     ],
     "normalizeFilenames": "^.+?(\\..+?)\\.\\w+$"

patches/@openedx+frontend-build+13.0.30.patch

@@ -1,36 +0,0 @@
-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'),

public/index.html

@@ -9,6 +9,9 @@
     <% 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>

src/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,228 @@
+// 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>
+          <div
+            className="app-container"
+          >
+            <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>
+          </div>
+        </UserMessagesProvider>
+      </NoticesProvider>
+    </PathFixesProvider>
+  </AppProvider>
+</React Strict Mode>
+`;

src/alerts/access-expiration-alert/AccessExpirationAlert.jsx

@@ -1,14 +1,13 @@
 import PropTypes from 'prop-types';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import {
-  FormattedMessage, FormattedDate, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedMessage, FormattedDate, useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { Info } from '@openedx/paragon/icons';
 
 import messages from './messages';
 
-const AccessExpirationAlert = ({ intl, payload }) => {
+const AccessExpirationAlert = ({ payload }) => {
+  const intl = useIntl();
   const {
     accessExpiration,
     courseId,
@@ -119,7 +118,6 @@ const AccessExpirationAlert = ({ intl, payload }) => {
 };
 
 AccessExpirationAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     accessExpiration: PropTypes.shape({
       expirationDate: PropTypes.string.isRequired,
@@ -134,4 +132,4 @@ AccessExpirationAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(AccessExpirationAlert);
+export default AccessExpirationAlert;

src/alerts/active-enteprise-alert/ActiveEnterpriseAlert.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Alert, Hyperlink } from '@openedx/paragon';
 import { WarningFilled } from '@openedx/paragon/icons';
@@ -7,7 +7,8 @@ import { WarningFilled } from '@openedx/paragon/icons';
 import { getConfig } from '@edx/frontend-platform';
 import genericMessages from './messages';
 
-const ActiveEnterpriseAlert = ({ intl, payload }) => {
+const ActiveEnterpriseAlert = ({ payload }) => {
+  const intl = useIntl();
   const { text, courseId } = payload;
   const changeActiveEnterprise = (
     <Hyperlink
@@ -38,11 +39,10 @@ const ActiveEnterpriseAlert = ({ intl, payload }) => {
 };
 
 ActiveEnterpriseAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     text: PropTypes.string,
     courseId: PropTypes.string,
   }).isRequired,
 };
 
-export default injectIntl(ActiveEnterpriseAlert);
+export default ActiveEnterpriseAlert;

src/alerts/enrollment-alert/EnrollmentAlert.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import PropTypes from 'prop-types';
 import { Alert, Button } from '@openedx/paragon';
 import { Info, WarningFilled } from '@openedx/paragon/icons';
@@ -11,7 +11,8 @@ import { useModel } from '../../generic/model-store';
 import messages from './messages';
 import useEnrollClickHandler from './clickHook';
 
-const EnrollmentAlert = ({ intl, payload }) => {
+const EnrollmentAlert = ({ payload }) => {
+  const intl = useIntl();
   const {
     canEnroll,
     courseId,
@@ -58,7 +59,6 @@ const EnrollmentAlert = ({ intl, payload }) => {
 };
 
 EnrollmentAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     canEnroll: PropTypes.bool,
     courseId: PropTypes.string,
@@ -67,4 +67,4 @@ EnrollmentAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(EnrollmentAlert);
+export default EnrollmentAlert;

src/alerts/logistration-alert/AccountActivationAlert.jsx

@@ -9,13 +9,12 @@ import {
   Icon,
 } from '@openedx/paragon';
 import { Check, ArrowForward } from '@openedx/paragon/icons';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { sendActivationEmail } from '../../courseware/data';
 import messages from './messages';
 
-const AccountActivationAlert = ({
-  intl,
-}) => {
+const AccountActivationAlert = () => {
+  const intl = useIntl();
   const [showModal, setShowModal] = useState(false);
   const [showSpinner, setShowSpinner] = useState(false);
   const [showCheck, setShowCheck] = useState(false);
@@ -125,8 +124,4 @@ const AccountActivationAlert = ({
   );
 };
 
-AccountActivationAlert.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(AccountActivationAlert);
+export default AccountActivationAlert;

src/alerts/logistration-alert/LogistrationAlert.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, 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 = ({ intl }) => {
+const LogistrationAlert = () => {
+  const intl = useIntl();
   const signIn = (
     <Hyperlink
       style={{ textDecoration: 'underline' }}
@@ -43,8 +44,4 @@ const LogistrationAlert = ({ intl }) => {
   );
 };
 
-LogistrationAlert.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(LogistrationAlert);
+export default LogistrationAlert;

src/constants.ts

@@ -13,6 +13,8 @@ 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',
@@ -20,7 +22,7 @@ export const DECODE_ROUTES = {
 
 export const ROUTES = {
   UNSUBSCRIBE: '/goal-unsubscribe/:token',
-  PREFERENCES_UNSUBSCRIBE: '/preferences-unsubscribe/:userToken/:updatePatch',
+  PREFERENCES_UNSUBSCRIBE: '/preferences-unsubscribe/:userToken/:updatePatch?',
   REDIRECT: '/redirect/*',
   DASHBOARD: 'dashboard',
   ENTERPRISE_LEARNER_DASHBOARD: 'enterprise-learner-dashboard',
@@ -46,6 +48,20 @@ 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',

src/course-home/courseware-search/CoursewareResultsFilter.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tabs, Tab } from '@openedx/paragon';
 
 import { useParams } from 'react-router';
@@ -13,7 +13,8 @@ const filterTypes = ['text', 'video', 'sequence'];
 const filterOther = 'other';
 const validFilters = [filterAll, ...filterTypes, filterOther];
 
-export const CoursewareSearchResultsFilter = ({ intl }) => {
+export const CoursewareSearchResultsFilter = () => {
+  const intl = useIntl();
   const { courseId } = useParams();
   const lastSearch = useModel('contentSearchResults', courseId);
   const { filter: filterKeyword, setFilter } = useCoursewareSearchParams();
@@ -73,8 +74,4 @@ export const CoursewareSearchResultsFilter = ({ intl }) => {
   );
 };
 
-CoursewareSearchResultsFilter.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CoursewareSearchResultsFilter);
+export default CoursewareSearchResultsFilter;

src/course-home/courseware-search/CoursewareSearch.jsx

@@ -1,8 +1,8 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useParams } from 'react-router';
 import { useDispatch } from 'react-redux';
 import { sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
   Alert, Button, Icon, Spinner,
 } from '@openedx/paragon';
@@ -18,7 +18,8 @@ import CoursewareSearchResultsFilterContainer from './CoursewareResultsFilter';
 import { updateModel, useModel } from '../../generic/model-store';
 import { searchCourseContent } from '../data/thunks';
 
-const CoursewareSearch = ({ intl, ...sectionProps }) => {
+const CoursewareSearch = ({ ...sectionProps }) => {
+  const { formatMessage } = useIntl();
   const { courseId } = useParams();
   const { query: searchKeyword, setQuery, clearSearchParams } = useCoursewareSearchParams();
   const dispatch = useDispatch();
@@ -29,6 +30,7 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
     errors,
     total,
   } = useModel('contentSearchResults', courseId);
+  const dialogRef = useRef();
 
   useLockScroll();
 
@@ -44,7 +46,8 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
         searchKeyword: '',
         results: [],
         errors: undefined,
-        loading: false,
+        loading:
+        false,
       },
     }));
   };
@@ -66,20 +69,46 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
     setQuery(value);
   };
 
-  useEffect(() => {
-    handleSubmit(searchKeyword);
-  }, []);
-
   const handleOnChange = (value) => {
     if (value === searchKeyword) { return; }
     if (!value) { clearSearch(); }
   };
 
-  const handleSearchCloseClick = () => {
+  const close = () => {
     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';
@@ -90,59 +119,58 @@ const CoursewareSearch = ({ intl, ...sectionProps }) => {
   }
 
   return (
-    <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>
+    <dialog ref={dialogRef} className="courseware-search" style={{ '--modal-top-position': top }} data-testid="courseware-search-dialog" onClose={handleSearchClose} {...sectionProps}>
       <div className="courseware-search__outer-content">
-        <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 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>
-          ) : 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 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>
         </div>
       </div>
-    </section>
+    </dialog>
   );
 };
 
-CoursewareSearch.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CoursewareSearch);
+export default CoursewareSearch;

src/course-home/courseware-search/CoursewareSearch.test.jsx

@@ -9,6 +9,7 @@ import {
   screen,
   waitFor,
   fireEvent,
+  within,
 } from '../../setupTest';
 import { CoursewareSearch } from './index';
 import { useElementBoundingBox, useLockScroll, useCoursewareSearchParams } from './hooks';
@@ -19,6 +20,7 @@ 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(),
 }));
@@ -56,7 +58,7 @@ const defaultProps = {
   total: 0,
 };
 
-const coursewareSearch = {
+const defaultSearchParams = {
   query: '',
   filter: '',
   setQuery: jest.fn(),
@@ -96,14 +98,20 @@ const mockModels = ((props = defaultProps) => {
   });
 });
 
-const mockSearchParams = ((props = coursewareSearch) => {
+const mockSearchParams = ((params) => {
+  const props = { ...defaultSearchParams, ...params };
   useCoursewareSearchParams.mockReturnValue(props);
 });
 
 describe('CoursewareSearch', () => {
-  beforeAll(initializeMockApp);
+  beforeAll(() => initializeMockApp());
 
   beforeEach(() => {
+    mockModels();
+    mockSearchParams();
+  });
+
+  afterEach(() => {
     jest.clearAllMocks();
   });
 
@@ -113,27 +121,22 @@ describe('CoursewareSearch', () => {
     });
 
     it('should use useElementBoundingBox() and useLockScroll() hooks', () => {
-      mockModels();
-      mockSearchParams();
       renderComponent();
 
-      expect(useElementBoundingBox).toBeCalledTimes(1);
-      expect(useLockScroll).toBeCalledTimes(1);
+      expect(useElementBoundingBox).toHaveBeenCalledTimes(1);
+      expect(useLockScroll).toHaveBeenCalledTimes(1);
     });
 
     it('should have a "--modal-top-position" CSS variable matching the CourseTabsNavigation top position', () => {
-      mockModels();
-      mockSearchParams();
       renderComponent();
 
-      const section = screen.getByTestId('courseware-search-section');
+      const section = screen.getByTestId('courseware-search-dialog');
       expect(section.style.getPropertyValue('--modal-top-position')).toBe(`${tabsTopPosition}px`);
     });
   });
 
   describe('when clicking on the "Close" button', () => {
-    it('should dispatch setShowSearch(false)', async () => {
-      mockModels();
+    it('should close the dialog', async () => {
       renderComponent();
 
       await waitFor(() => {
@@ -141,7 +144,8 @@ describe('CoursewareSearch', () => {
         fireEvent.click(close);
       });
 
-      expect(setShowSearch).toBeCalledWith(false);
+      expect(HTMLDialogElement.prototype.close).toHaveBeenCalled();
+      expect(setShowSearch).toHaveBeenCalledWith(false);
     });
   });
 
@@ -149,29 +153,24 @@ 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-section');
+      const section = screen.getByTestId('courseware-search-dialog');
       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-section');
+      const section = screen.getByTestId('courseware-search-dialog');
       expect(section).toHaveAttribute('foo', 'bar');
     });
   });
 
   describe('when submitting an empty search', () => {
     it('should clear the search by dispatch updateModel', async () => {
-      mockModels();
       renderComponent();
 
       await waitFor(() => {
@@ -203,7 +202,6 @@ describe('CoursewareSearch', () => {
     });
 
     it('should call searchCourseContent', async () => {
-      mockModels();
       renderComponent();
 
       const searchKeyword = 'course';
@@ -246,19 +244,23 @@ describe('CoursewareSearch', () => {
       expect(screen.queryByTestId('courseware-search-summary')).not.toBeInTheDocument();
     });
 
-    it('should show a summary for the results', () => {
+    it('should show a summary for the results within a container with aria-live="polite"', () => {
       mockModels({
         searchKeyword: 'fubar',
         total: 1,
       });
       renderComponent();
 
-      expect(screen.queryByTestId('courseware-search-summary').textContent).toBe('Results for "fubar":');
+      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":');
     });
   });
 
   describe('when clearing the search input', () => {
     it('should clear the search by dispatch updateModel', async () => {
+      mockSearchParams({ query: 'fubar' });
       mockModels({
         searchKeyword: 'fubar',
         total: 2,

src/course-home/courseware-search/CoursewareSearchEmpty.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
-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,
+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>
+  );
 };
 
-export default injectIntl(CoursewareSearchEmpty);
+export default CoursewareSearchEmpty;

src/course-home/courseware-search/CoursewareSearchForm.jsx

@@ -1,43 +1,44 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { SearchField } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import messages from './messages';
 
 const CoursewareSearchForm = ({
-  intl,
   searchTerm,
   onSubmit,
   onChange,
   placeholder,
-}) => (
-  <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)}
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <SearchField.Advanced
+      value={searchTerm}
+      onSubmit={onSubmit}
+      onChange={onChange}
       submitButtonLocation="external"
-      data-testid="courseware-search-form-submit"
-    />
-  </SearchField.Advanced>
-);
+      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>
+  );
+};
 
 CoursewareSearchForm.propTypes = {
-  intl: intlShape.isRequired,
   searchTerm: PropTypes.string,
   onSubmit: PropTypes.func,
   onChange: PropTypes.func,
@@ -51,4 +52,4 @@ CoursewareSearchForm.defaultProps = {
   placeholder: undefined,
 };
 
-export default injectIntl(CoursewareSearchForm);
+export default CoursewareSearchForm;

src/course-home/courseware-search/CoursewareSearchToggle.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 import { ManageSearch } from '@openedx/paragon/icons';
 import { useDispatch } from 'react-redux';
@@ -7,9 +7,8 @@ import messages from './messages';
 import { useCoursewareSearchFeatureFlag, useCoursewareSearchParams } from './hooks';
 import { setShowSearch } from '../data/slice';
 
-const CoursewareSearchToggle = ({
-  intl,
-}) => {
+const CoursewareSearchToggle = () => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const enabled = useCoursewareSearchFeatureFlag();
   const { query } = useCoursewareSearchParams();
@@ -41,8 +40,4 @@ const CoursewareSearchToggle = ({
   );
 };
 
-CoursewareSearchToggle.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CoursewareSearchToggle);
+export default CoursewareSearchToggle;

src/course-home/courseware-search/courseware-search.scss

@@ -5,13 +5,25 @@
   left: 0;
   right: 0;
   bottom: 0;
-  border-top: 1px solid $light-300;
-  z-index: $zindex-modal; // Bootstrap's z-index layer for Modals.
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  margin: 0;
+  border-top: 1px solid var(--pgn-color-light-300);
+  z-index: var(--pgn-elevation-modal-zindex); // 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.5rem;
-    right: 1rem;
+    top: 0;
+    right: 0;
     font-size: 1.5rem;
     line-height: 1;
   }
@@ -35,7 +47,7 @@
 
   &__results-summary {
     font-size: .9rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 1rem 0 .5rem;
   }
 
@@ -50,7 +62,7 @@
   margin-top: 1.5rem;
 
   &__empty {
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     padding: 6rem 0;
     text-align: center;
   }
@@ -64,17 +76,17 @@
 
     &:hover {
       text-decoration: none;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
     }
 
     &:not(:first-child) {
-      border-top: 1px solid $light-300;
+      border-top: 1px solid var(--pgn-color-light-300);
     }
   }
 
   &__icon {
     padding: 0.375rem 0 0 0.375rem;
-    color: $gray-300;
+    color: var(--pgn-color-gray-300);
   }
 
   &__info {
@@ -87,7 +99,7 @@
     align-items: center;
     line-height: 2.5;
     font-size: 0.875rem;
-    color: $black;
+    color: var(--pgn-color-black);
 
     > span {
       display: block;
@@ -101,7 +113,7 @@
       font-variant-numeric: lining-nums tabular-nums;
       min-width: 1.25rem;
       line-height: 1rem;
-      background: $light-300;
+      background: var(--pgn-color-light-300);
       border-radius: 99rem;
       font-style: normal;
       margin-left: 0.375rem;
@@ -113,7 +125,7 @@
   &__breadcrumbs {
     display: flex;
     gap: 1.25rem;
-    color: $gray-500;
+    color: var(--pgn-color-gray-500);
     overflow: hidden;
     list-style: none;
     padding: 0;
@@ -144,17 +156,24 @@
 }
 
 .courseware-search-results-tabs {
-  border-bottom-color: $gray-400 !important;
+  border-bottom-color: var(--pgn-color-gray-400) !important;
 
   &.nav-tabs .nav-link.active {
     border-bottom-width: 4px !important;
   }
 }
 
-@media (min-width: map-get($grid-breakpoints, 'md')) {
-  .courseware-search__content {
-    padding-top: 8rem;
+@media (--pgn-size-breakpoint-min-width-md) {
+  .courseware-search {
+    &__close {
+      right: -2.5rem;
+    }
+
+    &__content {
+      padding-top: 8rem;
+    }
   }
+
 }
 
 body._search-no-scroll {

src/course-home/courseware-search/hooks.test.jsx

@@ -1,4 +1,4 @@
-import { renderHook, act } from '@testing-library/react-hooks';
+import { renderHook, act, waitFor } from '@testing-library/react';
 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 hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await 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 hook.waitFor(() => expect(fetchCoursewareSearchSettings).toBeCalledTimes(1));
+      await 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 });
 
-        hook.waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());
+        await waitFor(() => expect(getBoundingClientRectSpy).toHaveBeenCalled());
 
         expect(hook.result.current).toEqual(mockedInfo);
       });

src/course-home/data/__factories__/outlineTabData.factory.js

@@ -31,7 +31,6 @@ 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,

src/course-home/data/__factories__/progressTabData.factory.js

@@ -17,7 +17,21 @@ Factory.define('progressTabData')
       percent: 1,
       is_passing: true,
     },
+    final_grades: 0.5,
     credit_course_requirements: null,
+    assignment_type_grade_summary: [
+      {
+        type: 'Homework',
+        short_label: 'HW',
+        weight: 1,
+        average_grade: 1,
+        weighted_grade: 1,
+        num_droppable: 1,
+        num_total: 2,
+        has_hidden_contribution: 'none',
+        last_grade_publish_date: null,
+      },
+    ],
     section_scores: [
       {
         display_name: 'First section',

src/course-home/data/__snapshots__/redux.test.js.snap

@@ -5,6 +5,7 @@ exports[`Data layer integration tests Test fetchDatesTab Should fetch, normalize
   "courseHome": {
     "courseId": "course-v1:edX+DemoX+Demo_Course",
     "courseStatus": "loaded",
+    "examsData": null,
     "proctoringPanelStatus": "loading",
     "showSearch": false,
     "targetUserId": undefined,
@@ -397,6 +398,7 @@ exports[`Data layer integration tests Test fetchOutlineTab Should fetch, normali
   "courseHome": {
     "courseId": "course-v1:edX+DemoX+Demo_Course",
     "courseStatus": "loaded",
+    "examsData": null,
     "proctoringPanelStatus": "loading",
     "showSearch": false,
     "targetUserId": undefined,
@@ -489,7 +491,6 @@ 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,
@@ -529,6 +530,7 @@ exports[`Data layer integration tests Test fetchOutlineTab Should fetch, normali
               "hideFromTOC": undefined,
               "icon": null,
               "id": "block-v1:edX+DemoX+Demo_Course+type@sequential+block@bcdabcdabcdabcdabcdabcdabcdabcd1",
+              "isPreview": false,
               "navigationDisabled": undefined,
               "sectionId": "block-v1:edX+DemoX+Demo_Course+type@chapter+block@bcdabcdabcdabcdabcdabcdabcdabcd2",
               "showLink": true,
@@ -670,6 +672,7 @@ exports[`Data layer integration tests Test fetchProgressTab Should fetch, normal
   "courseHome": {
     "courseId": "course-v1:edX+DemoX+Demo_Course",
     "courseStatus": "loaded",
+    "examsData": null,
     "proctoringPanelStatus": "loading",
     "showSearch": false,
     "targetUserId": undefined,
@@ -762,6 +765,19 @@ exports[`Data layer integration tests Test fetchProgressTab Should fetch, normal
     "progress": {
       "course-v1:edX+DemoX+Demo_Course": {
         "accessExpiration": null,
+        "assignmentTypeGradeSummary": [
+          {
+            "averageGrade": 1,
+            "hasHiddenContribution": "none",
+            "lastGradePublishDate": null,
+            "numDroppable": 1,
+            "numTotal": 2,
+            "shortLabel": "HW",
+            "type": "Homework",
+            "weight": 1,
+            "weightedGrade": 1,
+          },
+        ],
         "certificateData": {},
         "completionSummary": {
           "completeCount": 1,
@@ -777,17 +793,17 @@ exports[`Data layer integration tests Test fetchProgressTab Should fetch, normal
         "creditCourseRequirements": null,
         "end": "3027-03-31T00:00:00Z",
         "enrollmentMode": "audit",
+        "finalGrades": 0.5,
         "gradesFeatureIsFullyLocked": false,
         "gradesFeatureIsPartiallyLocked": false,
         "gradingPolicy": {
           "assignmentPolicies": [
             {
-              "averageGrade": "1.0000",
               "numDroppable": 1,
+              "numTotal": 2,
               "shortLabel": "HW",
               "type": "Homework",
               "weight": 1,
-              "weightedGrade": 1,
             },
           ],
           "gradeRange": {

src/course-home/data/api.js

@@ -3,93 +3,6 @@ import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { logInfo } from '@edx/frontend-platform/logging';
 import { appendBrowserTimezoneToUrl } from '../../utils';
 
-const calculateAssignmentTypeGrades = (points, assignmentWeight, numDroppable) => {
-  let dropCount = numDroppable;
-  // Drop the lowest grades
-  while (dropCount && points.length >= dropCount) {
-    const lowestScore = Math.min(...points);
-    const lowestScoreIndex = points.indexOf(lowestScore);
-    points.splice(lowestScoreIndex, 1);
-    dropCount--;
-  }
-  let averageGrade = 0;
-  let weightedGrade = 0;
-  if (points.length) {
-    // Calculate the average grade for the assignment and round it. This rounding is not ideal and does not accurately
-    // reflect what a learner's grade would be, however, we must have parity with the current grading behavior that
-    // exists in edx-platform.
-    averageGrade = (points.reduce((a, b) => a + b, 0) / points.length).toFixed(4);
-    weightedGrade = averageGrade * assignmentWeight;
-  }
-  return { averageGrade, weightedGrade };
-};
-
-function normalizeAssignmentPolicies(assignmentPolicies, sectionScores) {
-  const gradeByAssignmentType = {};
-  assignmentPolicies.forEach(assignment => {
-    // Create an array with the number of total assignments and set the scores to 0
-    // as placeholders for assignments that have not yet been released
-    gradeByAssignmentType[assignment.type] = {
-      grades: Array(assignment.numTotal).fill(0),
-      numAssignmentsCreated: 0,
-      numTotalExpectedAssignments: assignment.numTotal,
-    };
-  });
-
-  sectionScores.forEach((chapter) => {
-    chapter.subsections.forEach((subsection) => {
-      if (!(subsection.hasGradedAssignment && subsection.showGrades && subsection.numPointsPossible)) {
-        return;
-      }
-      const {
-        assignmentType,
-        numPointsEarned,
-        numPointsPossible,
-      } = subsection;
-
-      // If a subsection's assignment type does not match an assignment policy in Studio,
-      // we won't be able to include it in this accumulation of grades by assignment type.
-      // This may happen if a course author has removed/renamed an assignment policy in Studio and
-      // neglected to update the subsection's of that assignment type
-      if (!gradeByAssignmentType[assignmentType]) {
-        return;
-      }
-
-      let {
-        numAssignmentsCreated,
-      } = gradeByAssignmentType[assignmentType];
-
-      numAssignmentsCreated++;
-      if (numAssignmentsCreated <= gradeByAssignmentType[assignmentType].numTotalExpectedAssignments) {
-        // Remove a placeholder grade so long as the number of recorded created assignments is less than the number
-        // of expected assignments
-        gradeByAssignmentType[assignmentType].grades.shift();
-      }
-      // Add the graded assignment to the list
-      gradeByAssignmentType[assignmentType].grades.push(numPointsEarned ? numPointsEarned / numPointsPossible : 0);
-      // Record the created assignment
-      gradeByAssignmentType[assignmentType].numAssignmentsCreated = numAssignmentsCreated;
-    });
-  });
-
-  return assignmentPolicies.map((assignment) => {
-    const { averageGrade, weightedGrade } = calculateAssignmentTypeGrades(
-      gradeByAssignmentType[assignment.type].grades,
-      assignment.weight,
-      assignment.numDroppable,
-    );
-
-    return {
-      averageGrade,
-      numDroppable: assignment.numDroppable,
-      shortLabel: assignment.shortLabel,
-      type: assignment.type,
-      weight: assignment.weight,
-      weightedGrade,
-    };
-  });
-}
-
 /**
  * Tweak the metadata for consistency
  * @param metadata the data to normalize
@@ -155,6 +68,7 @@ export function normalizeOutlineBlocks(courseId, blocks) {
           title: block.display_name,
           hideFromTOC: block.hide_from_toc,
           navigationDisabled: block.navigation_disabled,
+          isPreview: block.is_preview,
         };
         break;
 
@@ -236,11 +150,6 @@ export async function getProgressTabData(courseId, targetUserId) {
     const { data } = await getAuthenticatedHttpClient().get(url);
     const camelCasedData = camelCaseObject(data);
 
-    camelCasedData.gradingPolicy.assignmentPolicies = normalizeAssignmentPolicies(
-      camelCasedData.gradingPolicy.assignmentPolicies,
-      camelCasedData.sectionScores,
-    );
-
     // We replace gradingPolicy.gradeRange with the original data to preserve the intended casing for the grade.
     // For example, if a grade range key is "A", we do not want it to be camel cased (i.e. "A" would become "a")
     // in order to preserve a course team's desired grade formatting.
@@ -289,9 +198,17 @@ export async function getProgressTabData(courseId, targetUserId) {
 }
 
 export async function getProctoringInfoData(courseId, 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)}`;
+  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)}`;
+    }
   }
   try {
     const { data } = await getAuthenticatedHttpClient().get(url);
@@ -359,7 +276,6 @@ 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);
@@ -381,7 +297,6 @@ export async function getOutlineTabData(courseId) {
 
   return {
     accessExpiration,
-    canShowUpgradeSock,
     certData,
     courseBlocks,
     courseGoals,
@@ -449,7 +364,7 @@ export async function unsubscribeFromCourseGoal(token) {
     .then(res => camelCaseObject(res));
 }
 
-export async function getCoursewareSearchEnabledFlag(courseId) {
+export async function getCoursewareSearchEnabled(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 };
@@ -465,3 +380,24 @@ export async function searchCourseContentFromAPI(courseId, searchKeyword, option
 
   return camelCaseObject(response);
 }
+
+export async function getExamsData(courseId, sequenceId) {
+  let url;
+
+  if (!getConfig().EXAMS_BASE_URL) {
+    url = `${getConfig().LMS_BASE_URL}/api/edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}?is_learning_mfe=true&content_id=${encodeURIComponent(sequenceId)}`;
+  } else {
+    url = `${getConfig().EXAMS_BASE_URL}/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceId)}`;
+  }
+
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url);
+    return camelCaseObject(data);
+  } catch (error) {
+    const { httpErrorStatus } = error && error.customAttributes;
+    if (httpErrorStatus === 404) {
+      return {};
+    }
+    throw error;
+  }
+}

src/course-home/data/api.test.js

@@ -1,4 +1,12 @@
-import { getTimeOffsetMillis } from './api';
+import { getConfig, setConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
+import MockAdapter from 'axios-mock-adapter';
+import { getTimeOffsetMillis, getExamsData } from './api';
+import { initializeMockApp } from '../../setupTest';
+
+initializeMockApp();
+
+const axiosMock = new MockAdapter(getAuthenticatedHttpClient());
 
 describe('Calculate the time offset properly', () => {
   it('Should return 0 if the headerDate is not set', async () => {
@@ -14,3 +22,156 @@ describe('Calculate the time offset properly', () => {
     expect(offset).toBe(86398750);
   });
 });
+
+describe('getExamsData', () => {
+  const courseId = 'course-v1:edX+DemoX+Demo_Course';
+  const sequenceId = 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345';
+  let originalConfig;
+
+  beforeEach(() => {
+    axiosMock.reset();
+    originalConfig = getConfig();
+  });
+
+  afterEach(() => {
+    axiosMock.reset();
+    if (originalConfig) {
+      setConfig(originalConfig);
+    }
+  });
+
+  it('should use LMS URL when EXAMS_BASE_URL is not configured', async () => {
+    setConfig({
+      ...originalConfig,
+      EXAMS_BASE_URL: undefined,
+      LMS_BASE_URL: 'http://localhost:18000',
+    });
+
+    const mockExamData = {
+      exam: {
+        id: 1,
+        course_id: courseId,
+        content_id: sequenceId,
+        exam_name: 'Test Exam',
+        attempt_status: 'created',
+      },
+    };
+
+    const expectedUrl = `http://localhost:18000/api/edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}?is_learning_mfe=true&content_id=${encodeURIComponent(sequenceId)}`;
+    axiosMock.onGet(expectedUrl).reply(200, mockExamData);
+
+    const result = await getExamsData(courseId, sequenceId);
+
+    expect(result).toEqual({
+      exam: {
+        id: 1,
+        courseId,
+        contentId: sequenceId,
+        examName: 'Test Exam',
+        attemptStatus: 'created',
+      },
+    });
+    expect(axiosMock.history.get).toHaveLength(1);
+    expect(axiosMock.history.get[0].url).toBe(expectedUrl);
+  });
+
+  it('should use EXAMS_BASE_URL when configured', async () => {
+    setConfig({
+      ...originalConfig,
+      EXAMS_BASE_URL: 'http://localhost:18740',
+      LMS_BASE_URL: 'http://localhost:18000',
+    });
+
+    const mockExamData = {
+      exam: {
+        id: 1,
+        course_id: courseId,
+        content_id: sequenceId,
+        exam_name: 'Test Exam',
+        attempt_status: 'submitted',
+      },
+    };
+
+    const expectedUrl = `http://localhost:18740/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceId)}`;
+    axiosMock.onGet(expectedUrl).reply(200, mockExamData);
+
+    const result = await getExamsData(courseId, sequenceId);
+
+    expect(result).toEqual({
+      exam: {
+        id: 1,
+        courseId,
+        contentId: sequenceId,
+        examName: 'Test Exam',
+        attemptStatus: 'submitted',
+      },
+    });
+    expect(axiosMock.history.get).toHaveLength(1);
+    expect(axiosMock.history.get[0].url).toBe(expectedUrl);
+  });
+
+  it('should return empty object when API returns 404', async () => {
+    setConfig({
+      ...originalConfig,
+      EXAMS_BASE_URL: undefined,
+      LMS_BASE_URL: 'http://localhost:18000',
+    });
+
+    const expectedUrl = `http://localhost:18000/api/edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}?is_learning_mfe=true&content_id=${encodeURIComponent(sequenceId)}`;
+
+    // Mock a 404 error with the custom error response function to add customAttributes
+    axiosMock.onGet(expectedUrl).reply(() => {
+      const error = new Error('Request failed with status code 404');
+      error.response = { status: 404, data: {} };
+      error.customAttributes = { httpErrorStatus: 404 };
+      return Promise.reject(error);
+    });
+
+    const result = await getExamsData(courseId, sequenceId);
+
+    expect(result).toEqual({});
+    expect(axiosMock.history.get).toHaveLength(1);
+  });
+
+  it('should throw error for non-404 HTTP errors', async () => {
+    setConfig({
+      ...originalConfig,
+      EXAMS_BASE_URL: undefined,
+      LMS_BASE_URL: 'http://localhost:18000',
+    });
+
+    const expectedUrl = `http://localhost:18000/api/edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}?is_learning_mfe=true&content_id=${encodeURIComponent(sequenceId)}`;
+
+    // Mock a 500 error with custom error response
+    axiosMock.onGet(expectedUrl).reply(() => {
+      const error = new Error('Request failed with status code 500');
+      error.response = { status: 500, data: { error: 'Server Error' } };
+      error.customAttributes = { httpErrorStatus: 500 };
+      return Promise.reject(error);
+    });
+
+    await expect(getExamsData(courseId, sequenceId)).rejects.toThrow();
+    expect(axiosMock.history.get).toHaveLength(1);
+  });
+
+  it('should properly encode URL parameters', async () => {
+    setConfig({
+      ...originalConfig,
+      EXAMS_BASE_URL: 'http://localhost:18740',
+      LMS_BASE_URL: 'http://localhost:18000',
+    });
+
+    const specialCourseId = 'course-v1:edX+Demo X+Demo Course';
+    const specialSequenceId = 'block-v1:edX+Demo X+Demo Course+type@sequential+block@test sequence';
+
+    const mockExamData = { exam: { id: 1 } };
+    const expectedUrl = `http://localhost:18740/api/v1/student/exam/attempt/course_id/${encodeURIComponent(specialCourseId)}/content_id/${encodeURIComponent(specialSequenceId)}`;
+    axiosMock.onGet(expectedUrl).reply(200, mockExamData);
+
+    await getExamsData(specialCourseId, specialSequenceId);
+
+    expect(axiosMock.history.get[0].url).toBe(expectedUrl);
+    expect(axiosMock.history.get[0].url).toContain('course-v1%3AedX%2BDemo%20X%2BDemo%20Course');
+    expect(axiosMock.history.get[0].url).toContain('block-v1%3AedX%2BDemo%20X%2BDemo%20Course%2Btype%40sequential%2Bblock%40test%20sequence');
+  });
+});

src/course-home/data/pact-tests/lmsPact.test.jsx

@@ -46,7 +46,6 @@ describe('Course Home Service', () => {
           willRespondWith: {
             status: 200,
             body: {
-              can_show_upgrade_sock: boolean(false),
               verified_mode: like({
                 access_expiration_date: null,
                 currency: 'USD',
@@ -89,11 +88,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',
@@ -133,6 +132,7 @@ describe('Course Home Service', () => {
           ],
           title: 'Demonstration Course',
           username: 'edx',
+          hasCourseAuthorAccess: true,
         };
         const response = getCourseHomeCourseMetadata(courseId, 'outline');
         expect(response).toBeTruthy();

src/course-home/data/redux.test.js

@@ -297,4 +297,178 @@ describe('Data layer integration tests', () => {
       expect(enabled).toBe(false);
     });
   });
+
+  describe('Test fetchExamAttemptsData', () => {
+    const sequenceIds = [
+      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@67890',
+      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@abcde',
+    ];
+
+    beforeEach(() => {
+      // Mock individual exam endpoints with different responses
+      sequenceIds.forEach((sequenceId, index) => {
+        // Handle both LMS and EXAMS service URL patterns
+        const lmsExamUrl = new RegExp(`.*edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}.*content_id=${encodeURIComponent(sequenceId)}.*`);
+        const examsServiceUrl = new RegExp(`.*/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceId)}.*`);
+
+        let attemptStatus = 'ready_to_start';
+        if (index === 0) {
+          attemptStatus = 'created';
+        } else if (index === 1) {
+          attemptStatus = 'submitted';
+        }
+
+        const mockExamData = {
+          exam: {
+            id: index + 1,
+            course_id: courseId,
+            content_id: sequenceId,
+            exam_name: `Test Exam ${index + 1}`,
+            attempt_status: attemptStatus,
+            time_remaining_seconds: 3600,
+          },
+        };
+
+        // Mock both URL patterns
+        axiosMock.onGet(lmsExamUrl).reply(200, mockExamData);
+        axiosMock.onGet(examsServiceUrl).reply(200, mockExamData);
+      });
+    });
+
+    it('should fetch exam data for all sequence IDs and dispatch setExamsData', async () => {
+      await executeThunk(thunks.fetchExamAttemptsData(courseId, sequenceIds), store.dispatch);
+
+      const state = store.getState();
+
+      // Verify the examsData was set in the store
+      expect(state.courseHome.examsData).toHaveLength(3);
+      expect(state.courseHome.examsData).toEqual([
+        {
+          id: 1,
+          courseId,
+          contentId: sequenceIds[0],
+          examName: 'Test Exam 1',
+          attemptStatus: 'created',
+          timeRemainingSeconds: 3600,
+        },
+        {
+          id: 2,
+          courseId,
+          contentId: sequenceIds[1],
+          examName: 'Test Exam 2',
+          attemptStatus: 'submitted',
+          timeRemainingSeconds: 3600,
+        },
+        {
+          id: 3,
+          courseId,
+          contentId: sequenceIds[2],
+          examName: 'Test Exam 3',
+          attemptStatus: 'ready_to_start',
+          timeRemainingSeconds: 3600,
+        },
+      ]);
+
+      // Verify all API calls were made
+      expect(axiosMock.history.get).toHaveLength(3);
+    });
+
+    it('should handle 404 responses and include empty objects in results', async () => {
+      // Override one endpoint to return 404 for both URL patterns
+      const examUrl404LMS = new RegExp(`.*edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}.*content_id=${encodeURIComponent(sequenceIds[1])}.*`);
+      const examUrl404Exams = new RegExp(`.*/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceIds[1])}.*`);
+      axiosMock.onGet(examUrl404LMS).reply(404);
+      axiosMock.onGet(examUrl404Exams).reply(404);
+
+      await executeThunk(thunks.fetchExamAttemptsData(courseId, sequenceIds), store.dispatch);
+
+      const state = store.getState();
+
+      // Verify the examsData includes empty object for 404 response
+      expect(state.courseHome.examsData).toHaveLength(3);
+      expect(state.courseHome.examsData[1]).toEqual({});
+    });
+
+    it('should handle API errors and log them while continuing with other requests', async () => {
+      // Override one endpoint to return 500 error for both URL patterns
+      const examUrl500LMS = new RegExp(`.*edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}.*content_id=${encodeURIComponent(sequenceIds[0])}.*`);
+      const examUrl500Exams = new RegExp(`.*/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceIds[0])}.*`);
+      axiosMock.onGet(examUrl500LMS).reply(500, { error: 'Server Error' });
+      axiosMock.onGet(examUrl500Exams).reply(500, { error: 'Server Error' });
+
+      await executeThunk(thunks.fetchExamAttemptsData(courseId, sequenceIds), store.dispatch);
+
+      const state = store.getState();
+
+      // Verify error was logged for the failed request
+      expect(loggingService.logError).toHaveBeenCalled();
+
+      // Verify the examsData still includes results for successful requests
+      expect(state.courseHome.examsData).toHaveLength(3);
+      // First item should be the error result (just empty object for API errors)
+      expect(state.courseHome.examsData[0]).toEqual({});
+    });
+
+    it('should handle empty sequence IDs array', async () => {
+      await executeThunk(thunks.fetchExamAttemptsData(courseId, []), store.dispatch);
+
+      const state = store.getState();
+
+      expect(state.courseHome.examsData).toEqual([]);
+      expect(axiosMock.history.get).toHaveLength(0);
+    });
+
+    it('should handle mixed success and error responses', async () => {
+      // Setup mixed responses
+      const examUrl1LMS = new RegExp(`.*edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}.*content_id=${encodeURIComponent(sequenceIds[0])}.*`);
+      const examUrl1Exams = new RegExp(`.*/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceIds[0])}.*`);
+      const examUrl2LMS = new RegExp(`.*edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}.*content_id=${encodeURIComponent(sequenceIds[1])}.*`);
+      const examUrl2Exams = new RegExp(`.*/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceIds[1])}.*`);
+      const examUrl3LMS = new RegExp(`.*edx_proctoring/v1/proctored_exam/attempt/course_id/${encodeURIComponent(courseId)}.*content_id=${encodeURIComponent(sequenceIds[2])}.*`);
+      const examUrl3Exams = new RegExp(`.*/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceIds[2])}.*`);
+
+      axiosMock.onGet(examUrl1LMS).reply(200, {
+        exam: {
+          id: 1,
+          exam_name: 'Success Exam',
+          course_id: courseId,
+          content_id: sequenceIds[0],
+          attempt_status: 'created',
+          time_remaining_seconds: 3600,
+        },
+      });
+      axiosMock.onGet(examUrl1Exams).reply(200, {
+        exam: {
+          id: 1,
+          exam_name: 'Success Exam',
+          course_id: courseId,
+          content_id: sequenceIds[0],
+          attempt_status: 'created',
+          time_remaining_seconds: 3600,
+        },
+      });
+      axiosMock.onGet(examUrl2LMS).reply(404);
+      axiosMock.onGet(examUrl2Exams).reply(404);
+      axiosMock.onGet(examUrl3LMS).reply(500, { error: 'Server Error' });
+      axiosMock.onGet(examUrl3Exams).reply(500, { error: 'Server Error' });
+
+      await executeThunk(thunks.fetchExamAttemptsData(courseId, sequenceIds), store.dispatch);
+
+      const state = store.getState();
+
+      expect(state.courseHome.examsData).toHaveLength(3);
+      expect(state.courseHome.examsData[0]).toMatchObject({
+        id: 1,
+        examName: 'Success Exam',
+        courseId,
+        contentId: sequenceIds[0],
+      });
+      expect(state.courseHome.examsData[1]).toEqual({});
+      expect(state.courseHome.examsData[2]).toEqual({});
+
+      // Verify error was logged for the 500 error (may be called more than once due to multiple URL patterns)
+      expect(loggingService.logError).toHaveBeenCalled();
+    });
+  });
 });

src/course-home/data/slice.js

@@ -18,6 +18,7 @@ const slice = createSlice({
     toastBodyLink: null,
     toastHeader: '',
     showSearch: false,
+    examsData: null,
   },
   reducers: {
     fetchProctoringInfoResolved: (state) => {
@@ -53,6 +54,9 @@ const slice = createSlice({
     setShowSearch: (state, { payload }) => {
       state.showSearch = payload;
     },
+    setExamsData: (state, { payload }) => {
+      state.examsData = payload;
+    },
   },
 });
 
@@ -64,6 +68,7 @@ export const {
   fetchTabSuccess,
   setCallToActionToast,
   setShowSearch,
+  setExamsData,
 } = slice.actions;
 
 export const {

src/course-home/data/slice.test.js

@@ -0,0 +1,145 @@
+import { reducer, setExamsData } from './slice';
+
+describe('course home data slice', () => {
+  describe('setExamsData reducer', () => {
+    it('should set examsData in state', () => {
+      const initialState = {
+        courseStatus: 'loading',
+        courseId: null,
+        metadataModel: 'courseHomeCourseMetadata',
+        proctoringPanelStatus: 'loading',
+        tabFetchStates: {},
+        toastBodyText: '',
+        toastBodyLink: null,
+        toastHeader: '',
+        showSearch: false,
+        examsData: null,
+      };
+
+      const mockExamsData = [
+        {
+          id: 1,
+          courseId: 'course-v1:edX+DemoX+Demo_Course',
+          examName: 'Midterm Exam',
+          attemptStatus: 'created',
+        },
+        {
+          id: 2,
+          courseId: 'course-v1:edX+DemoX+Demo_Course',
+          examName: 'Final Exam',
+          attemptStatus: 'submitted',
+        },
+      ];
+
+      const action = setExamsData(mockExamsData);
+      const newState = reducer(initialState, action);
+
+      expect(newState.examsData).toEqual(mockExamsData);
+      expect(newState).toEqual({
+        ...initialState,
+        examsData: mockExamsData,
+      });
+    });
+
+    it('should update examsData when state already has data', () => {
+      const initialState = {
+        courseStatus: 'loaded',
+        courseId: 'test-course',
+        metadataModel: 'courseHomeCourseMetadata',
+        proctoringPanelStatus: 'loading',
+        tabFetchStates: {},
+        toastBodyText: '',
+        toastBodyLink: null,
+        toastHeader: '',
+        showSearch: false,
+        examsData: [{ id: 1, examName: 'Old Exam' }],
+      };
+
+      const newExamsData = [
+        {
+          id: 2,
+          courseId: 'course-v1:edX+DemoX+Demo_Course',
+          examName: 'New Exam',
+          attemptStatus: 'ready_to_start',
+        },
+      ];
+
+      const action = setExamsData(newExamsData);
+      const newState = reducer(initialState, action);
+
+      expect(newState.examsData).toEqual(newExamsData);
+      expect(newState.examsData).not.toEqual(initialState.examsData);
+    });
+
+    it('should set examsData to empty array', () => {
+      const initialState = {
+        courseStatus: 'loaded',
+        courseId: 'test-course',
+        metadataModel: 'courseHomeCourseMetadata',
+        proctoringPanelStatus: 'loading',
+        tabFetchStates: {},
+        toastBodyText: '',
+        toastBodyLink: null,
+        toastHeader: '',
+        showSearch: false,
+        examsData: [{ id: 1, examName: 'Some Exam' }],
+      };
+
+      const action = setExamsData([]);
+      const newState = reducer(initialState, action);
+
+      expect(newState.examsData).toEqual([]);
+    });
+
+    it('should set examsData to null', () => {
+      const initialState = {
+        courseStatus: 'loaded',
+        courseId: 'test-course',
+        metadataModel: 'courseHomeCourseMetadata',
+        proctoringPanelStatus: 'loading',
+        tabFetchStates: {},
+        toastBodyText: '',
+        toastBodyLink: null,
+        toastHeader: '',
+        showSearch: false,
+        examsData: [{ id: 1, examName: 'Some Exam' }],
+      };
+
+      const action = setExamsData(null);
+      const newState = reducer(initialState, action);
+
+      expect(newState.examsData).toBeNull();
+    });
+
+    it('should not affect other state properties when setting examsData', () => {
+      const initialState = {
+        courseStatus: 'loaded',
+        courseId: 'test-course-id',
+        metadataModel: 'courseHomeCourseMetadata',
+        proctoringPanelStatus: 'complete',
+        tabFetchStates: { progress: 'loaded' },
+        toastBodyText: 'Toast message',
+        toastBodyLink: 'http://example.com',
+        toastHeader: 'Toast Header',
+        showSearch: true,
+        examsData: null,
+      };
+
+      const mockExamsData = [{ id: 1, examName: 'Test Exam' }];
+      const action = setExamsData(mockExamsData);
+      const newState = reducer(initialState, action);
+
+      // Verify that only examsData changed
+      expect(newState).toEqual({
+        ...initialState,
+        examsData: mockExamsData,
+      });
+
+      // Verify other properties remain unchanged
+      expect(newState.courseStatus).toBe(initialState.courseStatus);
+      expect(newState.courseId).toBe(initialState.courseId);
+      expect(newState.showSearch).toBe(initialState.showSearch);
+      expect(newState.toastBodyText).toBe(initialState.toastBodyText);
+    });
+  });
+});

src/course-home/data/thunks.js

@@ -4,6 +4,7 @@ import {
   executePostFromPostEvent,
   getCourseHomeCourseMetadata,
   getDatesTabData,
+  getExamsData,
   getOutlineTabData,
   getProgressTabData,
   postCourseDeadlines,
@@ -12,7 +13,7 @@ import {
   postDismissWelcomeMessage,
   postRequestCert,
   getLiveTabIframe,
-  getCoursewareSearchEnabledFlag,
+  getCoursewareSearchEnabled,
   searchCourseContentFromAPI,
 } from './api';
 
@@ -26,6 +27,7 @@ import {
   fetchTabRequest,
   fetchTabSuccess,
   setCallToActionToast,
+  setExamsData,
 } from './slice';
 
 import mapSearchResponse from '../courseware-search/map-search-response';
@@ -159,7 +161,7 @@ export function processEvent(eventData, getTabData) {
 
 export async function fetchCoursewareSearchSettings(courseId) {
   try {
-    const { enabled } = await getCoursewareSearchEnabledFlag(courseId);
+    const { enabled } = await getCoursewareSearchEnabled(courseId);
     return { enabled };
   } catch (e) {
     return { enabled: false };
@@ -223,3 +225,19 @@ export function searchCourseContent(courseId, searchKeyword) {
     });
   };
 }
+
+export function fetchExamAttemptsData(courseId, sequenceIds) {
+  return async (dispatch) => {
+    const results = await Promise.all(sequenceIds.map(async (sequenceId) => {
+      try {
+        const response = await getExamsData(courseId, sequenceId);
+        return response.exam || {};
+      } catch (e) {
+        logError(e);
+        return {};
+      }
+    }));
+
+    dispatch(setExamsData(results));
+  };
+}

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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 import Timeline from './timeline/Timeline';
@@ -14,7 +14,8 @@ import ShiftDatesAlert from '../suggested-schedule-messaging/ShiftDatesAlert';
 import UpgradeToCompleteAlert from '../suggested-schedule-messaging/UpgradeToCompleteAlert';
 import UpgradeToShiftDatesAlert from '../suggested-schedule-messaging/UpgradeToShiftDatesAlert';
 
-const DatesTab = ({ intl }) => {
+const DatesTab = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -59,8 +60,4 @@ const DatesTab = ({ intl }) => {
   );
 };
 
-DatesTab.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(DatesTab);
+export default DatesTab;

src/course-home/dates-tab/DatesTab.test.jsx

@@ -135,6 +135,7 @@ describe('DatesTab', () => {
     });
 
     it('shows extra info', async () => {
+      const user = userEvent.setup();
       const { items } = await getDay('Sat, Aug 17, 2030');
       expect(items).toHaveLength(3);
 
@@ -142,10 +143,12 @@ 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
-      userEvent.hover(tipIcon);
-      const tooltip = screen.getByText(tipText); // now it's there
-      userEvent.unhover(tipIcon);
-      await waitForElementToBeRemoved(tooltip); // and it's gone again
+      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
+      });
     });
   });
 

src/course-home/dates-tab/timeline/Day.jsx

@@ -5,8 +5,7 @@ import { useSelector } from 'react-redux';
 import {
   FormattedDate,
   FormattedTime,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import { Tooltip, OverlayTrigger } from '@openedx/paragon';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
@@ -20,10 +19,10 @@ import { isLearnerAssignment } from '../utils';
 const Day = ({
   date,
   first,
-  intl,
   items,
   last,
 }) => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -108,7 +107,6 @@ 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,
@@ -126,4 +124,4 @@ Day.defaultProps = {
   last: false,
 };
 
-export default injectIntl(Day);
+export default Day;

src/course-home/discussion-tab/DiscussionTab.jsx

@@ -1,5 +1,4 @@
 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';
@@ -30,6 +29,4 @@ const DiscussionTab = () => {
   );
 };
 
-DiscussionTab.propTypes = {};
-
-export default injectIntl(DiscussionTab);
+export default DiscussionTab;

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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import HeaderSlot from '../../plugin-slots/HeaderSlot';
 import PageLoading from '../../generic/PageLoading';
@@ -10,7 +10,8 @@ import { unsubscribeFromCourseGoal } from '../data/api';
 import messages from './messages';
 import ResultPage from './ResultPage';
 
-const GoalUnsubscribe = ({ intl }) => {
+const GoalUnsubscribe = () => {
+  const intl = useIntl();
   const { token } = useParams();
   const [error, setError] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
@@ -51,8 +52,4 @@ const GoalUnsubscribe = ({ intl }) => {
   );
 };
 
-GoalUnsubscribe.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(GoalUnsubscribe);
+export default GoalUnsubscribe;

src/course-home/goal-unsubscribe/ResultPage.jsx

@@ -1,28 +1,26 @@
 import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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, 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 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 header = error
@@ -54,7 +52,6 @@ ResultPage.defaultProps = {
 ResultPage.propTypes = {
   courseTitle: PropTypes.string,
   error: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(ResultPage);
+export default ResultPage;

src/course-home/goal-unsubscribe/messages.ts

@@ -16,6 +16,11 @@ 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',

src/course-home/outline-tab/DateSummary.jsx

@@ -65,6 +65,7 @@ const DateSummary = ({
         )}
         {!linkedTitle && dateBlock.link && (
           <a
+            id={dateBlock.dateType === 'verified-upgrade-deadline' ? 'date-verified-upgrade-deadline' : ''}
             href={dateBlock.link}
             onClick={dateBlock.dateType === 'verified-upgrade-deadline' ? logVerifiedUpgradeClick : () => {}}
             className="description-link"

src/course-home/outline-tab/OutlineTab.jsx

@@ -1,11 +1,11 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useRef, 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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { CourseOutlineTabNotificationsSlot } from '../../plugin-slots/CourseOutlineTabNotificationsSlot';
 import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
@@ -15,9 +15,7 @@ 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';
@@ -28,8 +26,10 @@ 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 = ({ intl }) => {
+const OutlineTab = () => {
+  const intl = useIntl();
   const {
     courseId,
     proctoringPanelStatus,
@@ -39,11 +39,11 @@ const OutlineTab = ({ intl }) => {
     isSelfPaced,
     org,
     title,
-    userTimezone,
   } = useModel('courseHomeMeta', courseId);
 
+  const expandButtonRef = useRef();
+
   const {
-    accessExpiration,
     courseBlocks: {
       courses,
       sections,
@@ -52,20 +52,12 @@ const OutlineTab = ({ intl }) => {
       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();
 
@@ -159,32 +151,27 @@ const OutlineTab = ({ intl }) => {
             </>
           )}
           <StartOrResumeCourseCard />
-          <WelcomeMessage courseId={courseId} />
+          <WelcomeMessage courseId={courseId} nextElementRef={expandButtonRef} />
           {rootCourseId && (
             <>
-              <div className="row w-100 m-0 mb-3 justify-content-end">
+              <div id="expand-button-row" className="row w-100 m-0 mb-3 justify-content-end">
                 <div className="col-12 col-md-auto p-0">
-                  <Button variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
+                  <Button ref={expandButtonRef} variant="outline-primary" block onClick={() => { setExpandAll(!expandAll); }}>
                     {expandAll ? intl.formatMessage(messages.collapseAll) : intl.formatMessage(messages.expandAll)}
                   </Button>
                 </div>
               </div>
-              <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>
+              <CourseHomeSectionOutlineSlot
+                expandAll={expandAll}
+                sectionIds={courses[rootCourseId].sectionIds}
+                sections={sections}
+              />
             </>
           )}
         </div>
         {rootCourseId && (
           <div className="col col-12 col-md-4">
+            <CourseOutlineTabNotificationsSlot courseId={courseId} />
             <ProctoringInfoPanel />
             { /** Defer showing the goal widget until the ProctoringInfoPanel has resolved or has been determined as
              disabled to avoid components bouncing around too much as screen is rendered */ }
@@ -195,27 +182,6 @@ const OutlineTab = ({ intl }) => {
               />
             )}
             <CourseTools />
-            <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>
@@ -225,8 +191,4 @@ const OutlineTab = ({ intl }) => {
   );
 };
 
-OutlineTab.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(OutlineTab);
+export default OutlineTab;

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, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { sendTrackEvent } 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().LMS_BASE_URL}/api/edx_proctoring/v1/user_onboarding/status?is_learning_mfe=true&course_id=${encodeURIComponent(courseId)}&username=MockUser`;
+  const proctoringInfoUrl = `${getConfig().EXAMS_BASE_URL}/api/v1/student/course_id/${encodeURIComponent(courseId)}/onboarding?username=MockUser`;
 
   const store = initializeStore();
   const defaultMetadata = Factory.build('courseHomeMetadata');
@@ -139,10 +139,11 @@ describe('Outline Tab', () => {
       });
       await fetchAndRender();
 
-      expect(screen.getByTestId('outline_tab_notifications_slot')).toBeInTheDocument();
+      expect(screen.getByTestId('org.openedx.frontend.learning.course_outline_tab_notifications.v1')).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' });
@@ -153,11 +154,11 @@ describe('Outline Tab', () => {
       expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false');
 
       // Click to expand section
-      userEvent.click(expandButton);
+      await user.click(expandButton);
       await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'true'));
 
       // Click to collapse section
-      userEvent.click(expandButton);
+      await user.click(expandButton);
       await waitFor(() => expect(collapsedSectionNode).toHaveAttribute('aria-expanded', 'false'));
     });
 
@@ -167,7 +168,7 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
-      expect(screen.getByTitle('Completed section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Completed section')).toBeInTheDocument();
     });
 
     it('displays correct icon for incomplete assignment', async () => {
@@ -176,7 +177,7 @@ describe('Outline Tab', () => {
         course_blocks: { blocks: courseBlocks.blocks },
       });
       await fetchAndRender();
-      expect(screen.getByTitle('Incomplete section')).toBeInTheDocument();
+      expect(screen.getByLabelText('Incomplete section')).toBeInTheDocument();
     });
 
     it('SequenceLink displays link', async () => {
@@ -275,21 +276,34 @@ 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();
 
-        userEvent.click(showMoreButton);
+        await user.click(showMoreButton);
         let showLessButton = screen.getByRole('button', { name: 'Show Less' });
         expect(showLessButton).toBeInTheDocument();
         expect(screen.getByTestId('long-welcome-message-iframe')).toBeInTheDocument();
 
-        userEvent.click(showLessButton);
+        await user.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 () => {
@@ -1176,80 +1190,6 @@ 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 = () => ({

src/course-home/outline-tab/Section.jsx

@@ -1,137 +0,0 @@
-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);

src/course-home/outline-tab/SequenceLink.jsx

@@ -1,147 +0,0 @@
-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);

src/course-home/outline-tab/alerts/certificate-status-alert/CertificateStatusAlert.jsx

@@ -3,8 +3,7 @@ import PropTypes from 'prop-types';
 import {
   FormattedDate,
   FormattedMessage,
-  injectIntl,
-  intlShape,
+  useIntl,
 } from '@edx/frontend-platform/i18n';
 import { Alert, Button } from '@openedx/paragon';
 import { useDispatch } from 'react-redux';
@@ -25,7 +24,8 @@ export const CERT_STATUS_TYPE = {
   UNVERIFIED: 'unverified',
 };
 
-const CertificateStatusAlert = ({ intl, payload }) => {
+const CertificateStatusAlert = ({ payload }) => {
+  const intl = useIntl();
   const dispatch = useDispatch();
   const {
     certificateAvailableDate,
@@ -192,7 +192,6 @@ const CertificateStatusAlert = ({ intl, payload }) => {
 };
 
 CertificateStatusAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     certificateAvailableDate: PropTypes.string,
     certStatus: PropTypes.string,
@@ -210,4 +209,4 @@ CertificateStatusAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(CertificateStatusAlert);
+export default CertificateStatusAlert;

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 { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl, 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,7 +14,8 @@ import outlineMessages from '../../messages';
 import useEnrollClickHandler from '../../../../alerts/enrollment-alert/clickHook';
 import { useModel } from '../../../../generic/model-store';
 
-const PrivateCourseAlert = ({ intl, payload }) => {
+const PrivateCourseAlert = ({ payload }) => {
+  const intl = useIntl();
   const {
     anonymousUser,
     canEnroll,
@@ -103,7 +104,6 @@ const PrivateCourseAlert = ({ intl, payload }) => {
 };
 
 PrivateCourseAlert.propTypes = {
-  intl: intlShape.isRequired,
   payload: PropTypes.shape({
     anonymousUser: PropTypes.bool,
     canEnroll: PropTypes.bool,
@@ -111,4 +111,4 @@ PrivateCourseAlert.propTypes = {
   }).isRequired,
 };
 
-export default injectIntl(PrivateCourseAlert);
+export default PrivateCourseAlert;

src/course-home/outline-tab/messages.ts

@@ -341,6 +341,16 @@ 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;

src/course-home/outline-tab/section-outline/HiddenSequenceLink.tsx

@@ -0,0 +1,25 @@
+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;

src/course-home/outline-tab/section-outline/Section.tsx

@@ -0,0 +1,94 @@
+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;

src/course-home/outline-tab/section-outline/SectionTitle.tsx

@@ -0,0 +1,59 @@
+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;

src/course-home/outline-tab/section-outline/SequenceDueDate.tsx

@@ -0,0 +1,60 @@
+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;

src/course-home/outline-tab/section-outline/SequenceLink.tsx

@@ -0,0 +1,56 @@
+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;

src/course-home/outline-tab/section-outline/SequenceTitle.tsx

@@ -0,0 +1,63 @@
+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;

src/course-home/outline-tab/widgets/CourseDates.jsx

@@ -1,15 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import DateSummary from '../DateSummary';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 
-const CourseDates = ({
-  intl,
-}) => {
+const CourseDates = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -40,7 +39,7 @@ const CourseDates = ({
             />
           ))}
         </ol>
-        <a className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
+        <a id="dates-tab-link" className="font-weight-bold ml-4 pl-1 small" href={datesTabLink}>
           {intl.formatMessage(messages.allDates)}
         </a>
       </div>
@@ -48,8 +47,4 @@ const CourseDates = ({
   );
 };
 
-CourseDates.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseDates);
+export default CourseDates;

src/course-home/outline-tab/widgets/CourseHandouts.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import LmsHtmlFragment from '../LmsHtmlFragment';
 import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 
-const CourseHandouts = ({ intl }) => {
+const CourseHandouts = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -31,8 +32,4 @@ const CourseHandouts = ({ intl }) => {
   );
 };
 
-CourseHandouts.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseHandouts);
+export default CourseHandouts;

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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faBookmark, faCertificate, faInfo, faCalendar, faStar,
@@ -14,7 +14,8 @@ import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 import LaunchCourseHomeTourButton from '../../../product-tours/newUserCourseHomeTour/LaunchCourseHomeTourButton';
 
-const CourseTools = ({ intl }) => {
+const CourseTools = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -81,8 +82,4 @@ const CourseTools = ({ intl }) => {
   );
 };
 
-CourseTools.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseTools);
+export default CourseTools;

src/course-home/outline-tab/widgets/FlagButton.scss

@@ -1,22 +1,18 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 .flag-button {
-  background-color: $white;
-  border: 1px solid $light-400;
+  background-color: var(--pgn-color-white);
+  border: 1px solid var(--pgn-color-light-400);
   border-radius: .2rem;
-  box-shadow: 0 0 0 2px $light-400;
+  box-shadow: 0 0 0 2px var(--pgn-color-light-400);
 
   &:hover {
-    border: 1px solid $primary-300;
-    box-shadow: 0 0 0 2px $white;
+    border: 1px solid var(--pgn-color-primary-300);
+    box-shadow: 0 0 0 2px var(--pgn-color-white);
   }
 }
 
 .flag-button-selected {
-  border: 1px solid $primary-300;
-  box-shadow: 0 0 0 2px $primary-300;
+  border: 1px solid var(--pgn-color-primary-300);
+  box-shadow: 0 0 0 2px var(--pgn-color-primary-300);
   pointer-events: none;
 }
 

src/course-home/outline-tab/widgets/LearningGoalButton.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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,7 +53,6 @@ LearningGoalButton.propTypes = {
   level: PropTypes.string.isRequired,
   isSelected: PropTypes.bool.isRequired,
   handleSelect: PropTypes.func.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(LearningGoalButton);
+export default LearningGoalButton;

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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
 
 import messages from '../messages';
@@ -10,7 +10,8 @@ import { getProctoringInfoData } from '../../data/api';
 import { fetchProctoringInfoResolved } from '../../data/slice';
 import { useModel } from '../../../generic/model-store';
 
-const ProctoringInfoPanel = ({ intl }) => {
+const ProctoringInfoPanel = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -216,8 +217,4 @@ const ProctoringInfoPanel = ({ intl }) => {
   );
 };
 
-ProctoringInfoPanel.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ProctoringInfoPanel);
+export default ProctoringInfoPanel;

src/course-home/outline-tab/widgets/ProctoringInfoPanel.scss

@@ -1,10 +1,10 @@
 .outline-sidebar-proctoring-panel {
-  border: 1px solid $dark-500;
-  border-top: 5px solid $brand-600;
+  border: 1px solid var(--pgn-color-dark-500);
+  border-top: 5px solid var(--pgn-color-brand-600);
 }
 .proctoring-onboarding-success {
-  border-top: 5px solid $primary-500;
+  border-top: 5px solid var(--pgn-color-primary-500);
 }
 .proctoring-onboarding-submitted {
-  border-top: 5px solid $dark-500;
+  border-top: 5px solid var(--pgn-color-dark-500);
 }

src/course-home/outline-tab/widgets/StartOrResumeCourseCard.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
 import { Button, Card } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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 = ({ intl }) => {
+const StartOrResumeCourseCard = () => {
+  const intl = useIntl();
   const {
     courseId,
   } = useSelector(state => state.courseHome);
@@ -62,8 +63,4 @@ const StartOrResumeCourseCard = ({ intl }) => {
   );
 };
 
-StartOrResumeCourseCard.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(StartOrResumeCourseCard);
+export default StartOrResumeCourseCard;

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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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,11 +152,10 @@ const WeeklyLearningGoalCard = ({
 WeeklyLearningGoalCard.propTypes = {
   daysPerWeek: PropTypes.number,
   subscribedToReminders: PropTypes.bool,
-  intl: intlShape.isRequired,
 };
 
 WeeklyLearningGoalCard.defaultProps = {
   daysPerWeek: null,
   subscribedToReminders: false,
 };
-export default injectIntl(WeeklyLearningGoalCard);
+export default WeeklyLearningGoalCard;

src/course-home/outline-tab/widgets/WelcomeMessage.jsx

@@ -1,7 +1,7 @@
-import React, { useState, useMemo } from 'react';
+import { useState, useMemo, useRef } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Button, TransitionReplace } from '@openedx/paragon';
 import truncate from 'truncate-html';
 
@@ -11,11 +11,13 @@ import messages from '../messages';
 import { useModel } from '../../../generic/model-store';
 import { dismissWelcomeMessage } from '../../data/thunks';
 
-const WelcomeMessage = ({ courseId, intl }) => {
+const WelcomeMessage = ({ courseId, nextElementRef }) => {
+  const intl = useIntl();
   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
@@ -49,13 +51,20 @@ const WelcomeMessage = ({ courseId, intl }) => {
       dismissible
       show={display}
       onClose={() => {
+        nextElementRef.current?.focus();
         setDisplay(false);
         dispatch(dismissWelcomeMessage(courseId));
       }}
       className="raised-card"
       actions={messageCanBeShortened ? [
         <Button
-          onClick={() => setShowShortMessage(!showShortMessage)}
+          onClick={() => {
+            if (showShortMessage) {
+              messageBodyRef.current?.focus();
+            }
+
+            setShowShortMessage(!showShortMessage);
+          }}
           variant="outline-primary"
         >
           {showShortMessage ? intl.formatMessage(messages.welcomeMessageShowMoreButton)
@@ -63,32 +72,34 @@ const WelcomeMessage = ({ courseId, intl }) => {
         </Button>,
       ] : []}
     >
-      <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 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>
     </Alert>
   );
 };
 
 WelcomeMessage.propTypes = {
   courseId: PropTypes.string.isRequired,
-  intl: intlShape.isRequired,
+  nextElementRef: PropTypes.shape({ current: PropTypes.instanceOf(HTMLInputElement) }),
 };
 
-export default injectIntl(WelcomeMessage);
+export default WelcomeMessage;

src/course-home/progress-tab/ProgressHeader.jsx

@@ -1,15 +1,14 @@
-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 { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
+import { useSelector } from 'react-redux';
 
 import { useModel } from '../../generic/model-store';
 
 import messages from './messages';
 
-const ProgressHeader = ({ intl }) => {
+const ProgressHeader = () => {
+  const intl = useIntl();
   const {
     courseId,
     targetUserId,
@@ -37,8 +36,4 @@ const ProgressHeader = ({ intl }) => {
   );
 };
 
-ProgressHeader.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(ProgressHeader);
+export default ProgressHeader;

src/course-home/progress-tab/ProgressTab.jsx

@@ -1,27 +1,27 @@
-import React from 'react';
-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 React, { useMemo } from 'react';
+import { useWindowSize } from '@openedx/paragon';
+import { useContextId } from '../../data/hooks';
 import { useModel } from '../../generic/model-store';
+import ProgressTabCertificateStatusSidePanelSlot from '../../plugin-slots/ProgressTabCertificateStatusSidePanelSlot';
+
+import CourseCompletion from './course-completion/CourseCompletion';
+import ProgressHeader from './ProgressHeader';
+
+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 { useGetExamsData } from './hooks';
 
 const ProgressTab = () => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
+  const { disableProgressGraph, sectionScores } = useModel('progress', courseId);
 
-  const {
-    gradesFeatureIsFullyLocked, disableProgressGraph,
-  } = useModel('progress', courseId);
+  const sequenceIds = useMemo(() => (
+    sectionScores.flatMap((section) => (section.subsections)).map((subsection) => subsection.blockKey)
+  ), [sectionScores]);
 
-  const applyLockedOverlay = gradesFeatureIsFullyLocked ? 'locked-overlay' : '';
+  useGetExamsData(courseId, sequenceIds);
 
   const windowWidth = useWindowSize().width;
   if (windowWidth === undefined) {
@@ -31,7 +31,6 @@ const ProgressTab = () => {
     return null;
   }
 
-  const wideScreen = windowWidth >= breakpoints.large.minWidth;
   return (
     <>
       <ProgressHeader />
@@ -39,18 +38,15 @@ const ProgressTab = () => {
         {/* Main body */}
         <div className="col-12 col-md-8 p-0">
           {!disableProgressGraph && <CourseCompletion />}
-          {!wideScreen && <CertificateStatus />}
-          <CourseGrade />
-          <div className={`grades my-4 p-4 rounded raised-card ${applyLockedOverlay}`} aria-hidden={gradesFeatureIsFullyLocked}>
-            <GradeSummary />
-            <DetailedGrades />
-          </div>
+          <ProgressTabCertificateStatusMainBodySlot />
+          <ProgressTabCourseGradeSlot />
+          <ProgressTabGradeBreakdownSlot />
         </div>
 
         {/* Side panel */}
         <div className="col-12 col-md-4 p-0 px-md-4">
-          {wideScreen && <CertificateStatus />}
-          <RelatedLinks />
+          <ProgressTabCertificateStatusSidePanelSlot />
+          <ProgressTabRelatedLinksSlot />
         </div>
       </div>
     </>

src/course-home/progress-tab/ProgressTab.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Factory } from 'rosie';
-import { getConfig } from '@edx/frontend-platform';
+import { getConfig, setConfig } 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,9 +471,12 @@ 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.')).toHaveLength(2);
+      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.queryAllByTestId('blocked-icon')).toHaveLength(4);
+      expect(screen.queryAllByTestId('locked-icon')).toHaveLength(4);
     });
 
     it('does not render subsections for which showGrades is false', async () => {
@@ -545,6 +548,111 @@ 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', () => {
@@ -553,143 +661,133 @@ describe('Progress Tab', () => {
       expect(screen.getByText('Grade summary')).toBeInTheDocument();
     });
 
-    it('does not render Grade Summary when assignment policies are not populated', async () => {
+    it('does not render Grade Summary when assignment type grade summary is not populated', async () => {
       setTabData({
-        grading_policy: {
-          assignment_policies: [],
-          grade_range: {
-            pass: 0.75,
-          },
-        },
-        section_scores: [],
+        assignment_type_grade_summary: [],
       });
       await fetchAndRender();
       expect(screen.queryByText('Grade summary')).not.toBeInTheDocument();
     });
 
-    it('calculates grades correctly when number of droppable assignments equals total number of assignments', async () => {
+    it('shows lock icon when all subsections of assignment type are hidden', async () => {
       setTabData({
         grading_policy: {
           assignment_policies: [
-            {
-              num_droppable: 2,
-              num_total: 2,
-              short_label: 'HW',
-              type: 'Homework',
-              weight: 1,
-            },
-          ],
-          grade_range: {
-            pass: 0.75,
-          },
-        },
-      });
-      await fetchAndRender();
-      expect(screen.getByText('Grade summary')).toBeInTheDocument();
-      // The row is comprised of "{Assignment type} {footnote - optional} {weight} {grade} {weighted grade}"
-      expect(screen.getByRole('row', { name: 'Homework 1 100% 0% 0%' })).toBeInTheDocument();
-    });
-    it('calculates grades correctly when number of droppable assignments is less than total number of assignments', async () => {
-      await fetchAndRender();
-      expect(screen.getByText('Grade summary')).toBeInTheDocument();
-      // The row is comprised of "{Assignment type} {footnote - optional} {weight} {grade} {weighted grade}"
-      expect(screen.getByRole('row', { name: 'Homework 1 100% 100% 100%' })).toBeInTheDocument();
-    });
-    it('calculates grades correctly when number of droppable assignments is zero', async () => {
-      setTabData({
-        grading_policy: {
-          assignment_policies: [
-            {
-              num_droppable: 0,
-              num_total: 2,
-              short_label: 'HW',
-              type: 'Homework',
-              weight: 1,
-            },
-          ],
-          grade_range: {
-            pass: 0.75,
-          },
-        },
-      });
-      await fetchAndRender();
-      expect(screen.getByText('Grade summary')).toBeInTheDocument();
-      // The row is comprised of "{Assignment type} {weight} {grade} {weighted grade}"
-      expect(screen.getByRole('row', { name: 'Homework 100% 50% 50%' })).toBeInTheDocument();
-    });
-    it('calculates grades correctly when number of total assignments is less than the number of assignments created', async () => {
-      setTabData({
-        grading_policy: {
-          assignment_policies: [
-            {
-              num_droppable: 1,
-              num_total: 1, // two assignments created in the factory, but 1 is expected per Studio settings
-              short_label: 'HW',
-              type: 'Homework',
-              weight: 1,
-            },
-          ],
-          grade_range: {
-            pass: 0.75,
-          },
-        },
-      });
-      await fetchAndRender();
-      expect(screen.getByText('Grade summary')).toBeInTheDocument();
-      // The row is comprised of "{Assignment type} {footnote - optional} {weight} {grade} {weighted grade}"
-      expect(screen.getByRole('row', { name: 'Homework 1 100% 100% 100%' })).toBeInTheDocument();
-    });
-    it('calculates grades correctly when number of total assignments is greater than the number of assignments created', async () => {
-      setTabData({
-        grading_policy: {
-          assignment_policies: [
-            {
-              num_droppable: 0,
-              num_total: 5, // two assignments created in the factory, but 5 are expected per Studio settings
-              short_label: 'HW',
-              type: 'Homework',
-              weight: 1,
-            },
-          ],
-          grade_range: {
-            pass: 0.75,
-          },
-        },
-      });
-      await fetchAndRender();
-      expect(screen.getByText('Grade summary')).toBeInTheDocument();
-      // The row is comprised of "{Assignment type} {weight} {grade} {weighted grade}"
-      expect(screen.getByRole('row', { name: 'Homework 100% 20% 20%' })).toBeInTheDocument();
-    });
-    it('calculates weighted grades correctly', async () => {
-      setTabData({
-        grading_policy: {
-          assignment_policies: [
-            {
-              num_droppable: 1,
-              num_total: 2,
-              short_label: 'HW',
-              type: 'Homework',
-              weight: 0.5,
-            },
             {
               num_droppable: 0,
               num_total: 1,
-              short_label: 'Ex',
-              type: 'Exam',
-              weight: 0.5,
+              short_label: 'Final',
+              type: 'Final Exam',
+              weight: 1,
             },
           ],
           grade_range: {
             pass: 0.75,
           },
         },
+        assignment_type_grade_summary: [
+          {
+            type: 'Final Exam',
+            weight: 0.4,
+            average_grade: 0.0,
+            weighted_grade: 0.0,
+            last_grade_publish_date: '2025-10-15T14:17:04.368903Z',
+            has_hidden_contribution: 'all',
+            short_label: 'Final',
+            num_droppable: 0,
+          },
+        ],
       });
       await fetchAndRender();
-      expect(screen.getByText('Grade summary')).toBeInTheDocument();
-      // The row is comprised of "{Assignment type} {footnote - optional} {weight} {grade} {weighted grade}"
-      expect(screen.getByRole('row', { name: 'Homework 1 50% 100% 50%' })).toBeInTheDocument();
-      expect(screen.getByRole('row', { name: 'Exam 50% 0% 0%' })).toBeInTheDocument();
+      // Should show lock icon for grade and weighted grade
+      expect(screen.getAllByTestId('lock-icon')).toHaveLength(2);
+    });
+
+    it('shows percent plus hidden grades when some subsections of assignment type are hidden', async () => {
+      setTabData({
+        grading_policy: {
+          assignment_policies: [
+            {
+              num_droppable: 0,
+              num_total: 2,
+              short_label: 'HW',
+              type: 'Homework',
+              weight: 1,
+            },
+          ],
+          grade_range: {
+            pass: 0.75,
+          },
+        },
+        assignment_type_grade_summary: [
+          {
+            type: 'Homework',
+            weight: 1,
+            average_grade: 0.25,
+            weighted_grade: 0.25,
+            last_grade_publish_date: '2025-10-15T14:17:04.368903Z',
+            has_hidden_contribution: 'some',
+            short_label: 'HW',
+            num_droppable: 0,
+          },
+        ],
+      });
+      await fetchAndRender();
+      // Should show percent + hidden scores for grade and weighted grade
+      const hiddenScoresCells = screen.getAllByText(/% \+ Hidden Scores/);
+      expect(hiddenScoresCells).toHaveLength(2);
+      // Only correct visible scores should be shown (from subsection2)
+      // The correct visible score is 1/4 = 0.25 -> 25%
+      expect(hiddenScoresCells[0]).toHaveTextContent('25% + Hidden Scores');
+      expect(hiddenScoresCells[1]).toHaveTextContent('25% + Hidden Scores');
+    });
+
+    it('displays a warning message with the latest due date when not all assignment scores are included in the total grade', async () => {
+      setTabData({
+        grading_policy: {
+          assignment_policies: [
+            {
+              num_droppable: 0,
+              num_total: 2,
+              short_label: 'HW',
+              type: 'Homework',
+              weight: 1,
+            },
+          ],
+          grade_range: {
+            pass: 0.75,
+          },
+        },
+        assignment_type_grade_summary: [
+          {
+            type: 'Homework',
+            weight: 1,
+            average_grade: 1,
+            weighted_grade: 1,
+            last_grade_publish_date: tomorrow.toISOString(),
+            has_hidden_contribution: 'none',
+            short_label: 'HW',
+            num_droppable: 0,
+          },
+        ],
+      });
+
+      await fetchAndRender();
+
+      const formattedDateTime = new Intl.DateTimeFormat('en', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        timeZoneName: 'short',
+      }).format(tomorrow);
+
+      expect(
+        screen.getByText(
+          `Some assignment scores are not yet included in your total grade. These grades will be released by ${formattedDateTime}.`,
+        ),
+      ).toBeInTheDocument();
     });
 
     it('renders override notice', async () => {
@@ -788,7 +886,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);
@@ -809,7 +907,7 @@ describe('Progress Tab', () => {
 
       // Open the problem score drawer
       fireEvent.click(problemScoreDrawerToggle);
-      expect(screen.getByText('Problem Scores:')).toBeInTheDocument();
+      expect(screen.getAllByText('Graded Scores:').length).toBeGreaterThan(1);
       expect(screen.getAllByText('0/1')).toHaveLength(3);
     });
 
@@ -821,6 +919,14 @@ 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', () => {
@@ -1384,4 +1490,287 @@ describe('Progress Tab', () => {
       expect(screen.getByText('Course progress for otherstudent')).toBeInTheDocument();
     });
   });
+
+  describe('Exam data fetching integration', () => {
+    const mockSectionScores = [
+      {
+        display_name: 'Section 1',
+        subsections: [
+          {
+            assignment_type: 'Exam',
+            block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@exam1',
+            display_name: 'Midterm Exam',
+            learner_has_access: true,
+            has_graded_assignment: true,
+            percent_graded: 0.8,
+            show_correctness: 'always',
+            show_grades: true,
+            url: '/mock-url',
+          },
+          {
+            assignment_type: 'Homework',
+            block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@homework1',
+            display_name: 'Homework 1',
+            learner_has_access: true,
+            has_graded_assignment: true,
+            percent_graded: 0.9,
+            show_correctness: 'always',
+            show_grades: true,
+            url: '/mock-url',
+          },
+        ],
+      },
+      {
+        display_name: 'Section 2',
+        subsections: [
+          {
+            assignment_type: 'Exam',
+            block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@final_exam',
+            display_name: 'Final Exam',
+            learner_has_access: true,
+            has_graded_assignment: true,
+            percent_graded: 0.85,
+            show_correctness: 'always',
+            show_grades: true,
+            url: '/mock-url',
+          },
+        ],
+      },
+    ];
+
+    beforeEach(() => {
+      // Reset any existing handlers to avoid conflicts
+      axiosMock.reset();
+
+      // Re-add the base mocks that other tests expect
+      axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
+      axiosMock.onGet(progressUrl).reply(200, defaultTabData);
+      axiosMock.onGet(masqueradeUrl).reply(200, { success: true });
+
+      // Mock exam data endpoints using specific GET handlers
+      axiosMock.onGet(/.*exam1.*/).reply(200, {
+        exam: {
+          id: 1,
+          course_id: courseId,
+          content_id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@exam1',
+          exam_name: 'Midterm Exam',
+          attempt_status: 'submitted',
+          time_remaining_seconds: 0,
+        },
+      });
+
+      axiosMock.onGet(/.*homework1.*/).reply(404);
+
+      axiosMock.onGet(/.*final_exam.*/).reply(200, {
+        exam: {
+          id: 2,
+          course_id: courseId,
+          content_id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@final_exam',
+          exam_name: 'Final Exam',
+          attempt_status: 'ready_to_start',
+          time_remaining_seconds: 7200,
+        },
+      });
+    });
+
+    it('should fetch exam data for all subsections when ProgressTab renders', async () => {
+      setTabData({ section_scores: mockSectionScores });
+
+      await fetchAndRender();
+
+      // Verify exam API calls were made for all subsections
+      expect(axiosMock.history.get.filter(req => req.url.includes('/api/v1/student/exam/attempt/'))).toHaveLength(3);
+
+      // Verify the exam data is in the Redux store
+      const state = store.getState();
+      expect(state.courseHome.examsData).toHaveLength(3);
+
+      // Check the exam data structure
+      expect(state.courseHome.examsData[0]).toEqual({
+        id: 1,
+        courseId,
+        contentId: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@exam1',
+        examName: 'Midterm Exam',
+        attemptStatus: 'submitted',
+        timeRemainingSeconds: 0,
+      });
+
+      expect(state.courseHome.examsData[1]).toEqual({}); // 404 response for homework
+
+      expect(state.courseHome.examsData[2]).toEqual({
+        id: 2,
+        courseId,
+        contentId: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@final_exam',
+        examName: 'Final Exam',
+        attemptStatus: 'ready_to_start',
+        timeRemainingSeconds: 7200,
+      });
+    });
+
+    it('should handle empty section scores gracefully', async () => {
+      setTabData({ section_scores: [] });
+
+      await fetchAndRender();
+
+      // Verify no exam API calls were made
+      expect(axiosMock.history.get.filter(req => req.url.includes('/api/v1/student/exam/attempt/'))).toHaveLength(0);
+
+      // Verify empty exam data in Redux store
+      const state = store.getState();
+      expect(state.courseHome.examsData).toEqual([]);
+    });
+
+    it('should re-fetch exam data when section scores change', async () => {
+      // Initial render with limited section scores
+      setTabData({
+        section_scores: [mockSectionScores[0]], // Only first section
+      });
+
+      await fetchAndRender();
+
+      // Verify initial API calls (2 subsections in first section)
+      expect(axiosMock.history.get.filter(req => req.url.includes('/api/v1/student/exam/attempt/'))).toHaveLength(2);
+
+      // Clear axios history to track new calls
+      axiosMock.resetHistory();
+
+      // Update with full section scores and re-render
+      setTabData({ section_scores: mockSectionScores });
+      await executeThunk(thunks.fetchProgressTab(courseId), store.dispatch);
+
+      // Verify additional API calls for all subsections
+      expect(axiosMock.history.get.filter(req => req.url.includes('/api/v1/student/exam/attempt/'))).toHaveLength(3);
+    });
+
+    it('should handle exam API errors gracefully without breaking ProgressTab', async () => {
+      // Clear existing mocks and setup specific error scenario
+      axiosMock.reset();
+
+      // Re-add base mocks
+      axiosMock.onGet(courseMetadataUrl).reply(200, defaultMetadata);
+      axiosMock.onGet(progressUrl).reply(200, defaultTabData);
+      axiosMock.onGet(masqueradeUrl).reply(200, { success: true });
+
+      // Mock first exam to return 500 error
+      axiosMock.onGet(/.*exam1.*/).reply(500, { error: 'Server Error' });
+
+      // Mock other exams to succeed
+      axiosMock.onGet(/.*homework1.*/).reply(404, { customAttributes: { httpErrorStatus: 404 } });
+      axiosMock.onGet(/.*final_exam.*/).reply(200, {
+        exam: {
+          id: 2,
+          course_id: courseId,
+          content_id: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@final_exam',
+          exam_name: 'Final Exam',
+          attempt_status: 'ready_to_start',
+          time_remaining_seconds: 7200,
+        },
+      });
+
+      setTabData({ section_scores: mockSectionScores });
+
+      await fetchAndRender();
+
+      // Verify ProgressTab still renders successfully despite API error
+      expect(screen.getByText('Grades')).toBeInTheDocument();
+
+      // Verify the exam data includes error placeholder for failed request
+      const state = store.getState();
+      expect(state.courseHome.examsData).toHaveLength(3);
+      expect(state.courseHome.examsData[0]).toEqual({}); // Failed request returns empty object
+    });
+
+    it('should use EXAMS_BASE_URL when configured for exam API calls', async () => {
+      // Configure EXAMS_BASE_URL
+      const originalConfig = getConfig();
+      setConfig({
+        ...originalConfig,
+        EXAMS_BASE_URL: 'http://localhost:18740',
+      });
+
+      // Override mock to use new base URL
+      const examUrlWithExamsBase = /http:\/\/localhost:18740\/api\/v1\/student\/exam\/attempt\/course_id.*/;
+      axiosMock.onGet(examUrlWithExamsBase).reply(200, {
+        exam: {
+          id: 1,
+          course_id: courseId,
+          exam_name: 'Test Exam',
+          attempt_status: 'created',
+        },
+      });
+
+      setTabData({ section_scores: [mockSectionScores[0]] });
+
+      await fetchAndRender();
+
+      // Verify API calls use EXAMS_BASE_URL
+      const examApiCalls = axiosMock.history.get.filter(req => req.url.includes('localhost:18740'));
+      expect(examApiCalls.length).toBeGreaterThan(0);
+
+      // Restore original config
+      setConfig(originalConfig);
+    });
+
+    it('should extract sequence IDs correctly from nested section scores structure', async () => {
+      const complexSectionScores = [
+        {
+          display_name: 'Introduction',
+          subsections: [
+            {
+              assignment_type: 'Lecture',
+              block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@intro',
+              display_name: 'Course Introduction',
+            },
+          ],
+        },
+        {
+          display_name: 'Assessments',
+          subsections: [
+            {
+              assignment_type: 'Exam',
+              block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@quiz1',
+              display_name: 'Quiz 1',
+            },
+            {
+              assignment_type: 'Exam',
+              block_key: 'block-v1:edX+DemoX+Demo_Course+type@sequential+block@quiz2',
+              display_name: 'Quiz 2',
+            },
+          ],
+        },
+      ];
+
+      // Mock all the expected sequence IDs
+      const expectedSequenceIds = [
+        'block-v1:edX+DemoX+Demo_Course+type@sequential+block@intro',
+        'block-v1:edX+DemoX+Demo_Course+type@sequential+block@quiz1',
+        'block-v1:edX+DemoX+Demo_Course+type@sequential+block@quiz2',
+      ];
+
+      expectedSequenceIds.forEach((sequenceId, index) => {
+        const examUrl = new RegExp(`.*/api/v1/student/exam/attempt/course_id/${encodeURIComponent(courseId)}/content_id/${encodeURIComponent(sequenceId)}.*`);
+        axiosMock.onGet(examUrl).reply(index === 0 ? 404 : 200, {
+          exam: {
+            id: index,
+            course_id: courseId,
+            content_id: sequenceId,
+            exam_name: `Test ${index}`,
+          },
+        });
+      });
+
+      setTabData({ section_scores: complexSectionScores });
+
+      await fetchAndRender();
+
+      // Verify API calls were made for all extracted sequence IDs
+      expect(axiosMock.history.get.filter(req => req.url.includes('/api/v1/student/exam/attempt/'))).toHaveLength(3);
+
+      // Verify correct sequence IDs were used in API calls
+      const apiCalls = axiosMock.history.get.filter(req => req.url.includes('/api/v1/student/exam/attempt/'));
+      expectedSequenceIds.forEach(sequenceId => {
+        expect(apiCalls.some(call => call.url.includes(encodeURIComponent(sequenceId)))).toBe(true);
+      });
+    });
+  });
 });

src/course-home/progress-tab/certificate-status/CertificateStatus.jsx

@@ -1,23 +1,22 @@
-import React, { useEffect } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import {
-  FormattedDate, FormattedMessage, injectIntl, intlShape,
-} from '@edx/frontend-platform/i18n';
+import { FormattedDate, FormattedMessage, useIntl } 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 = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CertificateStatus = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     entranceExamData,
@@ -215,7 +214,6 @@ const CertificateStatus = ({ intl }) => {
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
   if (!certCase) {
     return null;
   }
@@ -243,32 +241,32 @@ const CertificateStatus = ({ intl }) => {
   return (
     <section data-testid="certificate-status-component" className="text-dark-700 mb-4">
       <Card className="bg-light-200 raised-card">
-        <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>
+        <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>
     </section>
   );
 };
 
-CertificateStatus.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CertificateStatus);
+export default CertificateStatus;

src/course-home/progress-tab/course-completion/CompleteDonutSegment.jsx

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';
 
 import messages from './messages';
 
-const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) => {
+const CompleteDonutSegment = ({ completePercentage, lockedPercentage }) => {
+  const intl = useIntl();
   const [showCompletePopover, setShowCompletePopover] = useState(false);
 
   if (!completePercentage) {
@@ -82,8 +83,7 @@ const CompleteDonutSegment = ({ completePercentage, intl, lockedPercentage }) =>
 
 CompleteDonutSegment.propTypes = {
   completePercentage: PropTypes.number.isRequired,
-  intl: intlShape.isRequired,
   lockedPercentage: PropTypes.number.isRequired,
 };
 
-export default injectIntl(CompleteDonutSegment);
+export default CompleteDonutSegment;

src/course-home/progress-tab/course-completion/CompletionDonutChart.jsx

@@ -1,8 +1,5 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../data/hooks';
 import { useModel } from '../../../generic/model-store';
 
 import CompleteDonutSegment from './CompleteDonutSegment';
@@ -10,10 +7,9 @@ import IncompleteDonutSegment from './IncompleteDonutSegment';
 import LockedDonutSegment from './LockedDonutSegment';
 import messages from './messages';
 
-const CompletionDonutChart = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CompletionDonutChart = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     completionSummary: {
@@ -62,8 +58,4 @@ const CompletionDonutChart = ({ intl }) => {
   );
 };
 
-CompletionDonutChart.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CompletionDonutChart);
+export default CompletionDonutChart;

src/course-home/progress-tab/course-completion/CompletionDonutChart.scss

@@ -7,18 +7,18 @@
 
 .donut-chart-label {
   font: {
-    family: $font-family-sans-serif;
+    family: var(--pgn-typography-font-family-sans-serif);
     size: .2rem;
-    weight: $font-weight-normal;
+    weight: var(--pgn-typography-font-weight-normal);
   }
   text-anchor: middle;
 }
 
 .donut-chart-number {
   font: {
-    family: $font-family-monospace;
+    family: var(--pgn-typography-font-family-monospace);
     size: .5rem;
-    weight: $font-weight-bold;
+    weight: var(--pgn-typography-font-weight-bold);
   }
   line-height: 1rem;
   text-anchor: middle;
@@ -29,7 +29,7 @@
 }
 
 .donut-chart-text {
-  fill: $primary-500;
+  fill: var(--pgn-color-primary-500);
   -moz-transform: translateY(0.25em);
   -ms-transform: translateY(0.25em);
   -webkit-transform: translateY(0.25em);
@@ -56,7 +56,7 @@
 
 .donut-ring, .donut-segment, .donut-hole {
   &.complete-stroke {
-    stroke: $info-500;
+    stroke: var(--pgn-color-info-500);
   }
 
   &.divider-stroke {
@@ -65,10 +65,10 @@
   }
 
   &.incomplete-stroke {
-    stroke: $light-300;
+    stroke: var(--pgn-color-light-300);
   }
 
   &.locked-stroke {
-    stroke: $primary-500;
+    stroke: var(--pgn-color-primary-500);
   }
 }

src/course-home/progress-tab/course-completion/CourseCompletion.jsx

@@ -1,27 +1,26 @@
-import React from 'react';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import CompletionDonutChart from './CompletionDonutChart';
 import messages from './messages';
 
-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>
-      <div className="col-12 col-sm-6 col-md-5 mt-sm-n3 p-0 text-center">
-        <CompletionDonutChart />
-      </div>
-    </div>
-  </section>
-);
+const CourseCompletion = () => {
+  const intl = useIntl();
 
-CourseCompletion.propTypes = {
-  intl: intlShape.isRequired,
+  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>
+      </div>
+    </section>
+  );
 };
 
-export default injectIntl(CourseCompletion);
+export default CourseCompletion;

src/course-home/progress-tab/course-completion/IncompleteDonutSegment.jsx

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';
 
 import messages from './messages';
 
-const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
+const IncompleteDonutSegment = ({ incompletePercentage }) => {
+  const intl = useIntl();
   const [showIncompletePopover, setShowIncompletePopover] = useState(false);
 
   if (!incompletePercentage) {
@@ -53,7 +54,6 @@ const IncompleteDonutSegment = ({ incompletePercentage, intl }) => {
 
 IncompleteDonutSegment.propTypes = {
   incompletePercentage: PropTypes.number.isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(IncompleteDonutSegment);
+export default IncompleteDonutSegment;

src/course-home/progress-tab/course-completion/LockedDonutSegment.jsx

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
 import { OverlayTrigger, Popover } from '@openedx/paragon';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from './messages';
 
-const LockedDonutSegment = ({ intl, lockedPercentage }) => {
+const LockedDonutSegment = ({ lockedPercentage }) => {
+  const intl = useIntl();
   const [showLockedPopover, setShowLockedPopover] = useState(false);
 
   if (!lockedPercentage) {
@@ -65,8 +66,7 @@ const LockedDonutSegment = ({ intl, lockedPercentage }) => {
 };
 
 LockedDonutSegment.propTypes = {
-  intl: intlShape.isRequired,
   lockedPercentage: PropTypes.number.isRequired,
 };
 
-export default injectIntl(LockedDonutSegment);
+export default LockedDonutSegment;

src/course-home/progress-tab/credit-information/CreditInformation.jsx

@@ -1,19 +1,17 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
 import { getConfig } from '@edx/frontend-platform';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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 = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CreditInformation = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     creditCourseRequirements,
@@ -36,36 +34,13 @@ const CreditInformation = ({ intl }) => {
 
   switch (creditCourseRequirements.eligibilityStatus) {
     case 'not_eligible':
-      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 }}
-        />
-      );
+      eligibilityStatus = intl.formatMessage(messages.creditNotEligibleStatus, { creditLink });
       break;
     case 'eligible':
-      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 }}
-        />
-      );
+      eligibilityStatus = intl.formatMessage(messages.creditEligibleStatus, { dashboardLink, creditLink });
       break;
     case 'partial_eligible':
-      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 }}
-        />
-      );
+      eligibilityStatus = intl.formatMessage(messages.creditPartialEligibleStatus, { creditLink });
       break;
     default:
       break;
@@ -108,8 +83,4 @@ const CreditInformation = ({ intl }) => {
   );
 };
 
-CreditInformation.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CreditInformation);
+export default CreditInformation;

src/course-home/progress-tab/credit-information/messages.ts

@@ -35,6 +35,22 @@ 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;

src/course-home/progress-tab/grades/course-grade/CourseGrade.jsx

@@ -1,6 +1,5 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../../data/hooks';
 
 import { useModel } from '../../../../generic/model-store';
 
@@ -11,10 +10,9 @@ import CreditInformation from '../../credit-information/CreditInformation';
 
 import messages from '../messages';
 
-const CourseGrade = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CourseGrade = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     creditCourseRequirements,
@@ -54,8 +52,4 @@ const CourseGrade = ({ intl }) => {
   );
 };
 
-CourseGrade.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseGrade);
+export default CourseGrade;

src/course-home/progress-tab/grades/course-grade/CourseGradeFooter.jsx

@@ -1,35 +1,64 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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';
+import { getLatestDueDateInFuture } from '../../utils';
 
-const CourseGradeFooter = ({ intl, passingGrade }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const ResponsiveText = ({
+  wideScreen, children, hasLetterGrades, passingGrade,
+}) => {
+  const className = wideScreen ? 'h4 m-0 align-bottom' : 'h5 align-bottom';
+  const iconSize = wideScreen ? 'h3' : 'h4';
+
+  return (
+    <span className={className}>
+      {children}
+      {hasLetterGrades && (
+        <span style={{ whiteSpace: 'nowrap' }}>
+          &nbsp;
+          <GradeRangeTooltip iconButtonClassName={iconSize} passingGrade={passingGrade} />
+        </span>
+      )}
+    </span>
+  );
+};
+
+const NoticeRow = ({
+  wideScreen, icon, bgClass, message,
+}) => {
+  const textClass = wideScreen ? 'h4 m-0 align-bottom' : 'h5 align-bottom';
+  return (
+    <div className={`row w-100 m-0 px-4 py-3 py-md-4 rounded-bottom ${bgClass}`}>
+      <div className="col-auto p-0">{icon}</div>
+      <div className="col-11 pl-2 px-0">
+        <span className={textClass}>{message}</span>
+      </div>
+    </div>
+  );
+};
+
+const CourseGradeFooter = ({ passingGrade }) => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
-    courseGrade: {
-      isPassing,
-      letterGrade,
-    },
-    gradingPolicy: {
-      gradeRange,
-    },
+    assignmentTypeGradeSummary,
+    courseGrade: { isPassing, letterGrade },
+    gradingPolicy: { gradeRange },
   } = useModel('progress', courseId);
 
+  const latestDueDate = getLatestDueDateInFuture(assignmentTypeGradeSummary);
   const wideScreen = useWindowSize().width >= breakpoints.medium.minWidth;
+  const hasLetterGrades = Object.keys(gradeRange).length > 1;
 
-  const hasLetterGrades = Object.keys(gradeRange).length > 1; // A pass/fail course will only have one key
+  // build footer text
   let footerText = intl.formatMessage(messages.courseGradeFooterNonPassing, { passingGrade });
-
   if (isPassing) {
     if (hasLetterGrades) {
       const minGradeRangeCutoff = gradeRange[letterGrade] * 100;
@@ -49,45 +78,65 @@ const CourseGradeFooter = ({ intl, passingGrade }) => {
     }
   }
 
-  const icon = isPassing ? <Icon src={CheckCircle} className="text-success-300 d-inline-flex align-bottom" />
-    : <Icon src={WarningFilled} className="d-inline-flex align-bottom" />;
+  const passingIcon = isPassing ? (
+    <Icon src={CheckCircle} className="text-success-300 d-inline-flex align-bottom" />
+  ) : (
+    <Icon src={WarningFilled} className="d-inline-flex align-bottom" />
+  );
 
   return (
-    <div className={`row w-100 m-0 px-4 py-3 py-md-4 rounded-bottom ${isPassing ? 'bg-success-100' : 'bg-warning-100'}`}>
-      <div className="col-auto p-0">
-        {icon}
-      </div>
-      <div className="col-11 pl-2 px-0">
-        {!wideScreen && (
-          <span className="h5 align-bottom">
+    <div>
+      <NoticeRow
+        wideScreen={wideScreen}
+        icon={passingIcon}
+        bgClass={isPassing ? 'bg-success-100' : 'bg-warning-100'}
+        message={(
+          <ResponsiveText
+            wideScreen={wideScreen}
+            hasLetterGrades={hasLetterGrades}
+            passingGrade={passingGrade}
+          >
             {footerText}
-            {hasLetterGrades && (
-              <span style={{ whiteSpace: 'nowrap' }}>
-                &nbsp;
-                <GradeRangeTooltip iconButtonClassName="h4" passingGrade={passingGrade} />
-              </span>
-            )}
-          </span>
+          </ResponsiveText>
         )}
-        {wideScreen && (
-          <span className="h4 m-0 align-bottom">
-            {footerText}
-            {hasLetterGrades && (
-              <span style={{ whiteSpace: 'nowrap' }}>
-                &nbsp;
-                <GradeRangeTooltip iconButtonClassName="h3" passingGrade={passingGrade} />
-              </span>
-            )}
-          </span>
-        )}
-      </div>
+      />
+      {latestDueDate && (
+        <NoticeRow
+          wideScreen={wideScreen}
+          icon={<Icon src={WarningFilled} className="d-inline-flex align-bottom" />}
+          bgClass="bg-warning-100"
+          message={intl.formatMessage(messages.courseGradeFooterDueDateNotice, {
+            dueDate: intl.formatDate(latestDueDate, {
+              year: 'numeric',
+              month: 'long',
+              day: 'numeric',
+              hour: 'numeric',
+              minute: 'numeric',
+              timeZoneName: 'short',
+            }),
+          })}
+        />
+      )}
     </div>
   );
 };
 
-CourseGradeFooter.propTypes = {
-  intl: intlShape.isRequired,
+ResponsiveText.propTypes = {
+  wideScreen: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  hasLetterGrades: PropTypes.bool.isRequired,
   passingGrade: PropTypes.number.isRequired,
 };
 
-export default injectIntl(CourseGradeFooter);
+NoticeRow.propTypes = {
+  wideScreen: PropTypes.bool.isRequired,
+  icon: PropTypes.element.isRequired,
+  bgClass: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+};
+
+CourseGradeFooter.propTypes = {
+  passingGrade: PropTypes.number.isRequired,
+};
+
+export default CourseGradeFooter;

src/course-home/progress-tab/grades/course-grade/CourseGradeHeader.jsx

@@ -1,19 +1,16 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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 = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CourseGradeHeader = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
   const {
     org,
   } = useModel('courseHomeMeta', courseId);
@@ -51,7 +48,7 @@ const CourseGradeHeader = ({ intl }) => {
     previewText = intl.formatMessage(messages.courseGradePreviewUpgradeDeadlinePassedBody);
   }
   return (
-    <div className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
+    <div id="grade-course-header" className="row w-100 m-0 p-4 rounded-top bg-primary-500 text-white">
       <div className={`col-12 ${verifiedMode ? 'col-md-9' : ''} p-0`}>
         <div className="row w-100 m-0 p-0">
           <div className="col-1 p-0">
@@ -74,7 +71,7 @@ const CourseGradeHeader = ({ intl }) => {
       </div>
       {verifiedMode && (
         <div className="col-12 col-md-3 mt-3 mt-md-0 p-0 align-self-center text-right">
-          <Button variant="brand" size="sm" href={verifiedMode.upgradeUrl} onClick={logUpgradeButtonClick}>
+          <Button id="upgrade-button" variant="brand" size="sm" href={verifiedMode.upgradeUrl} onClick={logUpgradeButtonClick}>
             {intl.formatMessage(messages.courseGradePreviewUpgradeButton)}
           </Button>
         </div>
@@ -83,8 +80,4 @@ const CourseGradeHeader = ({ intl }) => {
   );
 };
 
-CourseGradeHeader.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(CourseGradeHeader);
+export default CourseGradeHeader;

src/course-home/progress-tab/grades/course-grade/CurrentGradeTooltip.jsx

@@ -1,22 +1,19 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
 
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { getLocale, isRtl, useIntl } 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 = ({ intl, tooltipClassName }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const CurrentGradeTooltip = ({ tooltipClassName }) => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
+    assignmentTypeGradeSummary,
     courseGrade: {
       isPassing,
       percent,
@@ -29,6 +26,8 @@ const CurrentGradeTooltip = ({ intl, tooltipClassName }) => {
 
   const isLocaleRtl = isRtl(getLocale());
 
+  const hasHiddenGrades = assignmentTypeGradeSummary.some((assignmentType) => assignmentType.hasHiddenContribution !== 'none');
+
   if (isLocaleRtl) {
     currentGradeDirection = currentGrade < 50 ? '-' : '';
   }
@@ -60,6 +59,15 @@ const CurrentGradeTooltip = ({ intl, tooltipClassName }) => {
       >
         {intl.formatMessage(messages.currentGradeLabel)}
       </text>
+      <text
+        className="x-small"
+        textAnchor={currentGrade < 50 ? 'start' : 'end'}
+        x={`${Math.min(...[isLocaleRtl ? 100 - currentGrade : currentGrade, 100])}%`}
+        y="35px"
+        style={{ transform: `translateX(${currentGradeDirection}3.4em)` }}
+      >
+        {hasHiddenGrades ? ` + ${intl.formatMessage(messages.hiddenScoreLabel)}` : ''}
+      </text>
     </>
   );
 };
@@ -69,8 +77,7 @@ CurrentGradeTooltip.defaultProps = {
 };
 
 CurrentGradeTooltip.propTypes = {
-  intl: intlShape.isRequired,
   tooltipClassName: PropTypes.string,
 };
 
-export default injectIntl(CurrentGradeTooltip);
+export default CurrentGradeTooltip;

src/course-home/progress-tab/grades/course-grade/GradeBar.jsx

@@ -1,20 +1,16 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 import CurrentGradeTooltip from './CurrentGradeTooltip';
 import PassingGradeTooltip from './PassingGradeTooltip';
 
 import messages from '../messages';
 
-const GradeBar = ({ intl, passingGrade }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const GradeBar = ({ passingGrade }) => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     courseGrade: {
@@ -52,8 +48,7 @@ const GradeBar = ({ intl, passingGrade }) => {
 };
 
 GradeBar.propTypes = {
-  intl: intlShape.isRequired,
   passingGrade: PropTypes.number.isRequired,
 };
 
-export default injectIntl(GradeBar);
+export default GradeBar;

src/course-home/progress-tab/grades/course-grade/GradeBar.scss

@@ -4,24 +4,24 @@
   }
 
   .grade-bar__base {
-    fill: $light-300;
+    fill: var(--pgn-color-light-300);
   }
 
   .grade-bar__divider {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
     width: 1px;
   }
 
   .grade-bar--passing {
-    fill: $primary-500;
+    fill: var(--pgn-color-primary-500);
   }
 
   .grade-bar--current-passing {
-    fill: $success-500;
+    fill: var(--pgn-color-success-500);
   }
 
   .grade-bar--current-non-passing {
-    fill: $accent-b;
+    fill: var(--pgn-color-accent-b);
   }
 }
 
@@ -31,22 +31,22 @@
 
 #minimum-grade-tooltip {
   .arrow::after {
-    border-bottom-color: $primary-500;
+    border-bottom-color: var(--pgn-color-primary-500);
   }
 }
 
 #passing-grade-tooltip {
-  background: $success-500;
+  background: var(--pgn-color-success-500);
 
   .arrow::after {
-    border-top-color: $success-500;
+    border-top-color: var(--pgn-color-success-500);
   }
 }
 
 #non-passing-grade-tooltip {
-  background: $accent-b;
+  background: var(--pgn-color-accent-b);
 
   .arrow::after {
-    border-top-color: $accent-b;
+    border-top-color: var(--pgn-color-accent-b);
   }
 }

src/course-home/progress-tab/grades/course-grade/GradeRangeTooltip.jsx

@@ -1,20 +1,19 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } 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 = ({ intl, iconButtonClassName, passingGrade }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const GradeRangeTooltip = ({ iconButtonClassName, passingGrade }) => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     gradesFeatureIsFullyLocked,
@@ -80,8 +79,7 @@ GradeRangeTooltip.defaultProps = {
 
 GradeRangeTooltip.propTypes = {
   iconButtonClassName: PropTypes.string,
-  intl: intlShape.isRequired,
   passingGrade: PropTypes.number.isRequired,
 };
 
-export default injectIntl(GradeRangeTooltip);
+export default GradeRangeTooltip;

src/course-home/progress-tab/grades/course-grade/PassingGradeTooltip.jsx

@@ -1,14 +1,12 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
 import { OverlayTrigger, Popover } from '@openedx/paragon';
 
 import messages from '../messages';
 
-const PassingGradeTooltip = ({ intl, passingGrade, tooltipClassName }) => {
+const PassingGradeTooltip = ({ passingGrade, tooltipClassName }) => {
+  const intl = useIntl();
   const isLocaleRtl = isRtl(getLocale());
 
   let passingGradeDirection = passingGrade < 50 ? '' : '-';
@@ -54,9 +52,8 @@ PassingGradeTooltip.defaultProps = {
 };
 
 PassingGradeTooltip.propTypes = {
-  intl: intlShape.isRequired,
   passingGrade: PropTypes.number.isRequired,
   tooltipClassName: PropTypes.string,
 };
 
-export default injectIntl(PassingGradeTooltip);
+export default PassingGradeTooltip;

src/course-home/progress-tab/grades/detailed-grades/DetailedGrades.jsx

@@ -1,22 +1,20 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Blocked } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Locked } 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 = ({ intl }) => {
+const DetailedGrades = () => {
+  const intl = useIntl();
   const { administrator } = getAuthenticatedUser();
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
   const {
     org,
     tabs,
@@ -28,6 +26,8 @@ const DetailedGrades = ({ intl }) => {
   } = 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,35 +54,36 @@ const DetailedGrades = ({ intl }) => {
 
   return (
     <section className="text-dark-700">
-      <h3 className="h4 mb-3">{intl.formatMessage(messages.detailedGrades)}</h3>
+      <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>
       {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={Blocked} data-testid="blocked-icon" />
-          {intl.formatMessage(messages.gradeSummaryLimitedAccessExplanation)}
+          <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: '' })}
         </div>
       )}
       {hasSectionScores && (
         <DetailedGradesTable />
       )}
       {!hasSectionScores && (
-        <p className="small">{intl.formatMessage(messages.detailedGradesEmpty)}</p>
+        <p className="small">{intl.formatMessage(emptyTableMsg)}</p>
       )}
-      {overviewTabUrl && (
+      {overviewTabUrl && !showUngradedAssignments() && (
         <p className="x-small m-0">
-          <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 }}
-          />
+          {intl.formatMessage(messages.ungradedAlert, { outlineLink })}
         </p>
       )}
     </section>
   );
 };
 
-DetailedGrades.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(DetailedGrades);
+export default DetailedGrades;

src/course-home/progress-tab/grades/detailed-grades/DetailedGradesTable.jsx

@@ -1,19 +1,15 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
-
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { getLocale, isRtl, useIntl } 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 = ({ intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const DetailedGradesTable = () => {
+  const intl = useIntl();
+  const courseId = useContextId();
 
   const {
     sectionScores,
@@ -24,9 +20,10 @@ const DetailedGradesTable = ({ intl }) => {
     sectionScores.map((chapter) => {
       const subsectionScores = chapter.subsections.filter(
         (subsection) => !!(
-          subsection.hasGradedAssignment
-          && subsection.showGrades
-          && (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)),
+          (showUngradedAssignments() || subsection.hasGradedAssignment)
+            && subsection.showGrades
+            && (subsection.numPointsPossible > 0 || subsection.numPointsEarned > 0)
+        ),
       );
 
       if (subsectionScores.length === 0) {
@@ -66,8 +63,4 @@ const DetailedGradesTable = ({ intl }) => {
   );
 };
 
-DetailedGradesTable.propTypes = {
-  intl: intlShape.isRequired,
-};
-
-export default injectIntl(DetailedGradesTable);
+export default DetailedGradesTable;

src/course-home/progress-tab/grades/detailed-grades/ProblemScoreDrawer.jsx

@@ -1,18 +1,19 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-import {
-  getLocale, injectIntl, intlShape, isRtl,
-} from '@edx/frontend-platform/i18n';
+import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
 
 import messages from '../messages';
 
-const ProblemScoreDrawer = ({ intl, problemScores, subsection }) => {
+const ProblemScoreDrawer = ({ problemScores, subsection }) => {
+  const intl = useIntl();
   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(messages.problemScoreLabel)}</span>
+      <span id="problem-score-label" className="col-auto p-0">{intl.formatMessage(scoreLabel)}</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) => (
@@ -26,12 +27,14 @@ const ProblemScoreDrawer = ({ intl, 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 }).isRequired,
+  subsection: PropTypes.shape({
+    learnerHasAccess: PropTypes.bool,
+    hasGradedAssignment: PropTypes.bool,
+  }).isRequired,
 };
 
-export default injectIntl(ProblemScoreDrawer);
+export default ProblemScoreDrawer;

src/course-home/progress-tab/grades/detailed-grades/SubsectionTitleCell.jsx

@@ -1,23 +1,24 @@
-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 { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Collapsible, Icon, Row } from '@openedx/paragon';
 import {
-  ArrowDropDown, ArrowDropUp, Blocked, Info,
+  ArrowDropDown,
+  ArrowDropUp,
+  Info,
+  Locked,
 } 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 = ({ intl, subsection }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const SubsectionTitleCell = ({ subsection }) => {
+  const intl = useIntl();
+  const courseId = useContextId();
   const {
     org,
   } = useModel('courseHomeMeta', courseId);
@@ -61,8 +62,8 @@ const SubsectionTitleCell = ({ intl, subsection }) => {
                 aria-label={intl.formatMessage(messages.noAccessToSubsection, { displayName })}
                 className="mr-1 mt-1 d-inline-flex"
                 style={{ height: '1rem', width: '1rem' }}
-                src={Blocked}
-                data-testid="blocked-icon"
+                src={Locked}
+                data-testid="locked-icon"
               />
             )}
           {url ? (
@@ -102,7 +103,6 @@ const SubsectionTitleCell = ({ intl, 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 injectIntl(SubsectionTitleCell);
+export default SubsectionTitleCell;

src/course-home/progress-tab/grades/grade-summary/AssignmentTypeCell.jsx

@@ -1,24 +1,22 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Blocked } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Locked } 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 = ({
-  intl, assignmentType, footnoteMarker, footnoteId, locked,
+  assignmentType, footnoteMarker, footnoteId, locked,
 }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const intl = useIntl();
+  const courseId = useContextId();
 
   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={Blocked} data-testid="blocked-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={Locked} data-testid="locked-icon" /> : '';
 
   return (
     <div className="d-flex small">
@@ -45,7 +43,6 @@ const AssignmentTypeCell = ({
 };
 
 AssignmentTypeCell.propTypes = {
-  intl: intlShape.isRequired,
   assignmentType: PropTypes.string.isRequired,
   footnoteId: PropTypes.string,
   footnoteMarker: PropTypes.number,
@@ -58,4 +55,4 @@ AssignmentTypeCell.defaultProps = {
   locked: false,
 };
 
-export default injectIntl(AssignmentTypeCell);
+export default AssignmentTypeCell;

src/course-home/progress-tab/grades/grade-summary/DroppableAssignmentFootnote.jsx

@@ -1,16 +1,14 @@
-import React from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useContextId } from '../../../../data/hooks';
 
 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
 
-const DroppableAssignmentFootnote = ({ footnotes, intl }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const DroppableAssignmentFootnote = ({ footnotes }) => {
+  const intl = useIntl();
+  const courseId = useContextId();
   const {
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
@@ -21,14 +19,10 @@ const DroppableAssignmentFootnote = ({ footnotes, intl }) => {
         {footnotes.map((footnote, index) => (
           <li id={`${footnote.id}-footnote`} key={footnote.id} className="x-small mt-1">
             <sup>{index + 1}</sup>
-            <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,
-              }}
-            />
+            {intl.formatMessage(messages.droppableAssignmentsText, {
+              numDroppable: footnote.numDroppable,
+              assignmentType: footnote.assignmentType,
+            })}
             <a className="sr-only" href={`#${footnote.id}-ref`} tabIndex={gradesFeatureIsFullyLocked ? '-1' : '0'}>
               {intl.formatMessage(messages.backToContent)}
             </a>
@@ -45,7 +39,6 @@ DroppableAssignmentFootnote.propTypes = {
     id: PropTypes.string.isRequired,
     numDroppable: PropTypes.number.isRequired,
   })).isRequired,
-  intl: intlShape.isRequired,
 };
 
-export default injectIntl(DroppableAssignmentFootnote);
+export default DroppableAssignmentFootnote;

src/course-home/progress-tab/grades/grade-summary/GradeSummary.jsx

@@ -1,24 +1,21 @@
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
+
+import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 
 import GradeSummaryHeader from './GradeSummaryHeader';
 import GradeSummaryTable from './GradeSummaryTable';
 
 const GradeSummary = () => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+  const courseId = useContextId();
 
   const {
-    gradingPolicy: {
-      assignmentPolicies,
-    },
+    assignmentTypeGradeSummary,
   } = useModel('progress', courseId);
 
   const [allOfSomeAssignmentTypeIsLocked, setAllOfSomeAssignmentTypeIsLocked] = useState(false);
 
-  if (assignmentPolicies.length === 0) {
+  if (assignmentTypeGradeSummary.length === 0) {
     return null;
   }
 

src/course-home/progress-tab/grades/grade-summary/GradeSummaryHeader.jsx

@@ -1,64 +1,69 @@
-import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Icon, IconButton, OverlayTrigger, Popover,
+  Hyperlink,
+  Icon,
+  OverlayTrigger,
+  Stack,
+  Tooltip,
 } from '@openedx/paragon';
-import { Blocked, InfoOutline } from '@openedx/paragon/icons';
+import { InfoOutline, Locked } from '@openedx/paragon/icons';
+import { useContextId } from '../../../../data/hooks';
 
 import messages from '../messages';
 import { useModel } from '../../../../generic/model-store';
 
-const GradeSummaryHeader = ({ intl, allOfSomeAssignmentTypeIsLocked }) => {
-  const {
-    courseId,
-  } = useSelector(state => state.courseHome);
+const GradeSummaryHeader = ({ allOfSomeAssignmentTypeIsLocked }) => {
+  const intl = useIntl();
+  const courseId = useContextId();
   const {
+    verifiedMode,
     gradesFeatureIsFullyLocked,
   } = useModel('progress', courseId);
-  const [showTooltip, setShowTooltip] = useState(false);
 
   return (
-    <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">
+    <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>
               {intl.formatMessage(messages.gradeSummaryTooltipBody)}
-            </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>
+            </Tooltip>
+          )}
+        >
+          <Icon
+            alt={intl.formatMessage(messages.gradeSummaryTooltipAlt)}
+            src={InfoOutline}
+            size="sm"
+          />
+        </OverlayTrigger>
+      </Stack>
       {!gradesFeatureIsFullyLocked && allOfSomeAssignmentTypeIsLocked && (
-        <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 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>
+    </Stack>
   );
 };
 
 GradeSummaryHeader.propTypes = {
-  intl: intlShape.isRequired,
   allOfSomeAssignmentTypeIsLocked: PropTypes.bool.isRequired,
 };
 
-export default injectIntl(GradeSummaryHeader);
+export default GradeSummaryHeader;