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=''

.env.development

@@ -12,10 +12,12 @@ CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-co
 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=''

.env.test

@@ -12,10 +12,12 @@ CREDIT_HELP_LINK_URL='https://help.edx.org/edxlearner/s/article/Can-I-receive-co
 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=''
@@ -48,3 +50,5 @@ 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 }}

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.

package-lock.json

@@ -13,10 +13,10 @@
         "@edx/browserslist-config": "1.5.0",
         "@edx/frontend-component-footer": "^14.6.0",
         "@edx/frontend-component-header": "^6.2.0",
-        "@edx/frontend-lib-learning-assistant": "^2.20.0",
-        "@edx/frontend-lib-special-exams": "^3.5.0",
-        "@edx/frontend-platform": "^8.3.8",
-        "@edx/openedx-atlas": "^0.6.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",
@@ -2228,9 +2228,9 @@
       }
     },
     "node_modules/@edx/frontend-component-footer": {
-      "version": "14.6.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.6.0.tgz",
-      "integrity": "sha512-cgRhom6W/WErQ9yvLmfgB6ANBs+rBDLOH73NcvJIhfwWgAg67q+MLUscIbcX9N/9Yykk+kb7Ytr3CDefiKS7HA==",
+      "version": "14.7.1",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-component-footer/-/frontend-component-footer-14.7.1.tgz",
+      "integrity": "sha512-LsT3b1xtZdPeQmIlej+voN3RvGOjl0bUq2JEEtELESRr0F6bNVySmKFzrPwD4wActlMaeyQrat53ZZeK+NQNrw==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "6.7.2",
@@ -2413,9 +2413,9 @@
       }
     },
     "node_modules/@edx/frontend-lib-learning-assistant": {
-      "version": "2.21.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-learning-assistant/-/frontend-lib-learning-assistant-2.21.0.tgz",
-      "integrity": "sha512-CUzPCQaBgXi6E1kvY0nyBSVFu8RUGpwKH4V0p8ZuysyHyRHpA+339b+gEi9FvVBMP/X4IxZHsZhi7nphlr43Iw==",
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-learning-assistant/-/frontend-lib-learning-assistant-2.24.0.tgz",
+      "integrity": "sha512-+RwmKbYxsJ6Ct9scBX3jnxSUuoiW5ed1vbCz9PQiQ8fobuiMM3fokLynIreB5ZVYWvrjSa5OaMwBq1bUXsprZw==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
@@ -2439,9 +2439,9 @@
       }
     },
     "node_modules/@edx/frontend-lib-special-exams": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-special-exams/-/frontend-lib-special-exams-3.5.0.tgz",
-      "integrity": "sha512-lRKD3K+XAuoKAaxbZxb7QLTWkSlV9yIy08XflYoHh/weClesVTETU3+NtJ5YRsC/kYHZrzSYIpMZnBnkKTGTww==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-lib-special-exams/-/frontend-lib-special-exams-4.0.0.tgz",
+      "integrity": "sha512-mJdrxebdKO9NxDFkQZ1vyWVUvWCk393pIVHJyz9vH42Kvn08LC5db8/gYk37srCfsA4Dl78pMLa408CoT14JMA==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@fortawesome/fontawesome-svg-core": "1.2.34",
@@ -2538,9 +2538,9 @@
       }
     },
     "node_modules/@edx/frontend-platform": {
-      "version": "8.3.8",
-      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.3.8.tgz",
-      "integrity": "sha512-wr3HKzDcYGNuHcM7HuZ/mqBdqnY/A7eYa3JDVZEsceyjy0PJyVKHWFu3yneGpD1zufguQCvS0q53C8gJbVzIgw==",
+      "version": "8.3.7",
+      "resolved": "https://registry.npmjs.org/@edx/frontend-platform/-/frontend-platform-8.3.7.tgz",
+      "integrity": "sha512-ya5ObMvtJlfQmoeL36OtzjFBh0hzJgXN/R2ppyIJ+IbCtY2BCfv5NqvmKD7CplwnSGJTBugpv5hQHeGmi+v97w==",
       "license": "AGPL-3.0",
       "dependencies": {
         "@cospired/i18n-iso-languages": "4.2.0",
@@ -2588,9 +2588,9 @@
       }
     },
     "node_modules/@edx/openedx-atlas": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/@edx/openedx-atlas/-/openedx-atlas-0.6.2.tgz",
-      "integrity": "sha512-28Q8vzJDMS4wUxdkbIUBQpzWJ3HTdMaGlaEhFjrVGfuZkh++1AG6Tn/7FMD88cegalYAkphu530VQCHEkMZQhw==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@edx/openedx-atlas/-/openedx-atlas-0.7.0.tgz",
+      "integrity": "sha512-jqv0IV1pHsSn9+RO8Rdsr8jm3SOd84CCzzmo2QC9yvh1MK1+p4YDURQLpmmgKJ0JzE5Cb6ImhnNL/ogpJ2wetQ==",
       "license": "AGPL-3.0",
       "bin": {
         "atlas": "atlas"
@@ -8322,9 +8322,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001715",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001715.tgz",
-      "integrity": "sha512-7ptkFGMm2OAOgvZpwgA4yjQ5SQbrNVGdRjzH0pBdy1Fasvcr+KAeECmbCAECzTuDuoX0FCY8KzUxjf9+9kfZEw==",
+      "version": "1.0.30001721",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001721.tgz",
+      "integrity": "sha512-cOuvmUVtKrtEaoKiO0rSc29jcjwMwX5tOHDy4MgVFEWiUXj4uBMJkwI8MDySkgXidpMiHUcviogAvFi4pA2hDQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -18917,9 +18917,9 @@
       }
     },
     "node_modules/prebuild-install/node_modules/tar-fs": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.2.tgz",
-      "integrity": "sha512-EsaAXwxmx8UB7FRKqeozqEPop69DXcmYwTQwXvyAPF352HJsPdkVhvTaDPYqfNgruveJIJy3TA2l+2zj8LJIJA==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-2.1.3.tgz",
+      "integrity": "sha512-090nwYJDmlhwFwEW3QQl+vaNnxsO2yVsd45eTKRBzSzu+hlb1w2K9inVq5b0ngXuLVqQ4ApvsUHHnu/zQNkWAg==",
       "license": "MIT",
       "dependencies": {
         "chownr": "^1.1.1",
@@ -22247,9 +22247,9 @@
       }
     },
     "node_modules/tar-fs": {
-      "version": "3.0.8",
-      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.8.tgz",
-      "integrity": "sha512-ZoROL70jptorGAlgAYiLoBLItEKw/fUxg9BSYK/dF/GAGYFJOJJJMvjPAKDJraCXFwadD456FCuvLWgfhMsPwg==",
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/tar-fs/-/tar-fs-3.0.9.tgz",
+      "integrity": "sha512-XF4w9Xp+ZQgifKakjZYmFdkLoSWd34VGKcsTCwlNWM7QG3ZbaxnTsaBwnjFZqHRf/rROxaR8rXnbtwdvaDI+lA==",
       "license": "MIT",
       "dependencies": {
         "pump": "^3.0.0",

package.json

@@ -17,8 +17,9 @@
     "lint:fix": "fedx-scripts eslint --fix --ext .js --ext .jsx --ext .ts --ext .tsx .",
     "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"
   },
@@ -36,10 +37,10 @@
     "@edx/browserslist-config": "1.5.0",
     "@edx/frontend-component-footer": "^14.6.0",
     "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-lib-learning-assistant": "^2.20.0",
-    "@edx/frontend-lib-special-exams": "^3.5.0",
-    "@edx/frontend-platform": "^8.3.8",
-    "@edx/openedx-atlas": "^0.6.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",

src/__snapshots__/index.test.jsx.snap

@@ -34,188 +34,192 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
     <PathFixesProvider>
       <NoticesProvider>
         <UserMessagesProvider>
-          <Routes>
-            <Route
-              element={
-                <PageWrap>
-                  <Page Not Found />
-                </PageWrap>
-              }
-              path="*"
-            />
-            <Route
-              element={
-                <PageWrap>
-                  <Goal Unsubscribe />
-                </PageWrap>
-              }
-              path="/goal-unsubscribe/:token"
-            />
-            <Route
-              element={
-                <PageWrap>
-                  <Courseware Redirect Landing Page />
-                </PageWrap>
-              }
-              path="/redirect/*"
-            />
-            <Route
-              element={
-                <PageWrap>
-                  <Preferences Unsubscribe />
-                </PageWrap>
-              }
-              path="/preferences-unsubscribe/:userToken/:updatePatch"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Course Access Error Page />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/access-denied"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="outline"
-                  >
-                    <Outline Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/home"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="lti_live"
-                  >
-                    <Live Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/live"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="dates"
-                  >
-                    <Dates Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/dates"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseHome"
-                    tab="discussion"
-                  >
-                    <Discussion Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/discussion/:path/*"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    isProgressTab={true}
-                    slice="courseHome"
-                    tab="progress"
-                  >
-                    <Progress Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/progress/:targetUserId/"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    isProgressTab={true}
-                    slice="courseHome"
-                    tab="progress"
-                  >
-                    <Progress Tab />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/progress"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Tab Container
-                    fetch={[Function]}
-                    slice="courseware"
-                    tab="courseware"
-                  >
-                    <Course Exit />
-                  </Tab Container>
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/course-end"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/:sequenceId/:unitId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId/:sequenceId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/course/:courseId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/preview/course/:courseId/:sequenceId/:unitId"
-            />
-            <Route
-              element={
-                <DecodePageRoute>
-                  <Courseware Container />
-                </DecodePageRoute>
-              }
-              path="/preview/course/:courseId/:sequenceId"
-            />
-          </Routes>
+          <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>

src/constants.ts

@@ -22,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',

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,
@@ -528,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,
@@ -669,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,
@@ -761,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,
@@ -776,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.
@@ -471,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/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,
@@ -26,6 +27,7 @@ import {
   fetchTabRequest,
   fetchTabSuccess,
   setCallToActionToast,
+  setExamsData,
 } from './slice';
 
 import mapSearchResponse from '../courseware-search/map-search-response';
@@ -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/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

@@ -171,6 +171,7 @@ const OutlineTab = () => {
         </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 */ }
@@ -181,7 +182,6 @@ const OutlineTab = () => {
               />
             )}
             <CourseTools />
-            <CourseOutlineTabNotificationsSlot courseId={courseId} />
             <CourseDates />
             <CourseHandouts />
           </div>

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

@@ -39,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>

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

@@ -1,6 +1,7 @@
-import React from 'react';
+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';
@@ -10,11 +11,17 @@ import ProgressTabCertificateStatusMainBodySlot from '../../plugin-slots/Progres
 import ProgressTabCourseGradeSlot from '../../plugin-slots/ProgressTabCourseGradeSlot';
 import ProgressTabGradeBreakdownSlot from '../../plugin-slots/ProgressTabGradeBreakdownSlot';
 import ProgressTabRelatedLinksSlot from '../../plugin-slots/ProgressTabRelatedLinksSlot';
-import { useModel } from '../../generic/model-store';
+import { useGetExamsData } from './hooks';
 
 const ProgressTab = () => {
   const courseId = useContextId();
-  const { disableProgressGraph } = useModel('progress', courseId);
+  const { disableProgressGraph, sectionScores } = useModel('progress', courseId);
+
+  const sequenceIds = useMemo(() => (
+    sectionScores.flatMap((section) => (section.subsections)).map((subsection) => subsection.blockKey)
+  ), [sectionScores]);
+
+  useGetExamsData(courseId, sequenceIds);
 
   const windowWidth = useWindowSize().width;
   if (windowWidth === undefined) {

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

@@ -661,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 () => {
@@ -1500,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/grades/course-grade/CourseGradeFooter.jsx

@@ -8,26 +8,57 @@ import { useModel } from '../../../../generic/model-store';
 
 import GradeRangeTooltip from './GradeRangeTooltip';
 import messages from '../messages';
+import { getLatestDueDateInFuture } from '../../utils';
+
+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;
@@ -47,42 +78,63 @@ const CourseGradeFooter = ({ 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>
   );
 };
 
+ResponsiveText.propTypes = {
+  wideScreen: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  hasLetterGrades: PropTypes.bool.isRequired,
+  passingGrade: PropTypes.number.isRequired,
+};
+
+NoticeRow.propTypes = {
+  wideScreen: PropTypes.bool.isRequired,
+  icon: PropTypes.element.isRequired,
+  bgClass: PropTypes.string.isRequired,
+  message: PropTypes.string.isRequired,
+};
+
 CourseGradeFooter.propTypes = {
   passingGrade: PropTypes.number.isRequired,
 };

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

@@ -48,7 +48,7 @@ const CourseGradeHeader = () => {
     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">
@@ -71,7 +71,7 @@ const CourseGradeHeader = () => {
       </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>

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

@@ -13,6 +13,7 @@ const CurrentGradeTooltip = ({ tooltipClassName }) => {
   const courseId = useContextId();
 
   const {
+    assignmentTypeGradeSummary,
     courseGrade: {
       isPassing,
       percent,
@@ -25,6 +26,8 @@ const CurrentGradeTooltip = ({ tooltipClassName }) => {
 
   const isLocaleRtl = isRtl(getLocale());
 
+  const hasHiddenGrades = assignmentTypeGradeSummary.some((assignmentType) => assignmentType.hasHiddenContribution !== 'none');
+
   if (isLocaleRtl) {
     currentGradeDirection = currentGrade < 50 ? '-' : '';
   }
@@ -56,6 +59,15 @@ const CurrentGradeTooltip = ({ 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>
     </>
   );
 };

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

@@ -10,14 +10,12 @@ const GradeSummary = () => {
   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/GradeSummaryTable.jsx

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 
 import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
 import { DataTable } from '@openedx/paragon';
+import { Lock } from '@openedx/paragon/icons';
 import { useContextId } from '../../../../data/hooks';
 import { useModel } from '../../../../generic/model-store';
 
@@ -16,9 +17,7 @@ const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
   const courseId = useContextId();
 
   const {
-    gradingPolicy: {
-      assignmentPolicies,
-    },
+    assignmentTypeGradeSummary,
     gradesFeatureIsFullyLocked,
     sectionScores,
   } = useModel('progress', courseId);
@@ -55,7 +54,7 @@ const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
     return false;
   };
 
-  const gradeSummaryData = assignmentPolicies.map((assignment) => {
+  const gradeSummaryData = assignmentTypeGradeSummary.map((assignment) => {
     const {
       averageGrade,
       numDroppable,
@@ -80,13 +79,24 @@ const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
     const locked = !gradesFeatureIsFullyLocked && hasNoAccessToAssignmentsOfType(assignmentType);
     const isLocaleRtl = isRtl(getLocale());
 
+    let weightedGradeDisplay = `${getGradePercent(weightedGrade)}${isLocaleRtl ? '\u200f' : ''}%`;
+    let gradeDisplay = `${getGradePercent(averageGrade)}${isLocaleRtl ? '\u200f' : ''}%`;
+
+    if (assignment.hasHiddenContribution === 'all') {
+      gradeDisplay = <Lock data-testid="lock-icon" />;
+      weightedGradeDisplay = <Lock data-testid="lock-icon" />;
+    } else if (assignment.hasHiddenContribution === 'some') {
+      gradeDisplay = `${getGradePercent(averageGrade)}${isLocaleRtl ? '\u200f' : ''}% + ${intl.formatMessage(messages.hiddenScoreLabel)}`;
+      weightedGradeDisplay = `${getGradePercent(weightedGrade)}${isLocaleRtl ? '\u200f' : ''}% + ${intl.formatMessage(messages.hiddenScoreLabel)}`;
+    }
+
     return {
       type: {
         footnoteId, footnoteMarker, type: assignmentType, locked,
       },
       weight: { weight: `${(weight * 100).toFixed(0)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
-      grade: { grade: `${getGradePercent(averageGrade)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
-      weightedGrade: { weightedGrade: `${getGradePercent(weightedGrade)}${isLocaleRtl ? '\u200f' : ''}%`, locked },
+      grade: { grade: gradeDisplay, locked },
+      weightedGrade: { weightedGrade: weightedGradeDisplay, locked },
     };
   });
   const getAssignmentTypeCell = (value) => (
@@ -102,6 +112,16 @@ const GradeSummaryTable = ({ setAllOfSomeAssignmentTypeIsLocked }) => {
 
   return (
     <>
+      <ul className="micro mb-3 pl-3 text-gray-700">
+        <li>
+          <b>{intl.formatMessage(messages.hiddenScoreLabel)}: </b>
+          {intl.formatMessage(messages.hiddenScoreInfoText)}
+        </li>
+        <li>
+          <b><Lock style={{ height: '15px' }} />: </b>
+          {` ${intl.formatMessage(messages.hiddenScoreLockInfoText)}`}
+        </li>
+      </ul>
       <DataTable
         data={gradeSummaryData}
         itemCount={gradeSummaryData.length}

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

@@ -1,9 +1,6 @@
-import { useContext } from 'react';
-
 import { getLocale, isRtl, useIntl } from '@edx/frontend-platform/i18n';
 import {
   DataTable,
-  DataTableContext,
   Icon,
   OverlayTrigger,
   Stack,
@@ -17,18 +14,6 @@ import messages from '../messages';
 
 const GradeSummaryTableFooter = () => {
   const intl = useIntl();
-
-  const { data } = useContext(DataTableContext);
-
-  const rawGrade = data.reduce(
-    (grade, currentValue) => {
-      const { weightedGrade } = currentValue.weightedGrade;
-      const percent = weightedGrade.replace(/%/g, '').trim();
-      return grade + parseFloat(percent);
-    },
-    0,
-  ).toFixed(2);
-
   const courseId = useContextId();
 
   const {
@@ -36,8 +21,16 @@ const GradeSummaryTableFooter = () => {
       isPassing,
       percent,
     },
+    finalGrades,
   } = useModel('progress', courseId);
 
+  const getGradePercent = (grade) => {
+    const percentage = grade * 100;
+    return Number.isInteger(percentage) ? percentage.toFixed(0) : percentage.toFixed(2);
+  };
+
+  const rawGrade = getGradePercent(finalGrades);
+
   const bgColor = isPassing ? 'bg-success-100' : 'bg-warning-100';
   const totalGrade = (percent * 100).toFixed(0);
 

src/course-home/progress-tab/grades/messages.ts

@@ -21,6 +21,11 @@ const messages = defineMessages({
     defaultMessage: 'Your current grade is {currentGrade}%. A weighted grade of {passingGrade}% is required to pass in this course.',
     description: 'Alt text for the grade chart bar',
   },
+  courseGradeFooterDueDateNotice: {
+    id: 'progress.courseGrade.footer.dueDateNotice',
+    defaultMessage: 'Some assignment scores are not yet included in your total grade. These grades will be released by {dueDate}.',
+    description: 'This is shown when there are pending assignments with a due date in the future',
+  },
   courseGradeFooterGenericPassing: {
     id: 'progress.courseGrade.footer.generic.passing',
     defaultMessage: 'You’re currently passing this course',
@@ -148,6 +153,21 @@ const messages = defineMessages({
       + "Your weighted grade is what's used to determine if you pass the course.",
     description: 'The content of (tip box) for the grade summary section',
   },
+  hiddenScoreLabel: {
+    id: 'progress.hiddenScoreLabel',
+    defaultMessage: 'Hidden Scores',
+    description: 'Text to indicate that some scores are hidden',
+  },
+  hiddenScoreInfoText: {
+    id: 'progress.hiddenScoreInfoText',
+    defaultMessage: 'Scores from assignments that count toward your final grade but some are not shown here.',
+    description: 'Information text about hidden score label',
+  },
+  hiddenScoreLockInfoText: {
+    id: 'progress.hiddenScoreLockInfoText',
+    defaultMessage: 'Scores for an assignment type are hidden but still counted toward the course grade.',
+    description: 'Information text about hidden score label when learners have limited access to grades feature',
+  },
   noAccessToAssignmentType: {
     id: 'progress.noAcessToAssignmentType',
     defaultMessage: 'You do not have access to assignments of type {assignmentType}',

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

@@ -0,0 +1,12 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+
+import { fetchExamAttemptsData } from '../data/thunks';
+
+export function useGetExamsData(courseId, sequenceIds) {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(fetchExamAttemptsData(courseId, sequenceIds));
+  }, [dispatch, courseId, sequenceIds]);
+}

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

@@ -0,0 +1,168 @@
+import { renderHook } from '@testing-library/react';
+import { useDispatch } from 'react-redux';
+import { useGetExamsData } from './hooks';
+import { fetchExamAttemptsData } from '../data/thunks';
+
+// Mock the dependencies
+jest.mock('react-redux', () => ({
+  useDispatch: jest.fn(),
+}));
+
+jest.mock('../data/thunks', () => ({
+  fetchExamAttemptsData: jest.fn(),
+}));
+
+describe('useGetExamsData hook', () => {
+  const mockDispatch = jest.fn();
+  const mockFetchExamAttemptsData = jest.fn();
+
+  beforeEach(() => {
+    useDispatch.mockReturnValue(mockDispatch);
+    fetchExamAttemptsData.mockReturnValue(mockFetchExamAttemptsData);
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should dispatch fetchExamAttemptsData on mount', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const sequenceIds = [
+      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@67890',
+    ];
+
+    renderHook(() => useGetExamsData(courseId, sequenceIds));
+
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(courseId, sequenceIds);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+  });
+
+  it('should re-dispatch when courseId changes', () => {
+    const initialCourseId = 'course-v1:edX+DemoX+Demo_Course';
+    const newCourseId = 'course-v1:edX+NewCourse+Demo';
+    const sequenceIds = ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345'];
+
+    const { rerender } = renderHook(
+      ({ courseId: cId, sequenceIds: sIds }) => useGetExamsData(cId, sIds),
+      {
+        initialProps: { courseId: initialCourseId, sequenceIds },
+      },
+    );
+
+    // Verify initial call
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(initialCourseId, sequenceIds);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+
+    // Clear mocks to isolate the re-render call
+    jest.clearAllMocks();
+
+    // Re-render with new courseId
+    rerender({ courseId: newCourseId, sequenceIds });
+
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(newCourseId, sequenceIds);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+  });
+
+  it('should re-dispatch when sequenceIds changes', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const initialSequenceIds = ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345'];
+    const newSequenceIds = [
+      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345',
+      'block-v1:edX+DemoX+Demo_Course+type@sequential+block@67890',
+    ];
+
+    const { rerender } = renderHook(
+      ({ courseId: cId, sequenceIds: sIds }) => useGetExamsData(cId, sIds),
+      {
+        initialProps: { courseId, sequenceIds: initialSequenceIds },
+      },
+    );
+
+    // Verify initial call
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(courseId, initialSequenceIds);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+
+    // Clear mocks to isolate the re-render call
+    jest.clearAllMocks();
+
+    // Re-render with new sequenceIds
+    rerender({ courseId, sequenceIds: newSequenceIds });
+
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(courseId, newSequenceIds);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+  });
+
+  it('should not re-dispatch when neither courseId nor sequenceIds changes', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const sequenceIds = ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345'];
+
+    const { rerender } = renderHook(
+      ({ courseId: cId, sequenceIds: sIds }) => useGetExamsData(cId, sIds),
+      {
+        initialProps: { courseId, sequenceIds },
+      },
+    );
+
+    // Verify initial call
+    expect(fetchExamAttemptsData).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+
+    // Clear mocks to isolate the re-render call
+    jest.clearAllMocks();
+
+    // Re-render with same props
+    rerender({ courseId, sequenceIds });
+
+    // Should not dispatch again
+    expect(fetchExamAttemptsData).not.toHaveBeenCalled();
+    expect(mockDispatch).not.toHaveBeenCalled();
+  });
+
+  it('should handle empty sequenceIds array', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const sequenceIds = [];
+
+    renderHook(() => useGetExamsData(courseId, sequenceIds));
+
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(courseId, []);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+  });
+
+  it('should handle null/undefined courseId', () => {
+    const sequenceIds = ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345'];
+
+    renderHook(() => useGetExamsData(null, sequenceIds));
+
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(null, sequenceIds);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+  });
+
+  it('should handle sequenceIds reference change but same content', () => {
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const sequenceIds1 = ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345'];
+    const sequenceIds2 = ['block-v1:edX+DemoX+Demo_Course+type@sequential+block@12345']; // Same content, different reference
+
+    const { rerender } = renderHook(
+      ({ courseId: cId, sequenceIds: sIds }) => useGetExamsData(cId, sIds),
+      {
+        initialProps: { courseId, sequenceIds: sequenceIds1 },
+      },
+    );
+
+    // Verify initial call
+    expect(fetchExamAttemptsData).toHaveBeenCalledTimes(1);
+    expect(mockDispatch).toHaveBeenCalledTimes(1);
+
+    // Clear mocks to isolate the re-render call
+    jest.clearAllMocks();
+
+    // Re-render with different reference but same content
+    rerender({ courseId, sequenceIds: sequenceIds2 });
+
+    // Should dispatch again because the reference changed (useEffect dependency)
+    expect(fetchExamAttemptsData).toHaveBeenCalledWith(courseId, sequenceIds2);
+    expect(mockDispatch).toHaveBeenCalledWith(mockFetchExamAttemptsData);
+  });
+});

src/course-home/progress-tab/utils.ts

@@ -5,3 +5,15 @@ export const showUngradedAssignments = () => (
   getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === 'true'
   || getConfig().SHOW_UNGRADED_ASSIGNMENT_PROGRESS === true
 );
+
+export const getLatestDueDateInFuture = (assignmentTypeGradeSummary) => {
+  let latest = null;
+  assignmentTypeGradeSummary.forEach((assignment) => {
+    const assignmentLastGradePublishDate = assignment.lastGradePublishDate;
+    if (assignmentLastGradePublishDate && (!latest || new Date(assignmentLastGradePublishDate) > new Date(latest))
+       && new Date(assignmentLastGradePublishDate) > new Date()) {
+      latest = assignmentLastGradePublishDate;
+    }
+  });
+  return latest;
+};

src/course-home/suggested-schedule-messaging/UpgradeToCompleteAlert.jsx

@@ -34,7 +34,7 @@ const UpgradeToCompleteAlert = ({ logUpgradeLinkClick }) => {
   }
 
   return (
-    <Alert className="bg-light-200">
+    <Alert id="upgrade-complete-alert" className="bg-light-200">
       <Row className="w-100 m-0">
         <Col xs={12} md={9} className="small p-0 pr-md-2">
           <Alert.Heading>{intl.formatMessage(messages.upgradeToCompleteHeader)}</Alert.Heading>

src/course-home/suggested-schedule-messaging/UpgradeToShiftDatesAlert.jsx

@@ -36,7 +36,7 @@ const UpgradeToShiftDatesAlert = ({ logUpgradeLinkClick, model }) => {
   }
 
   return (
-    <Alert className="bg-light-200">
+    <Alert id="upgrade-shift-dates-alert" className="bg-light-200">
       <Row className="w-100 m-0">
         <Col xs={12} md={9} className="small p-0 pr-md-2">
           <strong>{intl.formatMessage(messages.missedDeadlines)}</strong>

src/courseware/RedirectPage.test.jsx

@@ -16,6 +16,7 @@ jest.mock('react-router-dom', () => ({
   useLocation: () => ({
     search: '?consentPath=/some-path',
   }),
+  useSearchParams: () => [new URLSearchParams('?consentPath=/some-path'), () => {}],
 }));
 
 describe('RedirectPage component', () => {

src/courseware/RedirectPage.tsx

@@ -1,18 +1,20 @@
-import PropTypes from 'prop-types';
 import {
-  generatePath, useParams, useLocation,
+  generatePath, useParams, useLocation, useSearchParams,
 } from 'react-router-dom';
 import { getConfig } from '@edx/frontend-platform';
 
-import queryString from 'query-string';
 import { REDIRECT_MODES } from '../constants';
 
-const RedirectPage = ({
-  pattern, mode,
-}) => {
+interface Props {
+  pattern: string;
+  mode: string;
+}
+
+const RedirectPage = ({ pattern = '', mode }: Props) => {
   const { courseId } = useParams();
   const location = useLocation();
-  const { consentPath } = queryString.parse(location?.search);
+  const [searchParams] = useSearchParams();
+  const consentPath = searchParams.get('consentPath') ?? '';
 
   const {
     LMS_BASE_URL,
@@ -39,13 +41,4 @@ const RedirectPage = ({
   return null;
 };
 
-RedirectPage.propTypes = {
-  pattern: PropTypes.string,
-  mode: PropTypes.string.isRequired,
-};
-
-RedirectPage.defaultProps = {
-  pattern: null,
-};
-
 export default RedirectPage;

src/courseware/course/Course.jsx

@@ -9,7 +9,7 @@ import { breakpoints, useWindowSize } from '@openedx/paragon';
 import { AlertList } from '@src/generic/user-messages';
 import { useModel } from '@src/generic/model-store';
 import { getCoursewareOutlineSidebarSettings } from '../data/selectors';
-import Chat from './chat/Chat';
+import { LearnerToolsSlot } from '../../plugin-slots/LearnerToolsSlot';
 import SidebarProvider from './sidebar/SidebarContextProvider';
 import NewSidebarProvider from './new-sidebar/SidebarContextProvider';
 import { NotificationsDiscussionsSidebarTriggerSlot } from '../../plugin-slots/NotificationsDiscussionsSidebarTriggerSlot';
@@ -62,7 +62,7 @@ const Course = ({
   const [weeklyGoalCelebrationOpen, setWeeklyGoalCelebrationOpen] = useState(
     celebrations && !celebrations.streakLengthToCelebrate && celebrations.weeklyGoal,
   );
-  const shouldDisplayChat = windowWidth >= breakpoints.medium.minWidth;
+  const shouldDisplayLearnerTools = windowWidth >= breakpoints.medium.minWidth;
   const daysPerWeek = course?.courseGoals?.selectedGoal?.daysPerWeek;
 
   useEffect(() => {
@@ -95,17 +95,13 @@ const Course = ({
           />
         </>
         )}
-        {shouldDisplayChat && (
-          <>
-            <Chat
-              enabled={course.learningAssistantEnabled}
-              enrollmentMode={course.enrollmentMode}
-              isStaff={isStaff}
-              courseId={courseId}
-              contentToolsEnabled={course.showCalculator || course.notes.enabled}
-              unitId={unitId}
-            />
-          </>
+        {shouldDisplayLearnerTools && (
+          <LearnerToolsSlot
+            enrollmentMode={course.enrollmentMode}
+            isStaff={isStaff}
+            courseId={courseId}
+            unitId={unitId}
+          />
         )}
         <div className="w-100 d-flex align-items-center">
           <CourseOutlineMobileSidebarTriggerSlot />

src/courseware/course/Course.test.jsx

@@ -13,17 +13,25 @@ import Course from './Course';
 import setupDiscussionSidebar from './test-utils';
 
 jest.mock('@edx/frontend-platform/analytics');
-jest.mock('@edx/frontend-lib-special-exams/dist/data/thunks.js', () => ({
-  ...jest.requireActual('@edx/frontend-lib-special-exams/dist/data/thunks.js'),
-  checkExamEntry: () => jest.fn(),
-}));
-const mockChatTestId = 'fake-chat';
+jest.mock('@edx/frontend-lib-special-exams', () => {
+  const actual = jest.requireActual('@edx/frontend-lib-special-exams');
+  return {
+    ...actual,
+    __esModule: true,
+    // Mock the default export (SequenceExamWrapper) to just render children
+    // eslint-disable-next-line react/prop-types
+    default: ({ children }) => <div data-testid="sequence-exam-wrapper">{children}</div>,
+  };
+});
+const mockLearnerToolsTestId = 'fake-learner-tools';
 jest.mock(
-  './chat/Chat',
-  // eslint-disable-next-line react/prop-types
-  () => function ({ courseId }) {
-    return <div className="fake-chat" data-testid={mockChatTestId}>Chat contents {courseId} </div>;
-  },
+  '../../plugin-slots/LearnerToolsSlot',
+  () => ({
+    // eslint-disable-next-line react/prop-types
+    LearnerToolsSlot({ courseId }) {
+      return <div className="fake-learner-tools" data-testid={mockLearnerToolsTestId}>LearnerTools contents {courseId} </div>;
+    },
+  }),
 );
 
 const recordFirstSectionCelebration = jest.fn();
@@ -360,28 +368,27 @@ describe('Course', () => {
     });
   });
 
-  it('displays chat when screen is wide enough (browser)', async () => {
+  it('displays learner tools when screen is wide enough (browser)', async () => {
     const courseMetadata = Factory.build('courseMetadata', {
-      learning_assistant_enabled: true,
       enrollment: { mode: 'verified' },
     });
     const testStore = await initializeTestStore({ courseMetadata }, false);
-    const { courseware } = testStore.getState();
+    const { courseware, models } = testStore.getState();
     const { courseId, sequenceId } = courseware;
     const testData = {
       ...mockData,
       courseId,
       sequenceId,
+      unitId: Object.values(models.units)[0].id,
     };
     render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
-    const chat = screen.queryByTestId(mockChatTestId);
-    waitFor(() => expect(chat).toBeInTheDocument());
+    const learnerTools = screen.queryByTestId(mockLearnerToolsTestId);
+    await waitFor(() => expect(learnerTools).toBeInTheDocument());
   });
 
-  it('does not display chat when screen is too narrow (mobile)', async () => {
+  it('does not display learner tools when screen is too narrow (mobile)', async () => {
     global.innerWidth = breakpoints.extraSmall.minWidth;
     const courseMetadata = Factory.build('courseMetadata', {
-      learning_assistant_enabled: true,
       enrollment: { mode: 'verified' },
     });
     const testStore = await initializeTestStore({ courseMetadata }, false);
@@ -393,7 +400,7 @@ describe('Course', () => {
       sequenceId,
     };
     render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
-    const chat = screen.queryByTestId(mockChatTestId);
-    await expect(chat).not.toBeInTheDocument();
+    const learnerTools = screen.queryByTestId(mockLearnerToolsTestId);
+    await expect(learnerTools).not.toBeInTheDocument();
   });
 });

src/courseware/course/chat/Chat.jsx

@@ -1,82 +0,0 @@
-import { createPortal } from 'react-dom';
-import { useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
-
-import { Xpert } from '@edx/frontend-lib-learning-assistant';
-import { getConfig } from '@edx/frontend-platform';
-
-import { ALLOW_UPSELL_MODES, VERIFIED_MODES } from '@src/constants';
-import { useModel } from '../../../generic/model-store';
-
-const Chat = ({
-  enabled,
-  enrollmentMode,
-  isStaff,
-  courseId,
-  contentToolsEnabled,
-  unitId,
-}) => {
-  const {
-    activeAttempt, exam,
-  } = useSelector(state => state.specialExams);
-  const course = useModel('coursewareMeta', courseId);
-
-  // If is disabled or taking an exam, we don't show the chat.
-  if (!enabled || activeAttempt?.attempt_id || exam?.id) { return null; }
-
-  // If is not staff and doesn't have an enrollment, we don't show the chat.
-  if (!isStaff && !enrollmentMode) { return null; }
-
-  const verifiedMode = VERIFIED_MODES.includes(enrollmentMode); // Enrollment verified
-  const auditMode = (
-    !isStaff
-    && !verifiedMode
-    && ALLOW_UPSELL_MODES.includes(enrollmentMode) // Can upgrade course
-    && getConfig().ENABLE_XPERT_AUDIT
-  );
-  // If user has no access, we don't show the chat.
-  if (!isStaff && !(verifiedMode || auditMode)) { return null; }
-
-  // Date validation
-  const {
-    accessExpiration,
-    start,
-    end,
-  } = course;
-
-  const utcDate = (new Date()).toISOString();
-  const expiration = accessExpiration?.expirationDate || utcDate;
-  const validDate = (
-    (start ? start <= utcDate : true)
-    && (end ? end >= utcDate : true)
-    && (auditMode ? expiration >= utcDate : true)
-  );
-  // If date is invalid, we don't show the chat.
-  if (!validDate) { return null; }
-
-  // Use a portal to ensure that component overlay does not compete with learning MFE styles.
-  return createPortal(
-    <Xpert
-      courseId={courseId}
-      contentToolsEnabled={contentToolsEnabled}
-      unitId={unitId}
-      isUpgradeEligible={auditMode}
-    />,
-    document.body,
-  );
-};
-
-Chat.propTypes = {
-  isStaff: PropTypes.bool.isRequired,
-  enabled: PropTypes.bool.isRequired,
-  enrollmentMode: PropTypes.string,
-  courseId: PropTypes.string.isRequired,
-  contentToolsEnabled: PropTypes.bool.isRequired,
-  unitId: PropTypes.string.isRequired,
-};
-
-Chat.defaultProps = {
-  enrollmentMode: null,
-};
-
-export default Chat;

src/courseware/course/chat/Chat.test.jsx

@@ -1,286 +0,0 @@
-import { BrowserRouter } from 'react-router-dom';
-import React from 'react';
-import { Factory } from 'rosie';
-
-import { getConfig } from '@edx/frontend-platform';
-
-import {
-  initializeMockApp,
-  initializeTestStore,
-  render,
-  screen,
-} from '../../../setupTest';
-
-import Chat from './Chat';
-
-// We do a partial mock to avoid mocking out other exported values (e.g. the reducer).
-// We mock out the Xpert component, because the Xpert component has its own rules for whether it renders
-// or not, and this includes the results of API calls it makes. We don't want to test those rules here, just
-// whether the Xpert is rendered by the Chat component in certain conditions. Instead of actually rendering
-// Xpert, we render and assert on a mocked component.
-const mockXpertTestId = 'xpert';
-
-jest.mock('@edx/frontend-lib-learning-assistant', () => {
-  const originalModule = jest.requireActual('@edx/frontend-lib-learning-assistant');
-
-  return {
-    __esModule: true,
-    ...originalModule,
-    Xpert: () => (<div data-testid={mockXpertTestId}>mocked Xpert</div>),
-  };
-});
-
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn().mockReturnValue({ ENABLE_XPERT_AUDIT: false }),
-}));
-
-initializeMockApp();
-
-const courseId = 'course-v1:edX+DemoX+Demo_Course';
-let testCases = [];
-let enabledTestCases = [];
-let disabledTestCases = [];
-const enabledModes = [
-  'professional', 'verified', 'no-id-professional', 'credit', 'masters', 'executive-education',
-  'paid-executive-education', 'paid-bootcamp',
-];
-const disabledModes = [null, undefined, 'xyz', 'audit', 'honor', 'unpaid-executive-education', 'unpaid-bootcamp'];
-
-describe('Chat', () => {
-  let store;
-
-  beforeAll(async () => {
-    store = await initializeTestStore({
-      specialExams: {
-        activeAttempt: {
-          attempt_id: null,
-        },
-        exam: {
-          id: null,
-        },
-      },
-    });
-  });
-
-  // Generate test cases.
-  enabledTestCases = enabledModes.map((mode) => ({ enrollmentMode: mode, isVisible: true }));
-  disabledTestCases = disabledModes.map((mode) => ({ enrollmentMode: mode, isVisible: false }));
-  testCases = enabledTestCases.concat(disabledTestCases);
-
-  testCases.forEach(test => {
-    it(
-      `visibility determined by ${test.enrollmentMode} enrollment mode when enabled and not isStaff`,
-      async () => {
-        render(
-          <BrowserRouter>
-            <Chat
-              enrollmentMode={test.enrollmentMode}
-              isStaff={false}
-              enabled
-              courseId={courseId}
-              contentToolsEnabled={false}
-            />
-          </BrowserRouter>,
-          { store },
-        );
-
-        const chat = screen.queryByTestId(mockXpertTestId);
-        if (test.isVisible) {
-          expect(chat).toBeInTheDocument();
-        } else {
-          expect(chat).not.toBeInTheDocument();
-        }
-      },
-    );
-  });
-
-  // Generate test cases.
-  testCases = enabledModes.concat(disabledModes).map((mode) => ({ enrollmentMode: mode, isVisible: true }));
-  testCases.forEach(test => {
-    it('visibility determined by isStaff when enabled and any enrollment mode', async () => {
-      render(
-        <BrowserRouter>
-          <Chat
-            enrollmentMode={test.enrollmentMode}
-            isStaff
-            enabled
-            courseId={courseId}
-            contentToolsEnabled={false}
-          />
-        </BrowserRouter>,
-        { store },
-      );
-
-      const chat = screen.queryByTestId(mockXpertTestId);
-      if (test.isVisible) {
-        expect(chat).toBeInTheDocument();
-      } else {
-        expect(chat).not.toBeInTheDocument();
-      }
-    });
-  });
-
-  // Generate the map function used for generating test cases by currying the map function.
-  // In this test suite, visibility depends on whether the enrollment mode is a valid or invalid
-  // enrollment mode for enabling the Chat when the user is not a staff member and the Chat is enabled. Instead of
-  // defining two separate map functions that differ in only one case, curry the function.
-  const generateMapFunction = (areEnabledModes) => (
-    (mode) => (
-      [
-        {
-          enrollmentMode: mode, isStaff: true, enabled: true, isVisible: true,
-        },
-        {
-          enrollmentMode: mode, isStaff: true, enabled: false, isVisible: false,
-        },
-        {
-          enrollmentMode: mode, isStaff: false, enabled: true, isVisible: areEnabledModes,
-        },
-        {
-          enrollmentMode: mode, isStaff: false, enabled: false, isVisible: false,
-        },
-      ]
-    )
-  );
-
-  // Generate test cases.
-  enabledTestCases = enabledModes.map(generateMapFunction(true));
-  disabledTestCases = disabledModes.map(generateMapFunction(false));
-  testCases = enabledTestCases.concat(disabledTestCases);
-  testCases = testCases.flat();
-  testCases.forEach(test => {
-    it(
-      `visibility determined by ${test.enabled} enabled when ${test.isStaff} isStaff
-      and ${test.enrollmentMode} enrollment mode`,
-      async () => {
-        render(
-          <BrowserRouter>
-            <Chat
-              enrollmentMode={test.enrollmentMode}
-              isStaff={test.isStaff}
-              enabled={test.enabled}
-              courseId={courseId}
-              contentToolsEnabled={false}
-            />
-          </BrowserRouter>,
-          { store },
-        );
-
-        const chat = screen.queryByTestId(mockXpertTestId);
-        if (test.isVisible) {
-          expect(chat).toBeInTheDocument();
-        } else {
-          expect(chat).not.toBeInTheDocument();
-        }
-      },
-    );
-  });
-
-  it('if course end date has passed, component should not be visible', async () => {
-    store = await initializeTestStore({
-      specialExams: {
-        activeAttempt: {
-          attempt_id: 1,
-        },
-      },
-      courseMetadata: Factory.build('courseMetadata', {
-        start: '2014-02-03T05:00:00Z',
-        end: '2014-02-05T05:00:00Z',
-      }),
-    });
-
-    render(
-      <BrowserRouter>
-        <Chat
-          enrollmentMode="verified"
-          isStaff
-          enabled
-          courseId={courseId}
-          contentToolsEnabled={false}
-        />
-      </BrowserRouter>,
-      { store },
-    );
-
-    const chat = screen.queryByTestId(mockXpertTestId);
-    expect(chat).not.toBeInTheDocument();
-  });
-
-  it('if learner has active exam attempt, component should not be visible', async () => {
-    store = await initializeTestStore({
-      specialExams: {
-        activeAttempt: {
-          attempt_id: 1,
-        },
-      },
-    });
-
-    render(
-      <BrowserRouter>
-        <Chat
-          enrollmentMode="verified"
-          isStaff
-          enabled
-          courseId={courseId}
-          contentToolsEnabled={false}
-        />
-      </BrowserRouter>,
-      { store },
-    );
-
-    const chat = screen.queryByTestId(mockXpertTestId);
-    expect(chat).toBeInTheDocument();
-  });
-
-  it('displays component for audit learner if explicitly enabled', async () => {
-    getConfig.mockImplementation(() => ({ ENABLE_XPERT_AUDIT: true }));
-
-    store = await initializeTestStore({
-      courseMetadata: Factory.build('courseMetadata', {
-        access_expiration: { expiration_date: '' },
-      }),
-    });
-
-    render(
-      <BrowserRouter>
-        <Chat
-          enrollmentMode="audit"
-          isStaff={false}
-          enabled
-          courseId={courseId}
-          contentToolsEnabled={false}
-        />
-      </BrowserRouter>,
-      { store },
-    );
-
-    const chat = screen.queryByTestId(mockXpertTestId);
-    expect(chat).toBeInTheDocument();
-  });
-
-  it('does not display component for audit learner if access deadline has passed', async () => {
-    getConfig.mockImplementation(() => ({ ENABLE_XPERT_AUDIT: true }));
-
-    store = await initializeTestStore({
-      courseMetadata: Factory.build('courseMetadata', {
-        access_expiration: { expiration_date: '2014-02-03T05:00:00Z' },
-      }),
-    });
-
-    render(
-      <BrowserRouter>
-        <Chat
-          enrollmentMode="audit"
-          isStaff={false}
-          enabled
-          courseId={courseId}
-          contentToolsEnabled={false}
-        />
-      </BrowserRouter>,
-      { store },
-    );
-
-    const chat = screen.queryByTestId(mockXpertTestId);
-    expect(chat).not.toBeInTheDocument();
-  });
-});

src/courseware/course/chat/index.js

@@ -1 +0,0 @@
-export { default } from './Chat';

src/courseware/course/course-exit/CourseCelebration.jsx

@@ -18,19 +18,19 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import CelebrationMobile from './assets/celebration_456x328.gif';
 import CelebrationDesktop from './assets/celebration_750x540.gif';
-import certificate from '../../../generic/assets/openedx_certificate.png';
-import certificateLocked from '../../../generic/assets/openedx_locked_certificate.png';
+import certificate from '../../../generic/assets/edX_certificate.png';
+import certificateLocked from '../../../generic/assets/edX_locked_certificate.png';
 import { FormattedPricing } from '../../../generic/upgrade-button';
 import messages from './messages';
 import { useModel } from '../../../generic/model-store';
 import { requestCert } from '../../../course-home/data/thunks';
 import ProgramCompletion from './ProgramCompletion';
-import DashboardFootnote from './DashboardFootnote';
 import UpgradeFootnote from './UpgradeFootnote';
 import SocialIcons from '../../social-share/SocialIcons';
 import { logClick, logVisit } from './utils';
 import { DashboardLink, IdVerificationSupportLink, ProfileLink } from '../../../shared/links';
-import CourseRecommendationsSlot from '../../../plugin-slots/CourseRecommendationsSlot';
+import DashboardFootnote from './DashboardFootnote';
+import { CourseRecommendationsSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 
 const LINKEDIN_BLUE = '#2867B2';
 

src/courseware/course/course-exit/CourseExit.jsx

@@ -1,8 +1,5 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button } from '@openedx/paragon';
 import { useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
 
@@ -10,13 +7,12 @@ import CourseCelebration from './CourseCelebration';
 import CourseInProgress from './CourseInProgress';
 import CourseNonPassing from './CourseNonPassing';
 import { COURSE_EXIT_MODES, getCourseExitMode } from './utils';
-import messages from './messages';
 import { unsubscribeFromGoalReminders } from './data/thunks';
+import { CourseExitViewCoursesPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 
 import { useModel } from '../../../generic/model-store';
 
 const CourseExit = () => {
-  const intl = useIntl();
   const { courseId } = useSelector(state => state.courseware);
   const {
     certificateData,
@@ -64,14 +60,7 @@ const CourseExit = () => {
 
   return (
     <>
-      <div className="row w-100 mt-2 mb-4 justify-content-end">
-        <Button
-          variant="outline-primary"
-          href={`${getConfig().LMS_BASE_URL}/dashboard`}
-        >
-          {intl.formatMessage(messages.viewCoursesButton)}
-        </Button>
-      </div>
+      <CourseExitViewCoursesPluginSlot />
       {body}
     </>
   );

src/courseware/course/course-exit/DashboardFootnote.jsx

@@ -1,47 +1,19 @@
-import React from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-
-import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
-import { Hyperlink } from '@openedx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { faCalendarAlt } from '@fortawesome/free-regular-svg-icons';
-import { getConfig } from '@edx/frontend-platform';
-
-import { useModel } from '../../../generic/model-store';
 
+import { DashboardFootnoteLinkPluginSlot } from '../../../plugin-slots/CourseExitPluginSlots';
 import Footnote from './Footnote';
 import messages from './messages';
-import { logClick } from './utils';
 
 const DashboardFootnote = ({ variant }) => {
   const intl = useIntl();
-  const { courseId } = useSelector(state => state.courseware);
-  const { org } = useModel('courseHomeMeta', courseId);
-  const { administrator } = getAuthenticatedUser();
-
-  const dashboardLink = (
-    <Hyperlink
-      style={{ textDecoration: 'underline' }}
-      destination={`${getConfig().LMS_BASE_URL}/dashboard`}
-      className="text-reset"
-      onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
-    >
-      {intl.formatMessage(messages.dashboardLink)}
-    </Hyperlink>
-  );
+  const dashboardLink = (<DashboardFootnoteLinkPluginSlot variant={variant} />);
 
   return (
     <Footnote
       icon={faCalendarAlt}
-      text={(
-        <FormattedMessage
-          id="courseCelebration.dashboardInfo" // for historical reasons
-          defaultMessage="You can access this course and its materials on your {dashboardLink}."
-          description="Text that precedes link to learner's dashboard"
-          values={{ dashboardLink }}
-        />
-      )}
+      text={intl.formatMessage(messages.dashboardInfo, { dashboardLink })}
     />
   );
 };

src/courseware/course/course-exit/Footnote.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 const Footnote = ({ icon, text }) => (
-  <div className="row w-100 mx-0 my-4 justify-content-center">
+  <div id="celebration-footnote-wrapper" className="row w-100 mx-0 my-4 justify-content-center">
     <p className="text-gray-700">
       <FontAwesomeIcon icon={icon} style={{ width: '20px' }} />&nbsp;
       {text}

src/courseware/course/course-exit/ProgramCompletion.jsx

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { FormattedMessage, useIntl } from '@edx/frontend-platform/i18n';
 import { Alert, Button, Hyperlink } from '@openedx/paragon';
-import certImage from '../../../generic/assets/openedx_certificate.png';
+import certImage from '../../../generic/assets/edX_certificate.png';
 import messages from './messages';
 
 /**

src/courseware/course/course-exit/UpgradeFootnote.jsx

@@ -20,6 +20,7 @@ const UpgradeFootnote = ({ deadline, href }) => {
 
   const upgradeLink = (
     <Hyperlink
+      id="upgrade-link"
       style={{ textDecoration: 'underline' }}
       destination={href}
       className="text-reset"

src/courseware/course/course-exit/messages.ts

@@ -76,6 +76,11 @@ const messages = defineMessages({
     defaultMessage: 'Dashboard',
     description: 'Link to user’s dashboard',
   },
+  dashboardInfo: {
+    id: 'courseCelebration.dashboardInfo', // for historical reasons
+    defaultMessage: 'You can access this course and its materials on your {dashboardLink}.',
+    description: "Text that precedes link to learner's dashboard",
+  },
   endOfCourseDescription: {
     id: 'courseExit.endOfCourseDescription',
     defaultMessage: 'Unfortunately, you are not currently eligible for a certificate. You need to receive a passing grade to be eligible for a certificate.',

src/courseware/course/new-sidebar/SidebarContextProvider.tsx

@@ -54,6 +54,8 @@ const SidebarProvider: React.FC<Props> = ({
   }, [courseId]);
 
   useEffect(() => {
+    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
+    window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'open');
     setHideDiscussionbar(!isDiscussionbarAvailable);
     setHideNotificationbar(!isNotificationbarAvailable);
     if (initialSidebar && currentSidebar !== initialSidebar) {

src/courseware/course/new-sidebar/sidebars/discussions-notifications/discussions/DiscussionsWidget.test.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
+import { fireEvent } from '@testing-library/react';
 import MockAdapter from 'axios-mock-adapter';
 
 import { getConfig } from '@edx/frontend-platform';
-import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 
+import { getSessionStorage, setSessionStorage } from '../../../../../../data/sessionStorage';
 import {
   initializeMockApp, initializeTestStore, render, screen,
 } from '../../../../../../setupTest';
@@ -14,11 +16,19 @@ import { buildTopicsFromUnits } from '../../../../../data/__factories__/discussi
 import { getCourseDiscussionTopics } from '../../../../../data/thunks';
 import SidebarContext from '../../../SidebarContext';
 import DiscussionsNotificationsSidebar from '../DiscussionsNotificationsSidebar';
+import DiscussionsNotificationsTrigger from '../DiscussionsNotificationsTrigger';
 import DiscussionsWidget from './DiscussionsWidget';
 
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
 
+jest.mock('../../../../../../data/sessionStorage', () => ({
+  getSessionStorage: jest.fn(),
+  setSessionStorage: jest.fn(),
+}));
+
+const onClickMock = jest.fn();
+
 describe('DiscussionsWidget', () => {
   let axiosMock;
   let mockData;
@@ -81,4 +91,34 @@ describe('DiscussionsWidget', () => {
     expect(screen.queryByText('Back to course')).toBeInTheDocument();
     expect(sendTrackEvent).toHaveBeenCalledTimes(1);
   });
+
+  it('should open notification tray if closed', () => {
+    (getSessionStorage as jest.Mock).mockReturnValue('closed');
+
+    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(setSessionStorage).toHaveBeenCalledWith(
+      `notificationTrayStatus.${courseId}`,
+      'open',
+    );
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it('should close notification tray if open', () => {
+    (getSessionStorage as jest.Mock).mockReturnValue('open');
+
+    renderWithProvider(() => <DiscussionsNotificationsTrigger onClick={onClickMock} />);
+
+    const button = screen.getByRole('button');
+    fireEvent.click(button);
+
+    expect(setSessionStorage).toHaveBeenCalledWith(
+      `notificationTrayStatus.${courseId}`,
+      'open',
+    );
+    expect(onClickMock).toHaveBeenCalled();
+  });
 });

src/courseware/course/sequence/Sequence.jsx

@@ -13,17 +13,18 @@ import SequenceExamWrapper from '@edx/frontend-lib-special-exams';
 import PageLoading from '@src/generic/PageLoading';
 import { useModel } from '@src/generic/model-store';
 import { useSequenceBannerTextAlert, useSequenceEntranceExamAlert } from '@src/alerts/sequence-alerts/hooks';
-import SequenceContainerSlot from '../../../plugin-slots/SequenceContainerSlot';
+import SequenceContainerSlot from '@src/plugin-slots/SequenceContainerSlot';
+import { CourseOutlineSidebarSlot } from '@src/plugin-slots/CourseOutlineSidebarSlot';
+import { CourseOutlineSidebarTriggerSlot } from '@src/plugin-slots/CourseOutlineSidebarTriggerSlot';
+import { NotificationsDiscussionsSidebarSlot } from '@src/plugin-slots/NotificationsDiscussionsSidebarSlot';
+import SequenceNavigationSlot from '@src/plugin-slots/SequenceNavigationSlot';
 
 import { getCoursewareOutlineSidebarSettings } from '../../data/selectors';
 import CourseLicense from '../course-license';
-import { NotificationsDiscussionsSidebarSlot } from '../../../plugin-slots/NotificationsDiscussionsSidebarSlot';
 import messages from './messages';
 import HiddenAfterDue from './hidden-after-due';
-import { SequenceNavigation, UnitNavigation } from './sequence-navigation';
+import { UnitNavigation } from './sequence-navigation';
 import SequenceContent from './SequenceContent';
-import { CourseOutlineSidebarSlot } from '../../../plugin-slots/CourseOutlineSidebarSlot';
-import { CourseOutlineSidebarTriggerSlot } from '../../../plugin-slots/CourseOutlineSidebarTriggerSlot';
 
 const Sequence = ({
   unitId,
@@ -172,7 +173,7 @@ const Sequence = ({
         <div className="sequence w-100">
           {!isEnabledOutlineSidebar && (
             <div className="sequence-navigation-container">
-              <SequenceNavigation
+              <SequenceNavigationSlot
                 sequenceId={sequenceId}
                 unitId={unitId}
                 nextHandler={() => {
@@ -217,18 +218,20 @@ const Sequence = ({
 
   if (sequenceStatus === 'loaded') {
     return (
-      <div>
-        <SequenceExamWrapper
-          sequence={sequence}
-          courseId={courseId}
-          isStaff={isStaff}
-          originalUserIsStaff={originalUserIsStaff}
-          canAccessProctoredExams={canAccessProctoredExams}
-        >
-          {defaultContent}
-        </SequenceExamWrapper>
+      <>
+        <div className="d-flex flex-column flex-grow-1 justify-content-center">
+          <SequenceExamWrapper
+            sequence={sequence}
+            courseId={courseId}
+            isStaff={isStaff}
+            originalUserIsStaff={originalUserIsStaff}
+            canAccessProctoredExams={canAccessProctoredExams}
+          >
+            {defaultContent}
+          </SequenceExamWrapper>
+        </div>
         <CourseLicense license={license || undefined} />
-      </div>
+      </>
     );
   }
 

src/courseware/course/sequence/Unit/ContentIFrame.jsx

@@ -1,10 +1,8 @@
 import PropTypes from 'prop-types';
-import React from 'react';
 
-import { ErrorPage } from '@edx/frontend-platform/react';
-import { StrictDict } from '@edx/react-unit-test-utils';
 import { ModalDialog } from '@openedx/paragon';
 import { ContentIFrameLoaderSlot } from '../../../../plugin-slots/ContentIFrameLoaderSlot';
+import { ContentIFrameErrorSlot } from '../../../../plugin-slots/ContentIFrameErrorSlot';
 
 import * as hooks from './hooks';
 
@@ -22,10 +20,10 @@ export const IFRAME_FEATURE_POLICY = (
   'microphone *; camera *; midi *; geolocation *; encrypted-media *; clipboard-write *; autoplay *'
 );
 
-export const testIDs = StrictDict({
+export const testIDs = {
   contentIFrame: 'content-iframe-test-id',
   modalIFrame: 'modal-iframe-test-id',
-});
+};
 
 const ContentIFrame = ({
   iframeUrl,
@@ -68,7 +66,11 @@ const ContentIFrame = ({
   return (
     <>
       {(shouldShowContent && !hasLoaded) && (
-        showError ? <ErrorPage /> : <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
+        showError ? (
+          <ContentIFrameErrorSlot courseId={courseId} />
+        ) : (
+          <ContentIFrameLoaderSlot courseId={courseId} loadingMessage={loadingMessage} />
+        )
       )}
       {shouldShowContent && (
         <div className="unit-iframe-wrapper">
@@ -78,7 +80,7 @@ const ContentIFrame = ({
       {modalOptions.isOpen
           && (
           <ModalDialog
-            dialogClassName="modal-lti"
+            className="modal-lti"
             onClose={handleModalClose}
             size={modalOptions.isFullscreen ? 'fullscreen' : 'md'}
             isOpen

src/courseware/course/sequence/Unit/ContentIFrame.test.jsx

@@ -1,25 +1,11 @@
-import React from 'react';
+import { render, screen } from '@testing-library/react';
 
-import { ErrorPage } from '@edx/frontend-platform/react';
-import { ModalDialog } from '@openedx/paragon';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import PageLoading from '@src/generic/PageLoading';
-
-import { ContentIFrameLoaderSlot } from '@src/plugin-slots/ContentIFrameLoaderSlot';
 import * as hooks from './hooks';
-import ContentIFrame, { IFRAME_FEATURE_POLICY, testIDs } from './ContentIFrame';
+import ContentIFrame, { IFRAME_FEATURE_POLICY } from './ContentIFrame';
 
-jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: 'ErrorPage' }));
+jest.mock('@edx/frontend-platform/react', () => ({ ErrorPage: () => <div>ErrorPage</div> }));
 
-jest.mock('@openedx/paragon', () => jest.requireActual('@edx/react-unit-test-utils')
-  .mockComponents({
-    ModalDialog: {
-      Body: 'ModalDialog.Body',
-    },
-  }));
-
-jest.mock('@src/generic/PageLoading', () => 'PageLoading');
+jest.mock('@src/generic/PageLoading', () => jest.fn(() => <div>PageLoading</div>));
 
 jest.mock('./hooks', () => ({
   useIFrameBehavior: jest.fn(),
@@ -67,14 +53,13 @@ const props = {
   title: 'test-title',
 };
 
-let el;
 describe('ContentIFrame Component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
   });
   describe('behavior', () => {
     beforeEach(() => {
-      el = shallow(<ContentIFrame {...props} />);
+      render(<ContentIFrame {...props} />);
     });
     it('initializes iframe behavior hook', () => {
       expect(hooks.useIFrameBehavior).toHaveBeenCalledWith({
@@ -89,61 +74,61 @@ describe('ContentIFrame Component', () => {
     });
   });
   describe('output', () => {
-    let component;
     describe('if shouldShowContent', () => {
       describe('if not hasLoaded', () => {
         it('displays errorPage if showError', () => {
           hooks.useIFrameBehavior.mockReturnValueOnce({ ...iframeBehavior, showError: true });
-          el = shallow(<ContentIFrame {...props} />);
-          expect(el.instance.findByType(ErrorPage).length).toEqual(1);
+          render(<ContentIFrame {...props} />);
+          const errorPage = screen.getByText('ErrorPage');
+          expect(errorPage).toBeInTheDocument();
         });
         it('displays PageLoading component if not showError', () => {
-          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(ContentIFrameLoaderSlot);
-          expect(component.props.loadingMessage).toEqual(props.loadingMessage);
+          render(<ContentIFrame {...props} />);
+          const pageLoading = screen.getByText('PageLoading');
+          expect(pageLoading).toBeInTheDocument();
         });
       });
       describe('hasLoaded', () => {
         it('does not display PageLoading or ErrorPage', () => {
           hooks.useIFrameBehavior.mockReturnValueOnce({ ...iframeBehavior, hasLoaded: true });
-          el = shallow(<ContentIFrame {...props} />);
-          expect(el.instance.findByType(PageLoading).length).toEqual(0);
-          expect(el.instance.findByType(ErrorPage).length).toEqual(0);
+          render(<ContentIFrame {...props} />);
+          const pageLoading = screen.queryByText('PageLoading');
+          expect(pageLoading).toBeNull();
+          const errorPage = screen.queryByText('ErrorPage');
+          expect(errorPage).toBeNull();
         });
       });
       it('display iframe with props from hooks', () => {
-        el = shallow(<ContentIFrame {...props} />);
-        [component] = el.instance.findByTestId(testIDs.contentIFrame);
-        expect(component.props).toEqual({
-          allow: IFRAME_FEATURE_POLICY,
-          allowFullScreen: true,
-          scrolling: 'no',
-          referrerPolicy: 'origin',
-          title: props.title,
-          id: props.elementId,
-          src: props.iframeUrl,
-          height: iframeBehavior.iframeHeight,
-          onLoad: iframeBehavior.handleIFrameLoad,
-          'data-testid': testIDs.contentIFrame,
-        });
+        render(<ContentIFrame {...props} />);
+        const iframe = screen.getByTitle(props.title);
+        expect(iframe).toBeInTheDocument();
+        expect(iframe).toHaveAttribute('id', props.elementId);
+        expect(iframe).toHaveAttribute('src', props.iframeUrl);
+        expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
+        expect(iframe).toHaveAttribute('allowfullscreen', '');
+        expect(iframe).toHaveAttribute('scrolling', 'no');
+        expect(iframe).toHaveAttribute('referrerpolicy', 'origin');
       });
     });
     describe('if not shouldShowContent', () => {
       it('does not show PageLoading, ErrorPage, or unit-iframe-wrapper', () => {
-        el = shallow(<ContentIFrame {...{ ...props, shouldShowContent: false }} />);
-        expect(el.instance.findByType(PageLoading).length).toEqual(0);
-        expect(el.instance.findByType(ErrorPage).length).toEqual(0);
-        expect(el.instance.findByTestId(testIDs.contentIFrame).length).toEqual(0);
+        render(<ContentIFrame {...{ ...props, shouldShowContent: false }} />);
+        expect(screen.queryByText('PageLoading')).toBeNull();
+        expect(screen.queryByText('ErrorPage')).toBeNull();
+        expect(screen.queryByTitle(props.title)).toBeNull();
       });
     });
     it('does not display modal if modalOptions returns isOpen: false', () => {
-      el = shallow(<ContentIFrame {...props} />);
-      expect(el.instance.findByType(ModalDialog).length).toEqual(0);
+      render(<ContentIFrame {...props} />);
+      const modal = screen.queryByRole('dialog');
+      expect(modal).toBeNull();
     });
     describe('if modalOptions.isOpen', () => {
       const testModalOpenAndHandleClose = () => {
-        test('Modal component isOpen, with handleModalClose from hook', () => {
-          expect(component.props.onClose).toEqual(modalIFrameData.handleModalClose);
+        it('closes modal on close button click', () => {
+          const closeButton = screen.getByTestId('modal-backdrop');
+          closeButton.click();
+          expect(modalIFrameData.handleModalClose).toHaveBeenCalled();
         });
       };
       describe('fullscreen modal', () => {
@@ -153,14 +138,13 @@ describe('ContentIFrame Component', () => {
               ...modalIFrameData,
               modalOptions: { ...modalOptions.withBody, isFullscreen: true },
             });
-            el = shallow(<ContentIFrame {...props} />);
-            [component] = el.instance.findByType(ModalDialog);
+            render(<ContentIFrame {...props} />);
           });
           it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-            const content = component.findByType(ModalDialog.Body)[0].children[0];
-            expect(content.matches(shallow(
-              <div className="unit-modal">{modalOptions.withBody.body}</div>,
-            ))).toEqual(true);
+            const dialog = screen.getByRole('dialog');
+            expect(dialog).toBeInTheDocument();
+            const modalBody = screen.getByText(modalOptions.withBody.body);
+            expect(modalBody).toBeInTheDocument();
           });
           testModalOpenAndHandleClose();
         });
@@ -171,55 +155,42 @@ describe('ContentIFrame Component', () => {
                 ...modalIFrameData,
                 modalOptions: { ...modalOptions.withUrl, isFullscreen: true },
               });
-            el = shallow(<ContentIFrame {...props} />);
-            [component] = el.instance.findByType(ModalDialog);
+            render(<ContentIFrame {...props} />);
+          });
+          it('displays Modal with iframe to provided url if modal.body is not provided', () => {
+            const iframe = screen.getByTitle(modalOptions.withUrl.title);
+            expect(iframe).toBeInTheDocument();
+            expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
+            expect(iframe).toHaveAttribute('src', modalOptions.withUrl.url);
           });
           testModalOpenAndHandleClose();
-          it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-            const content = component.findByType(ModalDialog.Body)[0].children[0];
-            expect(content.matches(shallow(
-              <iframe
-                title={modalOptions.withUrl.title}
-                allow={IFRAME_FEATURE_POLICY}
-                frameBorder="0"
-                src={modalOptions.withUrl.url}
-                style={{ width: '100%', height: modalOptions.withUrl.height }}
-              />,
-            ))).toEqual(true);
-          });
         });
       });
       describe('body modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withBody });
-          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(ModalDialog);
+          render(<ContentIFrame {...props} />);
         });
         it('displays Modal with div wrapping provided body content if modal.body is provided', () => {
-          const content = component.findByType(ModalDialog.Body)[0].children[0];
-          expect(content.matches(shallow(<div className="unit-modal">{modalOptions.withBody.body}</div>))).toEqual(true);
+          const dialog = screen.getByRole('dialog');
+          expect(dialog).toBeInTheDocument();
+          const modalBody = screen.getByText(modalOptions.withBody.body);
+          expect(modalBody).toBeInTheDocument();
         });
         testModalOpenAndHandleClose();
       });
       describe('url modal', () => {
         beforeEach(() => {
           hooks.useModalIFrameData.mockReturnValueOnce({ ...modalIFrameData, modalOptions: modalOptions.withUrl });
-          el = shallow(<ContentIFrame {...props} />);
-          [component] = el.instance.findByType(ModalDialog);
+          render(<ContentIFrame {...props} />);
+        });
+        it('displays Modal with iframe to provided url if modal.body is not provided', () => {
+          const iframe = screen.getByTitle(modalOptions.withUrl.title);
+          expect(iframe).toBeInTheDocument();
+          expect(iframe).toHaveAttribute('allow', IFRAME_FEATURE_POLICY);
+          expect(iframe).toHaveAttribute('src', modalOptions.withUrl.url);
         });
         testModalOpenAndHandleClose();
-        it('displays Modal with iframe to provided url if modal.body is not provided', () => {
-          const content = component.findByType(ModalDialog.Body)[0].children[0];
-          expect(content.matches(shallow(
-            <iframe
-              title={modalOptions.withUrl.title}
-              allow={IFRAME_FEATURE_POLICY}
-              frameBorder="0"
-              src={modalOptions.withUrl.url}
-              style={{ width: '100%', height: modalOptions.withUrl.height }}
-            />,
-          ))).toEqual(true);
-        });
       });
     });
   });

src/courseware/course/sequence/Unit/UnitSuspense.test.jsx

@@ -1,22 +1,15 @@
-import React from 'react';
-
-import { formatMessage, shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useModel } from '@src/generic/model-store';
-import PageLoading from '@src/generic/PageLoading';
-
-import { GatedUnitContentMessageSlot } from '@src/plugin-slots/GatedUnitContentMessageSlot';
-import messages from '../messages';
-import HonorCode from '../honor-code';
-import LockPaywall from '../lock-paywall';
 import hooks from './hooks';
 import { modelKeys } from './constants';
 
 import UnitSuspense from './UnitSuspense';
 
 jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
   defineMessages: m => m,
-  useIntl: () => ({ formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage }),
 }));
 
 jest.mock('react', () => ({
@@ -24,10 +17,9 @@ jest.mock('react', () => ({
   Suspense: 'Suspense',
 }));
 
-jest.mock('../honor-code', () => 'HonorCode');
-jest.mock('../lock-paywall', () => 'LockPaywall');
+jest.mock('../honor-code', () => jest.fn(() => <div>HonorCode</div>));
+jest.mock('../lock-paywall', () => jest.fn(() => <div>LockPaywall</div>));
 jest.mock('@src/generic/model-store', () => ({ useModel: jest.fn() }));
-jest.mock('@src/generic/PageLoading', () => 'PageLoading');
 
 jest.mock('./hooks', () => ({
   useShouldDisplayHonorCode: jest.fn(() => false),
@@ -46,7 +38,6 @@ const props = {
   id: 'test-id',
 };
 
-let el;
 describe('UnitSuspense component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
@@ -54,7 +45,7 @@ describe('UnitSuspense component', () => {
   });
   describe('behavior', () => {
     it('initializes models', () => {
-      el = shallow(<UnitSuspense {...props} />);
+      render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
       const { calls } = useModel.mock;
       const [unitCall] = calls.filter(call => call[0] === modelKeys.units);
       const [metaCall] = calls.filter(call => call[0] === modelKeys.coursewareMeta);
@@ -66,8 +57,9 @@ describe('UnitSuspense component', () => {
     describe('LockPaywall', () => {
       const testNoPaywall = () => {
         it('does not display LockPaywall', () => {
-          el = shallow(<UnitSuspense {...props} />);
-          expect(el.instance.findByType(LockPaywall).length).toEqual(0);
+          render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+          const lockPaywall = screen.queryByText('LockPaywall');
+          expect(lockPaywall).toBeNull();
         });
       };
       describe('gating not enabled', () => { testNoPaywall(); });
@@ -78,29 +70,29 @@ describe('UnitSuspense component', () => {
       describe('gating enabled, gated content included', () => {
         beforeEach(() => { mockModels(true, true); });
         it('displays LockPaywall in Suspense wrapper with PageLoading fallback', () => {
-          el = shallow(<UnitSuspense {...props} />);
-          const [component] = el.instance.findByType(GatedUnitContentMessageSlot);
-          expect(component.parent.type).toEqual('Suspense');
-          expect(component.parent.props.fallback)
-            .toEqual(<PageLoading srMessage={formatMessage(messages.loadingLockedContent)} />);
-          expect(component.props.courseId).toEqual(props.courseId);
+          hooks.useShouldDisplayHonorCode.mockReturnValueOnce(false);
+          render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+          const lockPaywall = screen.getByText('LockPaywall');
+          expect(lockPaywall).toBeInTheDocument();
+          const suspenseWrapper = lockPaywall.closest('suspense');
+          expect(suspenseWrapper).toBeInTheDocument();
         });
       });
     });
     describe('HonorCode', () => {
       it('does not display HonorCode if useShouldDisplayHonorCode => false', () => {
         hooks.useShouldDisplayHonorCode.mockReturnValueOnce(false);
-        el = shallow(<UnitSuspense {...props} />);
-        expect(el.instance.findByType(HonorCode).length).toEqual(0);
+        render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+        const honorCode = screen.queryByText('HonorCode');
+        expect(honorCode).toBeNull();
       });
       it('displays HonorCode component in Suspense wrapper with PageLoading fallback if shouldDisplayHonorCode', () => {
         hooks.useShouldDisplayHonorCode.mockReturnValueOnce(true);
-        el = shallow(<UnitSuspense {...props} />);
-        const [component] = el.instance.findByType(HonorCode);
-        expect(component.parent.type).toEqual('Suspense');
-        expect(component.parent.props.fallback)
-          .toEqual(<PageLoading srMessage={formatMessage(messages.loadingHonorCode)} />);
-        expect(component.props.courseId).toEqual(props.courseId);
+        render(<IntlProvider locale="en"><UnitSuspense {...props} /></IntlProvider>);
+        const honorCode = screen.getByText('HonorCode');
+        expect(honorCode).toBeInTheDocument();
+        const suspenseWrapper = honorCode.closest('suspense');
+        expect(suspenseWrapper).toBeInTheDocument();
       });
     });
   });

src/courseware/course/sequence/Unit/constants.ts

@@ -1,26 +1,25 @@
-import { StrictDict } from '@edx/react-unit-test-utils/dist';
-
-export const modelKeys = StrictDict({
+export const modelKeys = {
   units: 'units',
   coursewareMeta: 'coursewareMeta',
-});
+} as const;
 
-export const views = StrictDict({
+export const views = {
   student: 'student_view',
   public: 'public_view',
-});
+} as const;
 
 export const loadingState = 'loading';
 
-export const messageTypes = StrictDict({
+export const messageTypes = {
   modal: 'plugin.modal',
   resize: 'plugin.resize',
   videoFullScreen: 'plugin.videoFullScreen',
-});
+  autoAdvance: 'plugin.autoAdvance',
+} as const;
 
-export default StrictDict({
+export default {
   modelKeys,
   views,
   loadingState,
   messageTypes,
-});
+};

src/courseware/course/sequence/Unit/hooks/useExamAccess.js

@@ -1,19 +1,13 @@
 import React from 'react';
 
 import { logError } from '@edx/frontend-platform/logging';
-import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
 import { useExamAccessToken, useFetchExamAccessToken, useIsExam } from '@edx/frontend-lib-special-exams';
 
-export const stateKeys = StrictDict({
-  accessToken: 'accessToken',
-  blockAccess: 'blockAccess',
-});
-
 const useExamAccess = ({
   id,
 }) => {
   const isExam = useIsExam();
-  const [blockAccess, setBlockAccess] = useKeyedState(stateKeys.blockAccess, isExam);
+  const [blockAccess, setBlockAccess] = React.useState(isExam);
 
   const fetchExamAccessToken = useFetchExamAccessToken();
 

src/courseware/course/sequence/Unit/index.test.jsx

@@ -84,6 +84,19 @@ describe('<Unit />', () => {
 
       expect(nextButton).toBeVisible();
     });
+
+    // Test for accessibility compliance: unit title must be an h1 (heading level 1) as the page's primary heading
+    // for screen reader and accessibility compliance.
+    // See: https://edx.readthedocs.io/projects/open-edx-building-and-running-a-course/en/latest/course_components/create_html_component.html#the-visual-editor
+    // JIRA: https://2u-internal.atlassian.net/browse/AU-2135
+    it('renders unit title as h1 heading for accessibility', () => {
+      renderComponent(defaultProps);
+
+      const unitTitle = screen.getByRole('heading', { level: 1 });
+
+      expect(unitTitle).toBeInTheDocument();
+      expect(unitTitle.tagName).toBe('H1');
+    });
   });
 
   describe('UnitSuspense', () => {

src/courseware/course/sequence/Unit/urls.js

@@ -1,35 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { stringifyUrl } from 'query-string';
-
-export const iframeParams = {
-  show_title: 0,
-  show_bookmark: 0,
-  recheck_access: 1,
-};
-
-export const getIFrameUrl = ({
-  id,
-  view,
-  format,
-  examAccess,
-  jumpToId,
-  preview,
-}) => {
-  const xblockUrl = `${getConfig().LMS_BASE_URL}/xblock/${id}`;
-  return stringifyUrl({
-    url: xblockUrl,
-    query: {
-      ...iframeParams,
-      view,
-      preview,
-      ...(format && { format }),
-      ...(!examAccess.blockAccess && { exam_access: examAccess.accessToken }),
-      jumpToId, // Pass jumpToId as query param as fragmentIdentifier is not passed to server.
-    },
-    fragmentIdentifier: jumpToId, // this is used by browser to scroll to correct block.
-  });
-};
-
-export default {
-  getIFrameUrl,
-};

src/courseware/course/sequence/Unit/urls.test.js

@@ -1,83 +0,0 @@
-import { getConfig } from '@edx/frontend-platform';
-import { stringifyUrl } from 'query-string';
-import { getIFrameUrl, iframeParams } from './urls';
-
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(),
-}));
-jest.mock('query-string', () => ({
-  stringifyUrl: jest.fn((arg) => ({ stringifyUrl: arg })),
-}));
-
-const config = { LMS_BASE_URL: 'test-lms-url' };
-getConfig.mockReturnValue(config);
-
-const props = {
-  id: 'test-id',
-  view: 'test-view',
-  format: 'test-format',
-  examAccess: { blockAccess: false, accessToken: 'test-access-token' },
-  preview: false,
-};
-
-describe('urls module getIFrameUrl', () => {
-  test('format provided, exam access and token available', () => {
-    const url = stringifyUrl({
-      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
-      query: {
-        ...iframeParams,
-        view: props.view,
-        format: props.format,
-        exam_access: props.examAccess.accessToken,
-        preview: props.preview,
-      },
-    });
-    expect(getIFrameUrl(props)).toEqual(url);
-  });
-  test('no format provided, exam access blocked', () => {
-    const url = stringifyUrl({
-      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
-      query: { ...iframeParams, view: props.view, preview: props.preview },
-    });
-    expect(getIFrameUrl({
-      id: props.id,
-      view: props.view,
-      preview: props.preview,
-      examAccess: { blockAccess: true },
-    })).toEqual(url);
-  });
-  test('jumpToId and fragmentIdentifier is added to url', () => {
-    const url = stringifyUrl({
-      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
-      query: {
-        ...iframeParams,
-        view: props.view,
-        format: props.format,
-        preview: props.preview,
-        exam_access: props.examAccess.accessToken,
-        jumpToId: 'some-xblock-id',
-      },
-      fragmentIdentifier: 'some-xblock-id',
-    });
-    expect(getIFrameUrl({
-      ...props,
-      jumpToId: 'some-xblock-id',
-    })).toEqual(url);
-  });
-  test('preview is true and url param equals 1', () => {
-    const url = stringifyUrl({
-      url: `${config.LMS_BASE_URL}/xblock/${props.id}`,
-      query: {
-        ...iframeParams,
-        view: props.view,
-        format: props.format,
-        preview: true,
-        exam_access: props.examAccess.accessToken,
-      },
-    });
-    expect(getIFrameUrl({
-      ...props,
-      preview: true,
-    })).toEqual(url);
-  });
-});

src/courseware/course/sequence/Unit/urls.test.ts

@@ -0,0 +1,42 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getIFrameUrl } from './urls';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(),
+}));
+const config = { LMS_BASE_URL: 'https://test-lms-url' };
+getConfig.mockReturnValue(config);
+
+const props = {
+  id: 'test-id',
+  view: 'test-view',
+  format: 'test-format',
+  examAccess: { blockAccess: false, accessToken: 'test-access-token' },
+  preview: false,
+};
+
+describe('urls module getIFrameUrl', () => {
+  test('format provided, exam access and token available', () => {
+    expect(getIFrameUrl(props)).toEqual('https://test-lms-url/xblock/test-id?exam_access=test-access-token&format=test-format&preview=false&recheck_access=1&show_bookmark=0&show_title=0&view=test-view');
+  });
+  test('no format provided, exam access blocked', () => {
+    expect(getIFrameUrl({
+      id: props.id,
+      view: props.view,
+      preview: props.preview,
+      examAccess: { blockAccess: true },
+    })).toEqual('https://test-lms-url/xblock/test-id?preview=false&recheck_access=1&show_bookmark=0&show_title=0&view=test-view');
+  });
+  test('jumpToId and fragmentIdentifier is added to url', () => {
+    expect(getIFrameUrl({
+      ...props,
+      jumpToId: 'some-xblock-id',
+    })).toEqual('https://test-lms-url/xblock/test-id?exam_access=test-access-token&format=test-format&jumpToId=some-xblock-id&preview=false&recheck_access=1&show_bookmark=0&show_title=0&view=test-view#some-xblock-id');
+  });
+  test('preview is true and url param equals 1', () => {
+    expect(getIFrameUrl({
+      ...props,
+      preview: true,
+    })).toEqual('https://test-lms-url/xblock/test-id?exam_access=test-access-token&format=test-format&preview=true&recheck_access=1&show_bookmark=0&show_title=0&view=test-view');
+  });
+});

src/courseware/course/sequence/Unit/urls.ts

@@ -0,0 +1,49 @@
+import { getConfig } from '@edx/frontend-platform';
+
+export const iframeParams = {
+  show_title: 0,
+  show_bookmark: 0,
+  recheck_access: 1,
+};
+
+interface Props {
+  id: string;
+  view: string;
+  format?: string | null;
+  examAccess: { blockAccess: boolean, accessToken?: string };
+  jumpToId?: string;
+  preview: boolean;
+}
+
+export const getIFrameUrl = ({
+  id,
+  view,
+  format = null,
+  examAccess,
+  jumpToId,
+  preview,
+}: Props) => {
+  const xblockUrl = new URL(`${getConfig().LMS_BASE_URL}/xblock/${id}`);
+  for (const [key, value] of Object.entries(iframeParams)) {
+    xblockUrl.searchParams.set(key, String(value));
+  }
+  xblockUrl.searchParams.set('view', view);
+  xblockUrl.searchParams.set('preview', String(preview));
+  if (format) {
+    xblockUrl.searchParams.set('format', format);
+  }
+  if (!examAccess.blockAccess) {
+    xblockUrl.searchParams.set('exam_access', examAccess.accessToken!);
+  }
+  // Pass jumpToId as query param as fragmentIdentifier is not passed to server.
+  if (jumpToId) {
+    xblockUrl.searchParams.set('jumpToId', jumpToId);
+    xblockUrl.hash = `#${jumpToId}`; // this is used by browser to scroll to correct block.
+  }
+  xblockUrl.searchParams.sort();
+  return xblockUrl.toString();
+};
+
+export default {
+  getIFrameUrl,
+};

src/courseware/course/sequence/lock-paywall/LockPaywall.jsx

@@ -9,7 +9,7 @@ import {
 import { Locked } from '@openedx/paragon/icons';
 import SidebarContext from '../../sidebar/SidebarContext';
 import messages from './messages';
-import certificateLocked from '../../../../generic/assets/openedx_locked_certificate.png';
+import certificateLocked from '../../../../generic/assets/edX_locked_certificate.png';
 import { useModel } from '../../../../generic/model-store';
 import { UpgradeButton } from '../../../../generic/upgrade-button';
 import {

src/courseware/course/share/ShareButton.jsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { PropTypes } from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { TwitterShareButton, TwitterIcon } from 'react-share';
-import { stringifyUrl } from 'query-string';
-
-import { Icon } from '@openedx/paragon';
-import messages from './messages';
-
-const ShareTwitterIcon = () => (
-  <TwitterIcon
-    round
-    iconFillColor="#0A3055"
-    bgStyle={{
-      fill: '#fff',
-    }}
-  />
-);
-
-const ShareButton = ({ url }) => {
-  const { formatMessage } = useIntl();
-
-  const twitterUrl = stringifyUrl({
-    url,
-    query: {
-      utm_source: 'twitter',
-      utm_medium: 'social',
-      utm_campaign: 'social-share-exp',
-    },
-  });
-
-  return (
-    <TwitterShareButton
-      url={twitterUrl}
-      title={formatMessage(messages.shareQuote)}
-      resetButtonStyle={false}
-      className="px-1 ml-n1 btn-sm text-primary-500 btn btn-link"
-    >
-      <Icon src={ShareTwitterIcon} />
-      {formatMessage(messages.shareButton)}
-    </TwitterShareButton>
-  );
-};
-
-ShareButton.propTypes = {
-  url: PropTypes.string.isRequired,
-};
-
-export default ShareButton;

src/courseware/course/share/messages.ts

@@ -1,26 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  shareButton: {
-    id: 'learn.sequence.share.button',
-    defaultMessage: 'Share this content',
-    description: 'share message button message',
-  },
-  shareModalTitle: {
-    id: 'learn.sequence.share.modal.title',
-    defaultMessage: 'Title',
-    description: 'share message modal title',
-  },
-  shareModalBody: {
-    id: 'learn.sequence.share.modal.body',
-    defaultMessage: 'Copy the link below to share this content.',
-    description: 'share message modal body',
-  },
-  shareQuote: {
-    id: 'learn.sequence.share.quote',
-    defaultMessage: 'Here\'s a fun clip from a class I\'m taking on @edXonline.\n',
-    description: 'share message quote',
-  },
-});
-
-export default messages;

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx

@@ -7,7 +7,6 @@ import {
   ChevronLeft as ChevronLeftIcon,
 } from '@openedx/paragon/icons';
 
-import { useModel } from '@src/generic/model-store';
 import { LOADING } from '@src/constants';
 import PageLoading from '@src/generic/PageLoading';
 import SidebarSection from './components/SidebarSection';
@@ -35,13 +34,13 @@ const CourseOutlineTray = () => {
     sequences,
   } = useCourseOutlineSidebar();
 
-  const {
-    sectionId: activeSectionId,
-  } = useModel('sequences', activeSequenceId);
-
+  const resolvedSectionId = selectedSection
+    || Object.keys(sections).find(
+      (sectionId) => sections[sectionId].sequenceIds.includes(activeSequenceId),
+    );
   const sectionsIds = Object.keys(sections);
-  const sequenceIds = sections[selectedSection || activeSectionId]?.sequenceIds || [];
-  const backButtonTitle = sections[selectedSection || activeSectionId]?.title;
+  const sequenceIds = sections[resolvedSectionId]?.sequenceIds || [];
+  const backButtonTitle = sections[resolvedSectionId]?.title;
 
   const handleBackToSectionLevel = () => {
     setDisplaySectionLevel();

src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx

@@ -102,6 +102,21 @@ describe('<CourseOutlineTray />', () => {
     expect(mockToggleSidebar).toHaveBeenCalledWith(null);
   });
 
+  it('collapses sidebar correctly when screen is resized', async () => {
+    const mockToggleSidebar = jest.fn();
+    await initTestStore();
+    renderWithProvider({ toggleSidebar: mockToggleSidebar });
+
+    const collapseBtn = screen.getByRole('button', { name: messages.toggleCourseOutlineTrigger.defaultMessage });
+    expect(collapseBtn).toBeInTheDocument();
+
+    // Simulate screen resize
+    window.innerWidth = 500;
+    window.dispatchEvent(new Event('resize'));
+
+    expect(mockToggleSidebar).toHaveBeenCalledWith(null);
+  });
+
   it('navigates to section or sequence level correctly on click by back/section button', async () => {
     const user = userEvent.setup();
     await initTestStore();

src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.jsx

@@ -6,12 +6,12 @@ import {
 
 import { DashedCircleIcon } from '../icons';
 
-const CompletionIcon = ({ completionStat: { completed = 0, total = 0 } }) => {
+const CompletionIcon = ({ completionStat: { completed = 0, total = 0 }, enabled }) => {
   const percentage = total !== 0 ? Math.min((completed / total) * 100, 100) : 0;
   const remainder = 100 - percentage;
 
   switch (true) {
-    case !completed:
+    case !completed || !enabled:
       return <LmsCompletionSolidIcon className="text-gray-300" data-testid="completion-solid-icon" />;
     case completed === total:
       return <CheckCircleIcon className="text-success" data-testid="check-circle-icon" />;
@@ -25,6 +25,7 @@ CompletionIcon.propTypes = {
     completed: PropTypes.number,
     total: PropTypes.number,
   }).isRequired,
+  enabled: PropTypes.bool.isRequired,
 };
 
 export default CompletionIcon;

src/courseware/course/sidebar/sidebars/course-outline/components/CompletionIcon.test.jsx

@@ -3,21 +3,33 @@ import { render, screen } from '@testing-library/react';
 import CompletionIcon from './CompletionIcon';
 
 describe('CompletionIcon', () => {
-  it('renders check circle icon when completion is equal to total', () => {
+  it('renders check circle icon when completion is equal to total and completion tracking is enabled', () => {
     const completionStat = { completed: 5, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} />);
+    render(<CompletionIcon completionStat={completionStat} enabled />);
     expect(screen.getByTestId('check-circle-icon')).toBeInTheDocument();
   });
 
-  it('renders dashed circle icon when completion is between 0 and total', () => {
+  it('renders dashed circle icon when completion is between 0 and total and completion tracking is enabled', () => {
     const completionStat = { completed: 2, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} />);
+    render(<CompletionIcon completionStat={completionStat} enabled />);
     expect(screen.getByTestId('dashed-circle-icon')).toBeInTheDocument();
   });
 
-  it('renders completion solid icon when completion is 0', () => {
+  it('renders completion solid icon when completion is between 0 and total and completion tracking is not enabled', () => {
+    const completionStat = { completed: 2, total: 5 };
+    render(<CompletionIcon completionStat={completionStat} enabled={false} />);
+    expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
+  });
+
+  it('renders completion solid icon when completion is 0 and enabled', () => {
     const completionStat = { completed: 0, total: 5 };
-    render(<CompletionIcon completionStat={completionStat} />);
+    render(<CompletionIcon completionStat={completionStat} enabled />);
+    expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
+  });
+
+  it('renders completion solid icon when completion is at any value and not enabled', () => {
+    const completionStat = { completed: 0, total: 5 };
+    render(<CompletionIcon completionStat={completionStat} enabled={false} />);
     expect(screen.getByTestId('completion-solid-icon')).toBeInTheDocument();
   });
 });

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSection.jsx

@@ -18,21 +18,24 @@ const SidebarSection = ({ section, handleSelectSection }) => {
     completionStat,
   } = section;
 
-  const { activeSequenceId } = useCourseOutlineSidebar();
+  const { activeSequenceId, isEnabledCompletionTracking } = useCourseOutlineSidebar();
   const isActiveSection = sequenceIds.includes(activeSequenceId);
 
   const sectionTitle = (
     <>
       <div className="col-auto p-0">
-        <CompletionIcon completionStat={completionStat} />
+        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
       </div>
       <div className="col-10 ml-3 p-0 flex-grow-1 text-dark-500 text-left text-break">
         {title}
-        <span className="sr-only">
-          , {intl.formatMessage(complete
-          ? courseOutlineMessages.completedSection
-          : courseOutlineMessages.incompleteSection)}
-        </span>
+        {isEnabledCompletionTracking && (
+          <span className="sr-only">
+            , {intl.formatMessage(complete
+            ? courseOutlineMessages.completedSection
+            : courseOutlineMessages.incompleteSection)}
+          </span>
+        )}
+
       </div>
     </>
   );

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.jsx

@@ -28,22 +28,24 @@ const SidebarSequence = ({
   } = sequence;
 
   const [open, setOpen] = useState(defaultOpen);
-  const { activeSequenceId, units } = useCourseOutlineSidebar();
+  const { activeSequenceId, units, isEnabledCompletionTracking } = useCourseOutlineSidebar();
   const isActiveSequence = id === activeSequenceId;
 
   const sectionTitle = (
     <>
       <div className="col-auto p-0" style={{ fontSize: '1.1rem' }}>
-        <CompletionIcon completionStat={completionStat} />
+        <CompletionIcon completionStat={completionStat} enabled={isEnabledCompletionTracking} />
       </div>
       <div className="col-9 d-flex flex-column flex-grow-1 ml-3 mr-auto p-0 text-left">
         <span className="align-middle text-dark-500">{title}</span>
         {specialExamInfo && <span className="align-middle small text-muted">{specialExamInfo}</span>}
-        <span className="sr-only">
-          , {intl.formatMessage(complete
-          ? courseOutlineMessages.completedAssignment
-          : courseOutlineMessages.incompleteAssignment)}
-        </span>
+        {isEnabledCompletionTracking && (
+          <span className="sr-only">
+            , {intl.formatMessage(complete
+            ? courseOutlineMessages.completedAssignment
+            : courseOutlineMessages.incompleteAssignment)}
+          </span>
+        )}
       </div>
     </>
   );
@@ -69,6 +71,7 @@ const SidebarSequence = ({
               activeUnitId={activeUnitId}
               isFirst={index === 0}
               isLocked={type === UNIT_ICON_TYPES.lock}
+              isCompletionTrackingEnabled={isEnabledCompletionTracking}
             />
           ))}
         </ol>

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarSequence.test.jsx

@@ -66,7 +66,7 @@ describe('<SidebarSequence />', () => {
     expect(screen.queryByText(unit.title)).not.toBeInTheDocument();
   });
 
-  it('renders correctly when sequence is not collapsed and complete', async () => {
+  it('renders correctly when sequence is not collapsed and complete and completion tracking enabled', async () => {
     const user = userEvent.setup();
     await initTestStore();
     renderWithProvider({

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.jsx

@@ -15,6 +15,7 @@ const SidebarUnit = ({
   isActive,
   isLocked,
   activeUnitId,
+  isCompletionTrackingEnabled,
 }) => {
   const intl = useIntl();
   const {
@@ -24,6 +25,7 @@ const SidebarUnit = ({
   } = unit;
 
   const iconType = isLocked ? UNIT_ICON_TYPES.lock : icon;
+  const completeAndEnabled = complete && isCompletionTrackingEnabled;
 
   return (
     <li className={classNames({ 'bg-info-100': isActive, 'border-top border-light': !isFirst })}>
@@ -36,15 +38,17 @@ const SidebarUnit = ({
         }}
       >
         <div className="col-auto p-0">
-          <UnitIcon type={iconType} isCompleted={complete} />
+          <UnitIcon type={iconType} isCompleted={completeAndEnabled} />
         </div>
         <div className="col-10 p-0 ml-3 text-break">
           <span className="align-middle">
             {title}
           </span>
-          <span className="sr-only">
-            , {intl.formatMessage(complete ? messages.completedUnit : messages.incompleteUnit)}
-          </span>
+          {isCompletionTrackingEnabled && (
+            <span className="sr-only">
+              , {intl.formatMessage(complete ? messages.completedUnit : messages.incompleteUnit)}
+            </span>
+          )}
         </div>
       </UnitLinkWrapper>
     </li>
@@ -66,6 +70,7 @@ SidebarUnit.propTypes = {
   courseId: PropTypes.string.isRequired,
   sequenceId: PropTypes.string.isRequired,
   activeUnitId: PropTypes.string.isRequired,
+  isCompletionTrackingEnabled: PropTypes.bool.isRequired,
 };
 
 export default SidebarUnit;

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx

@@ -50,6 +50,7 @@ describe('<SidebarUnit />', () => {
                 unit={{ ...unit, icon: 'video', isLocked: false }}
                 isActive={false}
                 activeUnitId={unit.id}
+                isCompletionTrackingEnabled
                 {...props}
               />
             </MemoryRouter>
@@ -68,7 +69,7 @@ describe('<SidebarUnit />', () => {
     expect(container.querySelector('.text-success')).not.toBeInTheDocument();
   });
 
-  it('renders correctly when unit is complete', async () => {
+  it('renders correctly when unit is complete and tracking enabled', async () => {
     await initTestStore();
     const container = renderWithProvider({ unit: { ...unit, complete: true } });
 

src/courseware/course/sidebar/sidebars/course-outline/hooks.js

@@ -1,7 +1,10 @@
-import { useContext, useEffect, useState } from 'react';
+import {
+  useContext, useEffect, useLayoutEffect, useState,
+} from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/analytics';
+import { breakpoints } from '@openedx/paragon';
 
 import { useModel } from '@src/generic/model-store';
 import { LOADED } from '@src/constants';
@@ -22,7 +25,10 @@ import { ID } from './constants';
 export const useCourseOutlineSidebar = () => {
   const dispatch = useDispatch();
   const isCollapsedOutlineSidebar = window.sessionStorage.getItem('hideCourseOutlineSidebar');
-  const { enableNavigationSidebar: isEnabledSidebar } = useSelector(getCoursewareOutlineSidebarSettings);
+  const {
+    enableNavigationSidebar: isEnabledSidebar,
+    enableCompletionTracking: isEnabledCompletionTracking,
+  } = useSelector(getCoursewareOutlineSidebarSettings);
   const courseOutlineShouldUpdate = useSelector(getCourseOutlineShouldUpdate);
   const courseOutlineStatus = useSelector(getCourseOutlineStatus);
   const sequenceStatus = useSelector(getSequenceStatus);
@@ -51,13 +57,18 @@ export const useCourseOutlineSidebar = () => {
   } = course.entranceExamData || {};
   const isActiveEntranceExam = entranceExamEnabled && !entranceExamPassed;
 
+  const collapseSidebar = () => {
+    toggleSidebar(null);
+    window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
+  };
+
   const handleToggleCollapse = () => {
     if (currentSidebar === ID) {
-      toggleSidebar(null);
-      window.sessionStorage.setItem('hideCourseOutlineSidebar', 'true');
+      collapseSidebar();
     } else {
       toggleSidebar(ID);
       window.sessionStorage.removeItem('hideCourseOutlineSidebar');
+      window.sessionStorage.setItem(`notificationTrayStatus.${courseId}`, 'closed');
     }
   };
 
@@ -104,12 +115,28 @@ export const useCourseOutlineSidebar = () => {
     }
   }, [courseId, isEnabledSidebar, courseOutlineShouldUpdate]);
 
+  // Collapse sidebar if screen resized to a width that displays the sidebar automatically
+  useLayoutEffect(() => {
+    const handleResize = () => {
+      // breakpoints.large.maxWidth is 1200px and currently the breakpoint for showing the sidebar
+      if (currentSidebar === ID && global.innerWidth < breakpoints.large.maxWidth) {
+        collapseSidebar();
+      }
+    };
+
+    global.addEventListener('resize', handleResize);
+    return () => {
+      global.removeEventListener('resize', handleResize);
+    };
+  }, [isOpen]);
+
   return {
     courseId,
     unitId,
     currentSidebar,
     shouldDisplayFullScreen,
     isEnabledSidebar,
+    isEnabledCompletionTracking,
     isOpen,
     setIsOpen,
     handleToggleCollapse,

src/courseware/data/api.js

@@ -115,5 +115,6 @@ export async function getCoursewareOutlineSidebarToggles(courseId) {
   return {
     enable_navigation_sidebar: data.enable_navigation_sidebar || false,
     always_open_auxiliary_sidebar: data.always_open_auxiliary_sidebar || false,
+    enable_completion_tracking: data.enable_completion_tracking || false,
   };
 }

src/courseware/data/redux.test.js

@@ -113,6 +113,7 @@ describe('Data layer integration tests', () => {
       axiosMock.onGet(coursewareSidebarSettingsUrl).reply(200, {
         enable_navigation_sidebar: true,
         always_open_auxiliary_sidebar: true,
+        enable_completion_tracking: true,
       });
 
       await executeThunk(thunks.fetchCourse(courseId), store.dispatch);
@@ -126,6 +127,7 @@ describe('Data layer integration tests', () => {
       expect(state.courseware.coursewareOutlineSidebarSettings).toEqual({
         enableNavigationSidebar: true,
         alwaysOpenAuxiliarySidebar: true,
+        enableCompletionTracking: true,
       });
 
       // check that at least one key camel cased, thus course data normalized
@@ -154,6 +156,7 @@ describe('Data layer integration tests', () => {
       expect(state.courseware.coursewareOutlineSidebarSettings).toEqual({
         enableNavigationSidebar: false,
         alwaysOpenAuxiliarySidebar: false,
+        enableCompletionTracking: false,
       });
 
       // check that at least one key camel cased, thus course data normalized

src/courseware/data/thunks.js

@@ -90,8 +90,11 @@ export function fetchCourse(courseId) {
         const {
           enable_navigation_sidebar: enableNavigationSidebar,
           always_open_auxiliary_sidebar: alwaysOpenAuxiliarySidebar,
+          enable_completion_tracking: enableCompletionTracking,
         } = coursewareOutlineSidebarTogglesResult.value;
-        dispatch(setCoursewareOutlineSidebarToggles({ enableNavigationSidebar, alwaysOpenAuxiliarySidebar }));
+        dispatch(setCoursewareOutlineSidebarToggles(
+          { enableNavigationSidebar, alwaysOpenAuxiliarySidebar, enableCompletionTracking },
+        ));
       }
 
       // Log errors for each request if needed. Outline failures may occur

src/generic/notices/NoticesProvider.jsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { getConfig } from '@edx/frontend-platform';
 import PropTypes from 'prop-types';
 import { getNotices } from './api';
@@ -25,11 +25,7 @@ const NoticesProvider = ({ children }) => {
     getData();
   }, []);
 
-  return (
-    <div>
-      {isRedirected === true ? null : children}
-    </div>
-  );
+  return isRedirected === true ? null : children;
 };
 
 NoticesProvider.propTypes = {

src/index.jsx

@@ -49,100 +49,102 @@ subscribe(APP_READY, () => {
         <PathFixesProvider>
           <NoticesProvider>
             <UserMessagesProvider>
-              <Routes>
-                <Route path="*" element={<PageWrap><PageNotFound /></PageWrap>} />
-                <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
-                <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
-                <Route
-                  path={ROUTES.PREFERENCES_UNSUBSCRIBE}
-                  element={
-                    <PageWrap><PreferencesUnsubscribe /></PageWrap>
-                }
-                />
-                <Route
-                  path={DECODE_ROUTES.ACCESS_DENIED}
-                  element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
-                />
-                <Route
-                  path={DECODE_ROUTES.HOME}
-                  element={(
-                    <DecodePageRoute>
-                      <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
-                        <OutlineTab />
-                      </TabContainer>
-                    </DecodePageRoute>
-              )}
-                />
-                <Route
-                  path={DECODE_ROUTES.LIVE}
-                  element={(
-                    <DecodePageRoute>
-                      <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
-                        <LiveTab />
-                      </TabContainer>
-                    </DecodePageRoute>
-                )}
-                />
-                <Route
-                  path={DECODE_ROUTES.DATES}
-                  element={(
-                    <DecodePageRoute>
-                      <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
-                        <DatesTab />
-                      </TabContainer>
-                    </DecodePageRoute>
-                )}
-                />
-                <Route
-                  path={DECODE_ROUTES.DISCUSSION}
-                  element={(
-                    <DecodePageRoute>
-                      <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
-                        <DiscussionTab />
-                      </TabContainer>
-                    </DecodePageRoute>
-                )}
-                />
-                {DECODE_ROUTES.PROGRESS.map((route) => (
+              <div className="app-container">
+                <Routes>
+                  <Route path="*" element={<PageWrap><PageNotFound /></PageWrap>} />
+                  <Route path={ROUTES.UNSUBSCRIBE} element={<PageWrap><GoalUnsubscribe /></PageWrap>} />
+                  <Route path={ROUTES.REDIRECT} element={<PageWrap><CoursewareRedirectLandingPage /></PageWrap>} />
                   <Route
-                    key={route}
-                    path={route}
+                    path={ROUTES.PREFERENCES_UNSUBSCRIBE}
+                    element={
+                      <PageWrap><PreferencesUnsubscribe /></PageWrap>
+                    }
+                  />
+                  <Route
+                    path={DECODE_ROUTES.ACCESS_DENIED}
+                    element={<DecodePageRoute><CourseAccessErrorPage /></DecodePageRoute>}
+                  />
+                  <Route
+                    path={DECODE_ROUTES.HOME}
                     element={(
                       <DecodePageRoute>
-                        <TabContainer
-                          tab="progress"
-                          fetch={fetchProgressTab}
-                          slice="courseHome"
-                          isProgressTab
-                        >
-                          <ProgressTab />
+                        <TabContainer tab="outline" fetch={fetchOutlineTab} slice="courseHome">
+                          <OutlineTab />
                         </TabContainer>
                       </DecodePageRoute>
-                  )}
+                    )}
                   />
-                ))}
-                <Route
-                  path={DECODE_ROUTES.COURSE_END}
-                  element={(
-                    <DecodePageRoute>
-                      <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
-                        <CourseExit />
-                      </TabContainer>
-                    </DecodePageRoute>
-                )}
-                />
-                {DECODE_ROUTES.COURSEWARE.map((route) => (
                   <Route
-                    key={route}
-                    path={route}
+                    path={DECODE_ROUTES.LIVE}
                     element={(
                       <DecodePageRoute>
-                        <CoursewareContainer />
+                        <TabContainer tab="lti_live" fetch={fetchLiveTab} slice="courseHome">
+                          <LiveTab />
+                        </TabContainer>
                       </DecodePageRoute>
-                  )}
+                    )}
                   />
-                ))}
-              </Routes>
+                  <Route
+                    path={DECODE_ROUTES.DATES}
+                    element={(
+                      <DecodePageRoute>
+                        <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
+                          <DatesTab />
+                        </TabContainer>
+                      </DecodePageRoute>
+                    )}
+                  />
+                  <Route
+                    path={DECODE_ROUTES.DISCUSSION}
+                    element={(
+                      <DecodePageRoute>
+                        <TabContainer tab="discussion" fetch={fetchDiscussionTab} slice="courseHome">
+                          <DiscussionTab />
+                        </TabContainer>
+                      </DecodePageRoute>
+                    )}
+                  />
+                  {DECODE_ROUTES.PROGRESS.map((route) => (
+                    <Route
+                      key={route}
+                      path={route}
+                      element={(
+                        <DecodePageRoute>
+                          <TabContainer
+                            tab="progress"
+                            fetch={fetchProgressTab}
+                            slice="courseHome"
+                            isProgressTab
+                          >
+                            <ProgressTab />
+                          </TabContainer>
+                        </DecodePageRoute>
+                      )}
+                    />
+                  ))}
+                  <Route
+                    path={DECODE_ROUTES.COURSE_END}
+                    element={(
+                      <DecodePageRoute>
+                        <TabContainer tab="courseware" fetch={fetchCourse} slice="courseware">
+                          <CourseExit />
+                        </TabContainer>
+                      </DecodePageRoute>
+                    )}
+                  />
+                  {DECODE_ROUTES.COURSEWARE.map((route) => (
+                    <Route
+                      key={route}
+                      path={route}
+                      element={(
+                        <DecodePageRoute>
+                          <CoursewareContainer />
+                        </DecodePageRoute>
+                      )}
+                    />
+                  ))}
+                </Routes>
+              </div>
             </UserMessagesProvider>
           </NoticesProvider>
         </PathFixesProvider>
@@ -164,12 +166,15 @@ subscribe(APP_INIT_ERROR, (error) => {
 initialize({
   handlers: {
     config: () => {
+      /* istanbul ignore next */
       mergeConfig({
         CONTACT_URL: process.env.CONTACT_URL || null,
         CREDENTIALS_BASE_URL: process.env.CREDENTIALS_BASE_URL || null,
         CREDIT_HELP_LINK_URL: process.env.CREDIT_HELP_LINK_URL || null,
         DISCUSSIONS_MFE_BASE_URL: process.env.DISCUSSIONS_MFE_BASE_URL || null,
+        DISCOUNT_CODE_INFO_URL: process.env.DISCOUNT_CODE_INFO_URL || null,
         ENTERPRISE_LEARNER_PORTAL_HOSTNAME: process.env.ENTERPRISE_LEARNER_PORTAL_HOSTNAME || null,
+        ENTERPRISE_LEARNER_PORTAL_URL: process.env.ENTERPRISE_LEARNER_PORTAL_URL || null,
         ENABLE_JUMPNAV: process.env.ENABLE_JUMPNAV || null,
         ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
         INSIGHTS_BASE_URL: process.env.INSIGHTS_BASE_URL || null,
@@ -191,6 +196,7 @@ initialize({
         PRIVACY_POLICY_URL: process.env.PRIVACY_POLICY_URL || null,
         SHOW_UNGRADED_ASSIGNMENT_PROGRESS: process.env.SHOW_UNGRADED_ASSIGNMENT_PROGRESS || false,
         ENABLE_XPERT_AUDIT: process.env.ENABLE_XPERT_AUDIT || false,
+        FEATURE_ENABLE_CHAT_V2_ENDPOINT: process.env.FEATURE_ENABLE_CHAT_V2_ENDPOINT || false,
       }, 'LearnerAppConfig');
     },
   },

src/index.scss

@@ -302,6 +302,11 @@
     padding-left: 40px;
     padding-right: 40px;
   }
+
+  // Unit title is styled as an H3
+  .unit-title {
+    font-size: var(--pgn-typography-font-size-h3-base);
+  }
 }
 
 .unit-iframe-wrapper {
@@ -367,19 +372,22 @@
 // window (retaining padding around the edge).  Bootstrap modals don't have a full-screen
 // size like this.  Because of the hack below around react-focus-on's div, it would be better long-term to pull this into Paragon and perhaps call it "modal-full" or something like that.
 .modal-lti {
-  height: 100%;
+  height: 80vh;
   max-width: 100% !important;
 
   // I don't like this.  We need to set a height of 100% on a div created by react-focus-on, a
   // package we use in our Modal.  That div has no class name or ID, so instead we're uniquely
   // identifying it by based on a unique attribute it has which its siblings don't share.
   > div[data-focus-lock-disabled="false"] {
-    height: 100%;
+    height: 80vh;
   }
 
   // Along with setting the height of modal-content's parent div from react-focus-on, we need to
   // set modal-content's height as well to get the modal to expand to full-screen height.
   .modal-content {
+    height: 80vh;
+  }
+  .pgn__modal-body-content {
     height: 100%;
   }
 }

src/plugin-slots/ContentIFrameErrorSlot/README.md

@@ -0,0 +1,39 @@
+# Content iFrame Error Slot
+
+### Slot ID: `org.openedx.frontend.learning.content_iframe_error.v1`
+
+### Parameters: `courseId`
+
+## Description
+
+This slot is used to replace/modify the content iframe error page.
+
+## Example
+
+The following `env.config.jsx` will replace the error page with emojis.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.content_iframe_error.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_error_page',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({courseId}) => (
+              <h1>🚨🤖💥</h1>
+            ),
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/ContentIFrameErrorSlot/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { ErrorPage } from '@edx/frontend-platform/react';
+
+interface Props {
+  courseId: string;
+}
+
+export const ContentIFrameErrorSlot : React.FC<Props> = ({ courseId }: Props) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.content_iframe_error.v1"
+    pluginProps={{ courseId }}
+  >
+    <ErrorPage />
+  </PluginSlot>
+);

src/plugin-slots/CourseExitPluginSlots/CourseExitViewCoursesPluginSlot/README.md

@@ -0,0 +1,37 @@
+# Course Exit "View Courses" Button Plugin Slot
+
+### Slot ID: `org.openedx.frontend.learning.course_exit_view_courses.v1`
+### Props:
+* `content: { href }`
+
+## Description
+
+This slot is used for modifying "View Courses" button in the course exit screen
+
+## Example
+
+The following `env.config.jsx` will make the link link to `example.com` 
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.course_exit_view_courses.v1: {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: (widget) => {
+            widget.content.href = 'http://www.example.com';
+            return widget;
+          }
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseExitPluginSlots/CourseExitViewCoursesPluginSlot/index.tsx

@@ -0,0 +1,37 @@
+import { Button } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from '../../../courseware/course/course-exit/messages';
+
+interface Props {
+  href: string
+}
+
+const ViewCoursesLink: React.FC<Props> = ({ href }: Props) => {
+  const intl = useIntl();
+  return (
+    <div className="row w-100 mt-2 mb-4 justify-content-end">
+      <Button
+        variant="outline-primary"
+        href={href}
+      >
+        {intl.formatMessage(messages.viewCoursesButton)}
+      </Button>
+    </div>
+  );
+};
+
+export const CourseExitViewCoursesPluginSlot: React.FC = () => {
+  const href = `${getConfig().LMS_BASE_URL}/dashboard`;
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.learning.course_exit_view_courses.v1"
+      slotOptions={{
+        mergeProps: true,
+      }}
+    >
+      <ViewCoursesLink href={href} />
+    </PluginSlot>
+  );
+};

src/plugin-slots/CourseExitPluginSlots/CourseRecommendationsSlot/index.tsx

@@ -0,0 +1,15 @@
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import CourseRecommendations from '../../../courseware/course/course-exit/CourseRecommendations';
+
+interface Props {
+  variant: string;
+}
+
+export const CourseRecommendationsSlot: React.FC<Props> = ({ variant }: Props) => (
+  <PluginSlot
+    id="org.openedx.frontend.learning.course_recommendations.v1"
+    idAliases={['course_recommendations_slot']}
+  >
+    <CourseRecommendations variant={variant} />
+  </PluginSlot>
+);

src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/README.md

@@ -0,0 +1,40 @@
+# Course Exit Dashboard Footnote Link Plugin Slot
+
+### Slot ID: `org.openedx.frontend.learning.course_exit_dashboard_footnote_link.v1`
+### Props:
+* `variant`
+* `content: { destination }`
+
+## Description
+
+This slot is used for modifying the link to the learner dashboard in the footnote on the course exit page
+
+## Example
+
+The following `env.config.jsx` will change the link to point to `example.com` 
+
+![Screenshot of modified course celebration](./screenshot_custom.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.course_exit_dashboard_footnote_link.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: (widget) => {
+            widget.content.destination = 'http://www.example.com';
+            return widget;
+          }
+        },
+      ]
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseExitPluginSlots/DashboardFootnoteLinkPluginSlot/index.tsx

@@ -0,0 +1,49 @@
+import { Hyperlink } from '@openedx/paragon';
+import { getConfig } from '@edx/frontend-platform';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import messages from '../../../courseware/course/course-exit/messages';
+import { logClick } from '../../../courseware/course/course-exit/utils';
+import { useModel } from '../../../generic/model-store';
+import { useContextId } from '../../../data/hooks';
+
+interface LinkProps {
+  variant: string;
+  destination: string;
+}
+
+const DashboardFootnoteLink: React.FC<LinkProps> = ({ variant, destination }: LinkProps) => {
+  const intl = useIntl();
+  const courseId = useContextId();
+  const { org } = useModel('courseHomeMeta', courseId);
+  const { administrator } = getAuthenticatedUser();
+  return (
+    <Hyperlink
+      style={{ textDecoration: 'underline' }}
+      destination={destination}
+      className="text-reset"
+      onClick={() => logClick(org, courseId, administrator, 'dashboard_footnote', { variant })}
+    >
+      {intl.formatMessage(messages.dashboardLink)}
+    </Hyperlink>
+  );
+};
+
+interface PluginProps {
+  variant: string
+}
+
+export const DashboardFootnoteLinkPluginSlot: React.FC = ({ variant }: PluginProps) => {
+  const destination = `${getConfig().LMS_BASE_URL}/dashboard`;
+  return (
+    <PluginSlot
+      id="org.openedx.frontend.learning.course_exit_dashboard_footnote_link.v1"
+      slotOptions={{
+        mergeProps: true,
+      }}
+    >
+      <DashboardFootnoteLink variant={variant} destination={destination} />
+    </PluginSlot>
+  );
+};

src/plugin-slots/CourseExitPluginSlots/index.jsx

@@ -0,0 +1,9 @@
+import { DashboardFootnoteLinkPluginSlot } from './DashboardFootnoteLinkPluginSlot';
+import { CourseRecommendationsSlot } from './CourseRecommendationsSlot';
+import { CourseExitViewCoursesPluginSlot } from './CourseExitViewCoursesPluginSlot';
+
+export {
+  DashboardFootnoteLinkPluginSlot,
+  CourseRecommendationsSlot,
+  CourseExitViewCoursesPluginSlot,
+};

src/plugin-slots/CourseRecommendationsSlot/index.jsx

@@ -1,18 +0,0 @@
-import PropTypes from 'prop-types';
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import CourseRecommendations from '../../courseware/course/course-exit/CourseRecommendations';
-
-const CourseRecommendationsSlot = ({ variant }) => (
-  <PluginSlot
-    id="org.openedx.frontend.learning.course_recommendations.v1"
-    idAliases={['course_recommendations_slot']}
-  >
-    <CourseRecommendations variant={variant} />
-  </PluginSlot>
-);
-
-CourseRecommendationsSlot.propTypes = {
-  variant: PropTypes.string.isRequired,
-};
-
-export default CourseRecommendationsSlot;

src/plugin-slots/LearnerToolsSlot/README.md

@@ -0,0 +1,28 @@
+# Learner Tools Slot
+
+### Slot ID: `org.openedx.frontend.learning.learner_tools.v1`
+
+### Slot ID Aliases
+* `learner_tools_slot`
+
+### Description
+This plugin slot provides a location for learner-facing tools and features to be displayed during course content navigation. The slot is rendered via a React portal to `document.body` to ensure proper positioning and stacking context.
+
+### Props:
+* `courseId` - The unique identifier for the current course
+* `unitId` - The unique identifier for the current unit/vertical being viewed
+* `userId` - The authenticated user's ID (automatically retrieved from auth context)
+* `isStaff` - Boolean indicating whether the user has staff/instructor privileges
+* `enrollmentMode` - The user's enrollment mode (e.g., 'audit', 'verified', 'honor', etc.)
+
+### Usage
+Plugins registered to this slot can use the provided context to:
+- Display course-specific tools based on courseId and unitId
+- Show different features based on user's enrollment mode
+- Provide staff-only functionality when isStaff is true
+- Query additional data from Redux store or backend APIs as needed
+
+### Notes
+- Returns `null` if user is not authenticated
+- Plugins should manage their own feature flag checks and requirements
+- The slot uses a portal to render to `document.body` for flexible positioning

src/plugin-slots/LearnerToolsSlot/index.jsx

@@ -0,0 +1,47 @@
+import { createPortal } from 'react-dom';
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+export const LearnerToolsSlot = ({
+  enrollmentMode = null,
+  isStaff,
+  courseId,
+  unitId,
+}) => {
+  const authenticatedUser = getAuthenticatedUser();
+
+  // Return null if user is not authenticated to avoid destructuring errors
+  if (!authenticatedUser) {
+    return null;
+  }
+
+  const { userId } = authenticatedUser;
+
+  // Provide minimal, generic context - no feature-specific flags
+  const pluginContext = {
+    courseId,
+    unitId,
+    userId,
+    isStaff,
+    enrollmentMode,
+  };
+
+  // Use generic plugin slot ID (location-based, not feature-specific)
+  // Plugins will query their own requirements from Redux/config
+  return createPortal(
+    <PluginSlot
+      id="org.openedx.frontend.learning.learner_tools.v1"
+      idAliases={['learner_tools_slot']}
+      pluginProps={pluginContext}
+    />,
+    document.body,
+  );
+};
+
+LearnerToolsSlot.propTypes = {
+  isStaff: PropTypes.bool.isRequired,
+  enrollmentMode: PropTypes.string,
+  courseId: PropTypes.string.isRequired,
+  unitId: PropTypes.string.isRequired,
+};

src/plugin-slots/LearnerToolsSlot/index.test.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import * as auth from '@edx/frontend-platform/auth';
+
+import { LearnerToolsSlot } from './index';
+
+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  PluginSlot: jest.fn(() => <div data-testid="plugin-slot">Plugin Slot</div>),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(),
+}));
+
+describe('LearnerToolsSlot', () => {
+  const defaultProps = {
+    courseId: 'course-v1:edX+DemoX+Demo_Course',
+    unitId: 'block-v1:edX+DemoX+Demo_Course+type@vertical+block@unit1',
+    isStaff: false,
+    enrollmentMode: 'verified',
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Mock document.body for createPortal
+    document.body.innerHTML = '<div id="root"></div>';
+  });
+
+  it('renders PluginSlot with correct props when user is authenticated', () => {
+    const mockUser = { userId: 123, username: 'testuser' };
+    auth.getAuthenticatedUser.mockReturnValue(mockUser);
+
+    render(<LearnerToolsSlot {...defaultProps} />);
+
+    expect(PluginSlot).toHaveBeenCalledWith(
+      expect.objectContaining({
+        id: 'org.openedx.frontend.learning.learner_tools.v1',
+        idAliases: ['learner_tools_slot'],
+        pluginProps: {
+          courseId: defaultProps.courseId,
+          unitId: defaultProps.unitId,
+          userId: mockUser.userId,
+          isStaff: defaultProps.isStaff,
+          enrollmentMode: defaultProps.enrollmentMode,
+        },
+      }),
+      {},
+    );
+  });
+
+  it('returns null when user is not authenticated', () => {
+    auth.getAuthenticatedUser.mockReturnValue(null);
+
+    const { container } = render(<LearnerToolsSlot {...defaultProps} />);
+
+    expect(container.firstChild).toBeNull();
+    expect(PluginSlot).not.toHaveBeenCalled();
+  });
+
+  it('uses default null for enrollmentMode when not provided', () => {
+    const mockUser = { userId: 456, username: 'testuser2' };
+    auth.getAuthenticatedUser.mockReturnValue(mockUser);
+
+    const { enrollmentMode, ...propsWithoutEnrollmentMode } = defaultProps;
+
+    render(<LearnerToolsSlot {...propsWithoutEnrollmentMode} />);
+
+    expect(PluginSlot).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pluginProps: expect.objectContaining({
+          enrollmentMode: null,
+        }),
+      }),
+      {},
+    );
+  });
+
+  it('passes isStaff=true correctly', () => {
+    const mockUser = { userId: 789, username: 'staffuser' };
+    auth.getAuthenticatedUser.mockReturnValue(mockUser);
+
+    render(<LearnerToolsSlot {...defaultProps} isStaff />);
+
+    expect(PluginSlot).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pluginProps: expect.objectContaining({
+          isStaff: true,
+        }),
+      }),
+      {},
+    );
+  });
+
+  it('renders to document.body via portal', () => {
+    const mockUser = { userId: 999, username: 'portaluser' };
+    auth.getAuthenticatedUser.mockReturnValue(mockUser);
+
+    render(<LearnerToolsSlot {...defaultProps} />);
+
+    // The portal should render to document.body
+    expect(document.body.querySelector('[data-testid="plugin-slot"]')).toBeInTheDocument();
+  });
+});

src/plugin-slots/README.md

@@ -11,6 +11,7 @@
 * [`org.openedx.frontend.learning.course_outline_tab_notifications.v1`](./CourseOutlineTabNotificationsSlot/)
 * [`org.openedx.frontend.learning.course_recommendations.v1`](./CourseRecommendationsSlot/)
 * [`org.openedx.frontend.learning.gated_unit_content_message.v1`](./GatedUnitContentMessageSlot/)
+* [`org.openedx.frontend.learning.learner_tools.v1`](./LearnerToolsSlot/)
 * [`org.openedx.frontend.learning.next_unit_top_nav_trigger.v1`](./NextUnitTopNavTriggerSlot/)
 * [`org.openedx.frontend.learning.notification_tray.v1`](./NotificationTraySlot/)
 * [`org.openedx.frontend.learning.notification_widget.v1`](./NotificationWidgetSlot/)
@@ -23,4 +24,5 @@
 * [`org.openedx.frontend.learning.progress_tab_grade_breakdown.v1`](./ProgressTabGradeBreakdownSlot/)
 * [`org.openedx.frontend.learning.progress_tab_related_links.v1`](./ProgressTabRelatedLinksSlot/)
 * [`org.openedx.frontend.learning.sequence_container.v1`](./SequenceContainerSlot/)
+* [`org.openedx.frontend.learning.sequence_navigation.v1`](./SequenceNavigationSlot/)
 * [`org.openedx.frontend.learning.unit_title.v1`](./UnitTitleSlot/)

src/plugin-slots/SequenceNavigationSlot/README.md

@@ -0,0 +1,80 @@
+# Sequence Navigation Slot
+
+### Slot ID: `org.openedx.frontend.learning.sequence_navigation.v1`
+
+### Props:
+* `sequenceId` (string) — Current sequence identifier
+* `unitId` (string) — Current unit identifier
+* `nextHandler` (function) — Handler for next navigation action
+* `onNavigate` (function) — Handler for direct unit navigation
+* `previousHandler` (function) — Handler for previous navigation action
+
+## Description
+
+This slot is used to replace/modify/hide the sequence navigation component that controls navigation between units within a course sequence.
+
+## Example
+
+### Default content
+![Sequence navigation slot with default content](./screenshot_default.png)
+
+### Replaced with custom component
+![📖 in sequence navigation slot](./screenshot_custom.png)
+
+The following `env.config.jsx` will replace the sequence navigation with a custom implementation that uses all available props.
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learning.sequence_navigation.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'custom_sequence_navigation',
+            type: DIRECT_PLUGIN,
+            RenderWidget: ({ sequenceId, unitId, nextHandler, onNavigate, previousHandler }) => {
+              // Mock unit data for demonstration
+              const units = ['unit-1', 'unit-2', 'unit-3'];
+
+              return (
+                <Stack gap={2} direction="horizontal" className="p-3 bg-light w-100">
+                  <Button
+                    className="flex-grow-1"
+                    onClick={previousHandler}
+                  >
+                    ⬅️ Previous
+                  </Button>
+                  <Stack gap={2} direction="horizontal">
+                    {units.map((unit, index) => (
+                      <Button
+                        variant="outline-primary"
+                        key={unit}
+                        className={`btn btn-sm ${unitId === unit ? 'btn-primary' : 'btn-outline-secondary'}`}
+                        onClick={() => onNavigate(unit)}
+                      >
+                        {index + 1}
+                      </Button>
+                    ))}
+                  </Stack>
+                  <Button
+                    className="flex-grow-1"
+                    onClick={nextHandler}
+                  >
+                    Next ➡️
+                  </Button>
+                </Stack>
+              )
+            },
+          },
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```