chore: updated dependencies

BREAKING CHANGE: Pre-design-tokens theming is no longer supported.

Co-authored-by: Diana Olarte <diana.olarte@edunext.co>

.env

@@ -32,7 +32,6 @@ ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 LEARNING_BASE_URL=''
-ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
@@ -41,3 +40,7 @@ ACCOUNT_PROFILE_URL=''
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -20,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -38,7 +38,6 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 LEARNING_BASE_URL='http://localhost:2000'
 SESSION_COOKIE_DOMAIN='localhost'
-ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
@@ -47,3 +46,7 @@ ACCOUNT_PROFILE_URL='http://localhost:1995'
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -20,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -37,7 +37,6 @@ ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 LEARNING_BASE_URL='http://localhost:2000'
-ZENDESK_KEY='test-zendesk-key'
 HOTJAR_APP_ID='hot-jar-app-id'
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
@@ -46,3 +45,6 @@ ACCOUNT_PROFILE_URL='http://account-profile-url.test'
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 ENABLE_EDX_PERSONAL_DASHBOARD=true
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+PARAGON_THEME_URLS={}

.github/workflows/ci.yml

@@ -11,9 +11,6 @@ on:
 jobs:
   tests:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node: [18, 20]
 
     steps:
     - name: Checkout
@@ -22,7 +19,7 @@ jobs:
     - name: Setup Nodejs
       uses: actions/setup-node@v4
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
@@ -40,24 +37,7 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v4
+      uses: codecov/codecov-action@v5
       with:
         token: ${{ secrets.CODECOV_TOKEN }}
         fail_ci_if_error: true
-
-    - name: Send failure notification
-      if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v3
-      with:
-        server_address: email-smtp.us-east-1.amazonaws.com
-        server_port: 465
-        username: ${{ secrets.EDX_SMTP_USERNAME }}
-        password: ${{ secrets.EDX_SMTP_PASSWORD }}
-        subject: CI workflow failed in ${{github.repository}}
-        to: masters-grades@edx.org,aperture@2u-internal.opsgenie.net
-        from: github-actions <github-actions@edx.org>
-        nodemailerlog: true
-        nodemailerdebug: true
-        body: CI workflow in ${{github.repository}} failed!
-          For details see "github.com/${{ github.repository }}/actions/runs/${{ github.run_id
-          }}"

.github/workflows/npm-publish.yml

@@ -1,35 +0,0 @@
-name: Release CI
-on:
-  push:
-    tags:
-      - "*"
-
-jobs:
-  release:
-    name: Release
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0
-
-      - name: Setup Nodejs Env
-        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ env.NODE_VER }}
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Create Build
-        run: npm run build
-
-      - name: Release Package
-        env:
-          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
-        run: npm semantic-release

.husky/pre-push

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

.releaserc

@@ -1,27 +0,0 @@
-{
-  "branch": "master",
-  "tagFormat": "v${version}",
-  "verifyConditions": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "analyzeCommits": "@semantic-release/commit-analyzer",
-  "generateNotes": "@semantic-release/release-notes-generator",
-  "prepare": "@semantic-release/npm",
-  "publish": [
-    "@semantic-release/npm",
-    {
-      "path": "@semantic-release/github",
-      "assets": {
-        "path": "dist/*"
-      }
-    }
-  ],
-  "success": [],
-  "fail": []
-}

catalog-info.yaml

@@ -17,6 +17,7 @@ metadata:
     openedx.org/arch-interest-groups: ""
     # This can be multiple comma-separated projects.
     openedx.org/add-to-projects: "openedx:23"
+    openedx.org/release: "master"
 spec:
   type: 'service'
   lifecycle: 'production'

example.env.config.js

@@ -59,7 +59,6 @@ module.exports = {
   ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM: 'Footer',
   LEARNING_BASE_URL: 'http://localhost:2000',
   SESSION_COOKIE_DOMAIN: 'localhost',
-  ZENDESK_KEY: '',
   HOTJAR_APP_ID: '',
   HOTJAR_VERSION: 6,
   HOTJAR_DEBUG: '',

openedx.yaml

@@ -1,9 +0,0 @@
-# This file describes this Open edX repo, as described in OEP-2:
-# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
-
-tags:
-  - frontend-app
-  - masters
-oeps:
-  oep-2: true    # Repository metadata
-openedx-release: {ref: master}

package.json

@@ -6,6 +6,9 @@
     "type": "git",
     "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
   },
+  "browserslist": [
+    "extends @edx/browserslist-config"
+  ],
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
@@ -13,11 +16,11 @@
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/learner-dashboard/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "quality": "npm run lint-fix && npm run test",
     "watch-tests": "jest --watch",
-    "snapshot": "fedx-scripts jest --updateSnapshot",
-    "prepare": "husky install"
+    "snapshot": "fedx-scripts jest --updateSnapshot"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -27,70 +30,58 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-component-header": "^5.6.0",
-    "@edx/frontend-enterprise-hotjar": "3.0.0",
-    "@edx/frontend-platform": "8.1.2",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.2.0",
+    "@edx/frontend-enterprise-hotjar": "7.2.0",
+    "@edx/frontend-platform": "^8.3.1",
     "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "3.0.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.2.0",
-    "@openedx/frontend-slot-footer": "^1.0.2",
-    "@openedx/paragon": "^22.2.2",
-    "@redux-beacon/segment": "^1.1.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.5",
     "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^1.6.1",
-    "@testing-library/user-event": "^13.5.0",
+    "@reduxjs/toolkit": "^2.0.0",
     "classnames": "^2.3.1",
-    "core-js": "3.38.1",
-    "dompurify": "^2.3.1",
-    "email-prop-type": "^3.0.1",
-    "file-saver": "^2.0.5",
-    "filesize": "^8.0.6",
+    "core-js": "3.40.0",
+    "filesize": "^10.0.0",
     "font-awesome": "4.7.0",
     "history": "5.3.0",
-    "html-react-parser": "^1.3.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "29.7.0",
-    "jest-when": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "prop-types": "15.8.1",
     "query-string": "7.1.3",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-intl": "6.8.0",
-    "react-pdf": "^7.0.0",
+    "react-intl": "6.8.9",
     "react-redux": "^7.2.4",
-    "react-router-dom": "6.27.0",
+    "react-router-dom": "6.29.0",
     "react-share": "^4.4.0",
-    "react-zendesk": "^0.1.13",
     "redux": "4.2.1",
-    "redux-beacon": "^2.1.0",
     "redux-logger": "3.0.6",
     "redux-thunk": "2.4.2",
     "regenerator-runtime": "^0.14.0",
     "reselect": "^4.0.0",
     "universal-cookie": "^4.0.4",
-    "util": "^0.12.4",
-    "whatwg-fetch": "^3.6.2"
+    "util": "^0.12.4"
   },
   "devDependencies": {
+    "@edx/browserslist-config": "^1.3.0",
     "@edx/reactifex": "^2.1.1",
-    "@openedx/frontend-build": "14.1.5",
-    "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.1.0",
+    "@openedx/frontend-build": "^14.3.3",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "copy-webpack-plugin": "^12.0.0",
-    "husky": "^9.0.0",
     "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.1.3",
+    "jest-when": "^3.6.0",
     "react-dev-utils": "^12.0.0",
-    "react-test-renderer": "^17.0.2",
-    "redux-mock-store": "^1.5.4",
-    "semantic-release": "^20.1.3"
+    "react-test-renderer": "^18.3.1",
+    "redux-mock-store": "^1.5.4"
   }
 }

src/App.jsx

@@ -6,7 +6,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
 import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
-import FooterSlot from '@openedx/frontend-slot-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import { Alert } from '@openedx/paragon';
 
 import { RequestKeys } from 'data/constants/requests';
@@ -80,7 +80,7 @@ export const App = () => {
       <div>
         <AppWrapper>
           <LearnerDashboardHeader />
-          <main>
+          <main id="main">
             {hasNetworkFailure
               ? (
                 <Alert variant="danger">

src/App.scss

@@ -1,13 +1,10 @@
 // frontend-app-*/src/index.scss
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
 @import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/_footer";

src/App.test.jsx

@@ -13,11 +13,10 @@ import AppWrapper from 'containers/WidgetContainers/AppWrapper';
 import { App } from './App';
 import messages from './messages';
 
-jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
 
 jest.mock('containers/Dashboard', () => 'Dashboard');
 jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
-jest.mock('components/ZendeskFab', () => 'ZendeskFab');
 jest.mock('containers/WidgetContainers/AppWrapper', () => 'AppWrapper');
 jest.mock('data/redux', () => ({
   selectors: 'redux.selectors',

src/__snapshots__/App.test.jsx.snap

@@ -17,7 +17,9 @@ exports[`App router component component initialize failure snapshot 1`] = `
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
+        id="main"
+      >
         <Alert
           variant="danger"
         >
@@ -49,7 +51,9 @@ exports[`App router component component no network failure snapshot 1`] = `
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
+        id="main"
+      >
         <Dashboard />
       </main>
     </AppWrapper>
@@ -75,7 +79,9 @@ exports[`App router component component no network failure with optimizely proje
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
+        id="main"
+      >
         <Dashboard />
       </main>
     </AppWrapper>
@@ -101,7 +107,9 @@ exports[`App router component component no network failure with optimizely url s
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
+        id="main"
+      >
         <Dashboard />
       </main>
     </AppWrapper>
@@ -127,7 +135,9 @@ exports[`App router component component refresh failure snapshot 1`] = `
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
+        id="main"
+      >
         <Alert
           variant="danger"
         >

src/__snapshots__/index.test.jsx.snap

@@ -1,40 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<ErrorPage
-  message="test-error-message"
-/>
+<UNDEFINED>
+  <ErrorPage
+    message="test-error-message"
+  />
+</UNDEFINED>
 `;
 
 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<AppProvider
-  store={
-    {
-      "redux": "store",
+<UNDEFINED>
+  <AppProvider
+    store={
+      {
+        "redux": "store",
+      }
     }
-  }
-  wrapWithRouter={true}
->
-  <NoticesWrapper>
-    <Routes>
-      <Route
-        element={
-          <PageWrap>
-            <App />
-          </PageWrap>
-        }
-        path="/"
-      />
-      <Route
-        element={
-          <Navigate
-            replace={true}
-            to="/"
-          />
-        }
-        path="*"
-      />
-    </Routes>
-  </NoticesWrapper>
-</AppProvider>
+  >
+    <NoticesWrapper>
+      <Routes>
+        <Route
+          element={
+            <PageWrap>
+              <App />
+            </PageWrap>
+          }
+          path="/"
+        />
+        <Route
+          element={
+            <Navigate
+              replace={true}
+              to="/"
+            />
+          }
+          path="*"
+        />
+      </Routes>
+    </NoticesWrapper>
+  </AppProvider>
+</UNDEFINED>
 `;

src/components/ZendeskFab/__snapshots__/index.test.jsx.snap

@@ -1,65 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ZendeskFab snapshot 1`] = `
-<Zendesk
-  cookies={true}
-  defer={true}
-  webWidget={
-    {
-      "answerBot": {
-        "avatar": {
-          "name": {
-            "*": "edX Support",
-          },
-          "url": "https://edx-cdn.org/v3/prod/favicon.ico",
-        },
-        "contactOnlyAfterQuery": true,
-        "suppress": false,
-        "title": {
-          "*": "edX Support",
-        },
-      },
-      "chat": {
-        "departments": {
-          "enabled": [
-            "account settings",
-            "billing and payments",
-            "certificates",
-            "deadlines",
-            "errors and technical issues",
-            "other",
-            "proctoring",
-          ],
-        },
-        "suppress": false,
-      },
-      "contactForm": {
-        "attachments": true,
-        "selectTicketForm": {
-          "*": "Please choose your request type:",
-        },
-        "ticketForms": [
-          {
-            "fields": [
-              {
-                "id": "description",
-                "prefill": {
-                  "*": "",
-                },
-              },
-            ],
-            "id": 360003368814,
-            "subject": false,
-          },
-        ],
-      },
-      "contactOptions": {
-        "enabled": false,
-      },
-      "helpCenter": {
-        "originalArticleButton": true,
-      },
-    }
-  }
-/>
-`;

src/components/ZendeskFab/index.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import Zendesk from 'react-zendesk';
-import messages from './messages';
-
-const ZendeskFab = () => {
-  const { formatMessage } = useIntl();
-  const setting = {
-    cookies: true,
-    webWidget: {
-      contactOptions: {
-        enabled: false,
-      },
-      chat: {
-        suppress: false,
-        departments: {
-          enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring'],
-        },
-      },
-      contactForm: {
-        ticketForms: [
-          {
-            id: 360003368814,
-            subject: false,
-            fields: [{ id: 'description', prefill: { '*': '' } }],
-          },
-        ],
-        selectTicketForm: {
-          '*': formatMessage(messages.selectTicketForm),
-        },
-        attachments: true,
-      },
-      helpCenter: {
-        originalArticleButton: true,
-      },
-      answerBot: {
-        suppress: false,
-        contactOnlyAfterQuery: true,
-        title: { '*': formatMessage(messages.supportTitle) },
-        avatar: {
-          url: 'https://edx-cdn.org/v3/prod/favicon.ico',
-          name: { '*': formatMessage(messages.supportTitle) },
-        },
-      },
-    },
-  };
-
-  return (
-    <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
-  );
-};
-
-export default ZendeskFab;

src/components/ZendeskFab/index.test.jsx

@@ -1,12 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import ZendeskFab from '.';
-
-jest.mock('react-zendesk', () => 'Zendesk');
-
-describe('ZendeskFab', () => {
-  test('snapshot', () => {
-    const wrapper = shallow(<ZendeskFab />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-  });
-});

src/components/ZendeskFab/messages.js

@@ -1,16 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  supportTitle: {
-    id: 'zendesk.supportTitle',
-    description: 'Title for the support button',
-    defaultMessage: 'edX Support',
-  },
-  selectTicketForm: {
-    id: 'zendesk.selectTicketForm',
-    description: 'Select ticket form',
-    defaultMessage: 'Please choose your request type:',
-  },
-});
-
-export default messages;

src/config/index.js

@@ -12,13 +12,13 @@ const configuration = {
   // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
   LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
   SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN || '',
-  ZENDESK_KEY: process.env.ZENDESK_KEY,
   SUPPORT_URL: process.env.SUPPORT_URL || null,
   ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
   CAREER_LINK_URL: process.env.CAREER_LINK_URL || null,
   LOGO_URL: process.env.LOGO_URL,
   ENABLE_EDX_PERSONAL_DASHBOARD: process.env.ENABLE_EDX_PERSONAL_DASHBOARD === 'true',
   SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
+  ENABLE_PROGRAMS: process.env.ENABLE_PROGRAMS === 'true',
 };
 
 const features = {};

src/containers/CourseCard/CourseCard.scss

@@ -1,10 +1,8 @@
-@import "@openedx/paragon/scss/core/core";
-
 .course-card {
   .card {
     .pgn__card-wrapper-image-cap.vertical {
       display: flex;
-      min-height: $card-image-vertical-max-height;
+      min-height: var(--pgn-size-card-image-vertical-max-height);
     }
     .pgn__card-image-cap {
       border-bottom-left-radius: 0 !important;
@@ -53,11 +51,11 @@
     > .alert {
       border-radius: 0;
       box-shadow: none;
-      padding: map-get($spacers, 3) map-get($spacers, 4);
+      padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
 
       &:last-of-type {
-        border-bottom-left-radius: $alert-border-radius;
-        border-bottom-right-radius: $alert-border-radius;
+        border-bottom-left-radius: var(--pgn-size-alert-border-radius);
+        border-bottom-right-radius: var(--pgn-size-alert-border-radius);
       }
     }
 

src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx

@@ -27,7 +27,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
 );
 
 describe('BeginCourseButton', () => {

src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx

@@ -26,7 +26,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
 );
 
 let wrapper;

src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Locked } from '@openedx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
-import useActionDisabledState from '../hooks';
-
-import ActionButton from './ActionButton';
-import messages from './messages';
-
-export const UpgradeButton = ({ cardId }) => {
-  const { formatMessage } = useIntl();
-
-  const { upgradeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const { disableUpgradeCourse } = useActionDisabledState(cardId);
-
-  const trackUpgradeClick = reduxHooks.useTrackCourseEvent(
-    track.course.upgradeClicked,
-    cardId,
-    upgradeUrl,
-  );
-
-  const enabledProps = {
-    as: 'a',
-    href: upgradeUrl,
-    onClick: trackUpgradeClick,
-  };
-  return (
-    <ActionButton
-      iconBefore={Locked}
-      variant="outline-primary"
-      disabled={disableUpgradeCourse}
-      {...!disableUpgradeCourse && enabledProps}
-    >
-      {formatMessage(messages.upgrade)}
-    </ActionButton>
-  );
-};
-UpgradeButton.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-export default UpgradeButton;

src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx

@@ -1,49 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
-import useActionDisabledState from '../hooks';
-import UpgradeButton from './UpgradeButton';
-
-jest.mock('tracking', () => ({
-  course: {
-    upgradeClicked: jest.fn().mockName('segment.trackUpgradeClicked'),
-  },
-}));
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useTrackCourseEvent: jest.fn(
-      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
-    ),
-  },
-}));
-jest.mock('../hooks', () => jest.fn(() => ({ disableUpgradeCourse: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
-
-describe('UpgradeButton', () => {
-  const props = {
-    cardId: 'cardId',
-  };
-  const upgradeUrl = 'upgradeUrl';
-  reduxHooks.useCardCourseRunData.mockReturnValue({ upgradeUrl });
-  describe('snapshot', () => {
-    test('can upgrade', () => {
-      const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.instance.props.disabled).toEqual(false);
-      expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
-        track.course.upgradeClicked,
-        props.cardId,
-        upgradeUrl,
-      ));
-    });
-    test('cannot upgrade', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableUpgradeCourse: true });
-      const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.instance.props.disabled).toEqual(true);
-    });
-  });
-});

src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx

@@ -15,7 +15,7 @@ jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
     useTrackCourseEvent: jest.fn(
-      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+      (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
     ),
   },
 }));

src/containers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`BeginCourseButton snapshot disabled snapshot 1`] = `
       "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
+        "url": "home-urlexec-ed-tracking-path=cardId",
       },
     }
   }
@@ -29,7 +29,7 @@ exports[`BeginCourseButton snapshot enabled snapshot 1`] = `
       "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
+        "url": "home-urlexec-ed-tracking-path=cardId",
       },
     }
   }

src/containers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`ResumeButton snapshot disabled snapshot 1`] = `
       "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
+        "url": "resume-urlexec-ed-tracking-path=cardId",
       },
     }
   }
@@ -29,7 +29,7 @@ exports[`ResumeButton snapshot enabled snapshot 1`] = `
       "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
+        "url": "resume-urlexec-ed-tracking-path=cardId",
       },
     }
   }

src/containers/CourseCard/components/CourseCardActions/__snapshots__/UpgradeButton.test.jsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UpgradeButton snapshot can upgrade 1`] = `
-<ActionButton
-  as="a"
-  disabled={false}
-  href="upgradeUrl"
-  iconBefore={[MockFunction icons.Locked]}
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.trackUpgradeClicked],
-        "upgradeUrl": "upgradeUrl",
-      },
-    }
-  }
-  variant="outline-primary"
->
-  Upgrade
-</ActionButton>
-`;
-
-exports[`UpgradeButton snapshot cannot upgrade 1`] = `
-<ActionButton
-  disabled={true}
-  iconBefore={[MockFunction icons.Locked]}
-  variant="outline-primary"
->
-  Upgrade
-</ActionButton>
-`;

src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap

@@ -10,7 +10,7 @@ exports[`ViewCourseButton learner can view course 1`] = `
       "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "homeUrl",
+        "url": "homeUrl",
       },
     }
   }
@@ -29,7 +29,7 @@ exports[`ViewCourseButton learner cannot view course 1`] = `
       "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "homeUrl",
+        "url": "homeUrl",
       },
     }
   }

src/containers/CourseCard/components/CourseCardActions/index.test.jsx

@@ -3,7 +3,6 @@ import { shallow } from '@edx/react-unit-test-utils';
 import { reduxHooks } from 'hooks';
 
 import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
-import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -21,7 +20,6 @@ jest.mock('hooks', () => ({
 }));
 
 jest.mock('plugin-slots/CourseCardActionSlot', () => 'CustomActionButton');
-jest.mock('./UpgradeButton', () => 'UpgradeButton');
 jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
 jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
 jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
@@ -59,19 +57,7 @@ describe('CourseCardActions', () => {
     });
   });
   describe('output', () => {
-    describe('Exec Ed course', () => {
-      it('does not render upgrade button', () => {
-        mockHooks({ isExecEd2UCourse: true });
-        render();
-        expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
-      });
-    });
     describe('entitlement course', () => {
-      it('does not render upgrade button', () => {
-        mockHooks({ isEntitlement: true });
-        render();
-        expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
-      });
       it('renders ViewCourseButton if fulfilled', () => {
         mockHooks({ isEntitlement: true, isFulfilled: true });
         render();
@@ -83,22 +69,15 @@ describe('CourseCardActions', () => {
         expect(el.instance.findByType(SelectSessionButton)[0].props.cardId).toEqual(cardId);
       });
     });
-    describe('verified course', () => {
-      it('does not render upgrade button', () => {
-        mockHooks({ isVerified: true });
-        render();
-        expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
-      });
-    });
     describe('not entitlement, verified, or exec ed', () => {
-      it('renders UpgradeButton and ViewCourseButton for archived courses', () => {
+      it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
         mockHooks({ isArchived: true });
         render();
         expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
         expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
       });
       describe('unstarted courses', () => {
-        it('renders UpgradeButton and BeginCourseButton', () => {
+        it('renders CourseCardActionSlot and BeginCourseButton', () => {
           mockHooks();
           render();
           expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
@@ -106,7 +85,7 @@ describe('CourseCardActions', () => {
         });
       });
       describe('active courses (started, and not archived)', () => {
-        it('renders UpgradeButton and ResumeButton', () => {
+        it('renders CourseCardActionSlot and ResumeButton', () => {
           mockHooks({ hasStarted: true });
           render();
           expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);

src/containers/CourseCard/components/CourseCardActions/messages.js

@@ -1,11 +1,6 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-  upgrade: {
-    id: 'learner-dash.courseCard.actions.upgrade',
-    description: 'Course card upgrade button text',
-    defaultMessage: 'Upgrade',
-  },
   beginCourse: {
     id: 'learner-dash.courseCard.actions.beginCourse',
     description: 'Course card begin-course button text',

src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx

@@ -12,7 +12,6 @@ export const CourseBanner = ({ cardId }) => {
   const {
     isVerified,
     isAuditAccessExpired,
-    canUpgrade,
     coursewareAccess = {},
   } = reduxHooks.useCardEnrollmentData(cardId);
   const courseRun = reduxHooks.useCardCourseRunData(cardId);
@@ -26,13 +25,7 @@ export const CourseBanner = ({ cardId }) => {
   return (
     <>
       {isAuditAccessExpired
-        && (canUpgrade ? (
-          <Banner>
-            {formatMessage(messages.auditAccessExpired)}
-            {'  '}
-            {formatMessage(messages.upgradeToAccess)}
-          </Banner>
-        ) : (
+        && (
           <Banner>
             {formatMessage(messages.auditAccessExpired)}
             {'  '}
@@ -40,17 +33,7 @@ export const CourseBanner = ({ cardId }) => {
               {formatMessage(messages.findAnotherCourse)}
             </Hyperlink>
           </Banner>
-        ))}
-
-      {courseRun.isActive && !canUpgrade && (
-        <Banner>
-          {formatMessage(messages.upgradeDeadlinePassed)}
-          {'  '}
-          <Hyperlink isInline destination={courseRun.marketingUrl || ''}>
-            {formatMessage(messages.exploreCourseDetails)}
-          </Hyperlink>
-        </Banner>
-      )}
+        )}
 
       {(!isStaff && isTooEarly && courseRun.startDate) && (
         <Banner>
@@ -59,6 +42,7 @@ export const CourseBanner = ({ cardId }) => {
           })}
         </Banner>
       )}
+
       {(!isStaff && hasUnmetPrerequisites) && (
         <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
       )}

src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx

@@ -25,7 +25,6 @@ let el;
 
 const enrollmentData = {
   isVerified: false,
-  canUpgrade: false,
   isAuditAccessExpired: false,
   coursewareAccess: {
     hasUnmetPrerequisites: false,
@@ -65,51 +64,18 @@ describe('CourseBanner', () => {
     render({ enrollment: { isVerified: true } });
     expect(el.isEmptyRender()).toEqual(true);
   });
-  describe('audit access expired, can upgrade', () => {
-    beforeEach(() => {
-      render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } });
-    });
-    test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.instance.children[0].children[2].el).toContain(messages.upgradeToAccess.defaultMessage);
-    });
-  });
-  describe('audit access expired, cannot upgrade', () => {
+  describe('audit access expired', () => {
     beforeEach(() => {
       render({ enrollment: { isAuditAccessExpired: true } });
     });
     test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
       expect(el.snapshot).toMatchSnapshot();
     });
-    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+    test('messages: auditAccessExpired', () => {
       expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
       expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
     });
   });
-  describe('course run active and cannot upgrade', () => {
-    beforeEach(() => {
-      render({ courseRun: { isActive: true } });
-    });
-    test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.upgradeDeadlinePassed.defaultMessage);
-      const link = el.instance.findByType(Hyperlink);
-      expect(link[0].children[0].el).toEqual(messages.exploreCourseDetails.defaultMessage);
-      expect(link[0].props.destination).toEqual(courseRunData.marketingUrl);
-    });
-  });
-  test('no display if audit access not expired and (course is not active or can upgrade)', () => {
-    render();
-    // isEmptyRender() isn't true because the minimal is <Fragment />
-    expect(el.instance.children).toEqual([]);
-    render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
-    expect(el.instance.children).toEqual([]);
-  });
   describe('unmet prerequisites', () => {
     beforeEach(() => {
       render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });

src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CourseBanner.test.jsx.snap

@@ -1,16 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CourseBanner audit access expired, can upgrade snapshot: (auditAccessExpired, upgradeToAccess) 1`] = `
-<Fragment>
-  <Banner>
-    Your audit access to this course has expired.
-      
-    Upgrade now to access your course again.
-  </Banner>
-</Fragment>
-`;
-
-exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
+exports[`CourseBanner audit access expired snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
 <Fragment>
   <Banner>
     Your audit access to this course has expired.
@@ -25,21 +15,6 @@ exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAcces
 </Fragment>
 `;
 
-exports[`CourseBanner course run active and cannot upgrade snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink) 1`] = `
-<Fragment>
-  <Banner>
-    Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.
-      
-    <Hyperlink
-      destination="marketing-url"
-      isInline={true}
-    >
-      Explore course details.
-    </Hyperlink>
-  </Banner>
-</Fragment>
-`;
-
 exports[`CourseBanner snapshot: stacking banners 1`] = `<Fragment />`;
 
 exports[`CourseBanner staff snapshot: isStaff 1`] = `<Fragment />`;

src/containers/CourseCard/components/CourseCardBanners/__snapshots__/index.test.jsx.snap

@@ -8,7 +8,7 @@ exports[`CourseCardBanners render with isEnrolled false 1`] = `
   <RelatedProgramsBanner
     cardId="test-card-id"
   />
-  <CourseBanner
+  <CourseBannerSlot
     cardId="test-card-id"
   />
   <EntitlementBanner
@@ -25,7 +25,7 @@ exports[`CourseCardBanners renders default CourseCardBanners 1`] = `
   <RelatedProgramsBanner
     cardId="test-card-id"
   />
-  <CourseBanner
+  <CourseBannerSlot
     cardId="test-card-id"
   />
   <EntitlementBanner

src/containers/CourseCard/components/CourseCardBanners/index.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { reduxHooks } from 'hooks';
 
-import CourseBanner from './CourseBanner';
+import CourseBannerSlot from 'plugin-slots/CourseBannerSlot';
 import CertificateBanner from './CertificateBanner';
 import CreditBanner from './CreditBanner';
 import EntitlementBanner from './EntitlementBanner';
@@ -14,7 +14,7 @@ export const CourseCardBanners = ({ cardId }) => {
   return (
     <div className="course-card-banners" data-testid="CourseCardBanners">
       <RelatedProgramsBanner cardId={cardId} />
-      <CourseBanner cardId={cardId} />
+      <CourseBannerSlot cardId={cardId} />
       <EntitlementBanner cardId={cardId} />
       {isEnrolled && <CertificateBanner cardId={cardId} />}
       {isEnrolled && <CreditBanner cardId={cardId} />}

src/containers/CourseCard/components/CourseCardBanners/messages.js

@@ -6,26 +6,11 @@ const messages = defineMessages({
     description: 'Audit access expiration banner message',
     defaultMessage: 'Your audit access to this course has expired.',
   },
-  upgradeToAccess: {
-    id: 'learner-dash.courseCard.banners.upgradeToAccess',
-    description: 'Upgrade prompt for audit-expired learners that can still upgrade',
-    defaultMessage: 'Upgrade now to access your course again.',
-  },
   findAnotherCourse: {
     id: 'learner-dash.courseCard.banners.findAnotherCourse',
     description: 'Action prompt taking learners to course exploration',
     defaultMessage: 'Find another course',
   },
-  upgradeDeadlinePassed: {
-    id: 'learner-dash.courseCard.banners.upgradeDeadlinePassed',
-    description: 'Audit upgrade deadline passed banner message',
-    defaultMessage: 'Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.',
-  },
-  exploreCourseDetails: {
-    id: 'learner-dash.courseCard.banners.exploreCourseDetails',
-    description: 'Action prompt taking learners to course details page',
-    defaultMessage: 'Explore course details.',
-  },
   certRestricted: {
     id: 'learner-dash.courseCard.banners.certificateRestricted',
     description: 'Restricted certificate warning message',

src/containers/CourseCard/components/CourseCardDetails/index.scss

@@ -1,7 +1,3 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 a.course-card-title {
-  color: $black;
+  color: var(--pgn-color-black);
 }

src/containers/CourseCard/components/CourseCardImage.jsx

@@ -20,11 +20,13 @@ export const CourseCardImage = ({ cardId, orientation }) => {
   const { isVerified } = reduxHooks.useCardEnrollmentData(cardId);
   const { disableCourseTitle } = useActionDisabledState(cardId);
   const handleImageClicked = reduxHooks.useTrackCourseEvent(courseImageClicked, cardId, homeUrl);
-  const wrapperClassName = `pgn__card-wrapper-image-cap overflow-visible ${orientation}`;
+  const wrapperClassName = `pgn__card-wrapper-image-cap d-inline-block overflow-visible ${orientation}`;
   const image = (
     <>
       <img
-        className="pgn__card-image-cap show"
+        // w-100 is necessary for images on Safari, otherwise stretches full height of the image
+        // https://stackoverflow.com/a/44250830
+        className="pgn__card-image-cap w-100 show"
         src={bannerImgSrc}
         alt={formatMessage(messages.bannerAlt)}
       />

src/containers/CourseCard/components/CourseCardImage.test.jsx

@@ -18,8 +18,8 @@ jest.mock('hooks', () => ({
     useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })),
     useCardCourseRunData: jest.fn(() => ({ homeUrl })),
     useCardEnrollmentData: jest.fn(() => ({ isVerified: true })),
-    useTrackCourseEvent: jest.fn((eventName, cardId, upgradeUrl) => ({
-      trackCourseEvent: { eventName, cardId, upgradeUrl },
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
+      trackCourseEvent: { eventName, cardId, url },
     })),
   },
 }));

src/containers/CourseCard/components/CourseCardTitle.test.jsx

@@ -17,8 +17,8 @@ jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseData: jest.fn(() => ({ courseName: 'course-name' })),
     useCardCourseRunData: jest.fn(() => ({ homeUrl })),
-    useTrackCourseEvent: jest.fn((eventName, cardId, upgradeUrl) => ({
-      trackCourseEvent: { eventName, cardId, upgradeUrl },
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
+      trackCourseEvent: { eventName, cardId, url },
     })),
   },
 }));

src/containers/CourseCard/components/__snapshots__/CourseCardImage.test.jsx.snap

@@ -2,14 +2,14 @@
 
 exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
 <a
-  className="pgn__card-wrapper-image-cap overflow-visible orientation"
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
   href="home-url"
   onClick={
     {
       "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.courseImageClicked],
-        "upgradeUrl": "home-url",
+        "url": "home-url",
       },
     }
   }
@@ -18,7 +18,7 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
   <Fragment>
     <img
       alt="Course thumbnail"
-      className="pgn__card-image-cap show"
+      className="pgn__card-image-cap w-100 show"
       src="banner-img-src"
     />
     <span
@@ -43,12 +43,12 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
 
 exports[`CourseCardImage snapshot renders disabled link 1`] = `
 <div
-  className="pgn__card-wrapper-image-cap overflow-visible orientation"
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
 >
   <Fragment>
     <img
       alt="Course thumbnail"
-      className="pgn__card-image-cap show"
+      className="pgn__card-image-cap w-100 show"
       src="banner-img-src"
     />
     <span

src/containers/CourseCard/components/__snapshots__/CourseCardTitle.test.jsx.snap

@@ -11,7 +11,7 @@ exports[`CourseCardTitle snapshot renders clickable link course title 1`] = `
         "trackCourseEvent": {
           "cardId": "cardId",
           "eventName": [MockFunction segment.courseTitleClicked],
-          "upgradeUrl": "home-url",
+          "url": "home-url",
         },
       }
     }

src/containers/CourseCard/components/hooks.js

@@ -3,19 +3,18 @@ import { reduxHooks } from 'hooks';
 export const useActionDisabledState = (cardId) => {
   const { isMasquerading } = reduxHooks.useMasqueradeData();
   const {
-    canUpgrade, hasAccess, isAudit, isAuditAccessExpired,
+    hasAccess, isAudit, isAuditAccessExpired,
   } = reduxHooks.useCardEnrollmentData(cardId);
   const {
     isEntitlement, isFulfilled, canChange, hasSessions,
   } = reduxHooks.useCardEntitlementData(cardId);
 
-  const { resumeUrl, homeUrl, upgradeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { resumeUrl, homeUrl } = reduxHooks.useCardCourseRunData(cardId);
 
   const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
   const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
   const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);
   const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);
-  const disableUpgradeCourse = !upgradeUrl || (isMasquerading && !canUpgrade);
 
   const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
 
@@ -23,7 +22,6 @@ export const useActionDisabledState = (cardId) => {
     disableBeginCourse,
     disableResumeCourse,
     disableViewCourse,
-    disableUpgradeCourse,
     disableSelectSession,
     disableCourseTitle,
   };

src/containers/CourseCard/components/hooks.test.js

@@ -16,7 +16,6 @@ const cardId = 'my-test-course-number';
 describe('useActionDisabledState', () => {
   const defaultData = {
     isMasquerading: false,
-    canUpgrade: false,
     isEntitlement: false,
     isFulfilled: false,
     canChange: false,
@@ -26,12 +25,10 @@ describe('useActionDisabledState', () => {
     isAuditAccessExpired: false,
     resumeUrl: 'resume.url',
     homeUrl: 'home.url',
-    upgradeUrl: 'upgrade.url',
   };
   const mockHooksData = (args) => {
     const {
       isMasquerading,
-      canUpgrade,
       isEntitlement,
       isFulfilled,
       canChange,
@@ -41,11 +38,9 @@ describe('useActionDisabledState', () => {
       isAuditAccessExpired,
       resumeUrl,
       homeUrl,
-      upgradeUrl,
     } = { ...defaultData, ...args };
     reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
-      canUpgrade,
       hasAccess,
       isAudit,
       isAuditAccessExpired,
@@ -59,7 +54,6 @@ describe('useActionDisabledState', () => {
     reduxHooks.useCardCourseRunData.mockReturnValueOnce({
       resumeUrl,
       homeUrl,
-      upgradeUrl,
     });
   };
 
@@ -121,21 +115,6 @@ describe('useActionDisabledState', () => {
       testDisabled({ hasAccess: true }, false);
     });
   });
-  describe('disableUpgradeCourse', () => {
-    const testDisabled = (data, expected) => {
-      mockHooksData(data);
-      expect(runHook().disableUpgradeCourse).toBe(expected);
-    };
-    it('disable when upgradeUrl is invalid', () => {
-      testDisabled({ upgradeUrl: null }, true);
-    });
-    it('disable when isMasquerading is true and canUpgrade is false', () => {
-      testDisabled({ isMasquerading: true, canUpgrade: false }, true);
-    });
-    it('enable when all conditions are met', () => {
-      testDisabled({ canUpgrade: true }, false);
-    });
-  });
   describe('disableSelectSession', () => {
     const testDisabled = (data, expected) => {
       mockHooksData(data);

src/containers/CoursesPanel/NoCoursesView/index.scss

@@ -1,15 +1,13 @@
-@import "@openedx/paragon/scss/core/core";
-
 #no-courses-content-view {
-  border: 2px solid $light-400;
+  border: 2px solid var(--pgn-color-light-400);
   flex-direction: column;
-  padding-bottom: map-get($spacers, 5);
-  padding-top: map-get($spacers, 5);
+  padding-bottom: var(--pgn-spacing-spacer-5);
+  padding-top: var(--pgn-spacing-spacer-5);
   height: 100%;
 
   & > * {
-    margin-top: map-get($spacers, 3);
-    margin-bottom: map-get($spacers, 3);
+    margin-top: var(--pgn-spacing-spacer-3);
+    margin-bottom: var(--pgn-spacing-spacer-3);
   }
 }
 

src/containers/CoursesPanel/index.scss

@@ -1,5 +1,3 @@
-@import "@openedx/paragon/scss/core/core";
-
 .course-list-heading-container {
   display: flex;
   flex-direction: row;
@@ -8,8 +6,8 @@
 }
 
 .course-list-title {
-  font-size: $h2-font-size;
-  margin: map-get($spacers, 3) 0;
+  font-size: var(--pgn-typography-font-size-h2-base);
+  margin: var(--pgn-spacing-spacer-3) 0;
 }
 
 .course-list-loading {
@@ -24,7 +22,7 @@
   align-self: center;
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .course-list-heading-container {
     flex-direction: column-reverse;
     align-items: flex-start;
@@ -36,7 +34,7 @@
   }
 
   .course-list-title {
-    font-size: $h3-font-size;
-    margin: map-get($spacers, 2) 0;
+    font-size: var(--pgn-typography-font-size-h3-base);
+    margin: var(--pgn-spacing-spacer-2) 0;
   }
 }

src/containers/Dashboard/__snapshots__/index.test.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dashboard snapshots courses loaded, show select session modal, no available dashboards snapshot 1`] = `
+exports[`Dashboard snapshots courses loaded, show select session modal snapshot 1`] = `
 <div
   className="d-flex flex-column p-2 pt-0"
   id="dashboard-container"
@@ -11,6 +11,7 @@ exports[`Dashboard snapshots courses loaded, show select session modal, no avail
     test-page-title
   </h1>
   <Fragment>
+    <DashboardModalSlot />
     <SelectSessionModal />
   </Fragment>
   <div
@@ -43,7 +44,7 @@ exports[`Dashboard snapshots courses still loading snapshot 1`] = `
 </div>
 `;
 
-exports[`Dashboard snapshots there are no courses, there ARE available dashboards snapshot 1`] = `
+exports[`Dashboard snapshots there are no courses snapshot 1`] = `
 <div
   className="d-flex flex-column p-2 pt-0"
   id="dashboard-container"
@@ -54,7 +55,7 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard
     test-page-title
   </h1>
   <Fragment>
-    <EnterpriseDashboardModal />
+    <DashboardModalSlot />
   </Fragment>
   <div
     data-testid="dashboard-content"

src/containers/Dashboard/index.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 
 import { reduxHooks } from 'hooks';
 import { RequestKeys } from 'data/constants/requests';
-import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CoursesPanel from 'containers/CoursesPanel';
+import DashboardModalSlot from 'plugin-slots/DashboardModalSlot';
 
 import LoadingView from './LoadingView';
 import DashboardLayout from './DashboardLayout';
@@ -15,7 +15,6 @@ export const Dashboard = () => {
   hooks.useInitializeDashboard();
   const { pageTitle } = hooks.useDashboardMessages();
   const hasCourses = reduxHooks.useHasCourses();
-  const hasAvailableDashboards = reduxHooks.useHasAvailableDashboards();
   const initIsPending = reduxHooks.useRequestIsPending(RequestKeys.initialize);
   const showSelectSessionModal = reduxHooks.useShowSelectSessionModal();
 
@@ -24,7 +23,7 @@ export const Dashboard = () => {
       <h1 className="sr-only">{pageTitle}</h1>
       {!initIsPending && (
         <>
-          {hasAvailableDashboards && <EnterpriseDashboardModal />}
+          <DashboardModalSlot />
           {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
         </>
       )}

src/containers/Dashboard/index.scss

@@ -1,21 +1,27 @@
-@import "@openedx/paragon/scss/core/core";
-
 .course-list-column {
-  padding: 0 map-get($spacers, 4);
+  padding: 0 var(--pgn-spacing-spacer-4);
 }
 
 .sidebar-column {
-  padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
+  padding: 0 var(--pgn-spacing-spacer-3) 0 var(--pgn-spacing-spacer-1);
+
+  &.not-collapsed {
+    padding-top: var(--pgn-spacing-spacer-2);
+
+    & >:first-child {
+      margin-top: var(--pgn-spacing-spacer-5-5);
+    }
+  }
 }
 
-@include media-breakpoint-down(lg) {
+@media (--pgn-size-breakpoint-max-width-lg) {
   .sidebar-column {
     // grid are inheriting dir="ltr" from the body, so we need to override it
     [dir=ltr] & {
-      padding: 0 map-get($spacers, 3);
+      padding: 0 var(--pgn-spacing-spacer-3);
     }
     [dir=rtl] & {
-      padding: 0 map-get($spacers, 3);
+      padding: 0 var(--pgn-spacing-spacer-3);
     }
   }
-}
+}

src/containers/Dashboard/index.test.jsx

@@ -2,7 +2,6 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
-import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CoursesPanel from 'containers/CoursesPanel';
 
@@ -14,13 +13,12 @@ import Dashboard from '.';
 jest.mock('hooks', () => ({
   reduxHooks: {
     useHasCourses: jest.fn(),
-    useHasAvailableDashboards: jest.fn(),
     useShowSelectSessionModal: jest.fn(),
     useRequestIsPending: jest.fn(),
   },
 }));
 
-jest.mock('containers/EnterpriseDashboardModal', () => 'EnterpriseDashboardModal');
+jest.mock('plugin-slots/DashboardModalSlot', () => 'DashboardModalSlot');
 jest.mock('containers/CoursesPanel', () => 'CoursesPanel');
 jest.mock('./LoadingView', () => 'LoadingView');
 jest.mock('./DashboardLayout', () => 'DashboardLayout');
@@ -38,12 +36,10 @@ describe('Dashboard', () => {
   });
   const createWrapper = ({
     hasCourses,
-    hasAvailableDashboards,
     initIsPending,
     showSelectSessionModal,
   }) => {
     reduxHooks.useHasCourses.mockReturnValueOnce(hasCourses);
-    reduxHooks.useHasAvailableDashboards.mockReturnValueOnce(hasAvailableDashboards);
     reduxHooks.useRequestIsPending.mockReturnValueOnce(initIsPending);
     reduxHooks.useShowSelectSessionModal.mockReturnValueOnce(showSelectSessionModal);
     return shallow(<Dashboard />);
@@ -71,7 +67,6 @@ describe('Dashboard', () => {
     const testView = ({
       props,
       content: [contentName, contentEl],
-      showEnterpriseModal,
       showSelectSessionModal,
     }) => {
       beforeEach(() => { wrapper = createWrapper(props); });
@@ -80,10 +75,6 @@ describe('Dashboard', () => {
       it(`renders ${contentName}`, () => {
         testContent(contentEl);
       });
-      it(`${renderString(showEnterpriseModal)} dashbaord modal`, () => {
-        expect(wrapper.instance.findByType(EnterpriseDashboardModal).length)
-          .toEqual(showEnterpriseModal ? 1 : 0);
-      });
       it(`${renderString(showSelectSessionModal)} select session modal`, () => {
         expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
       });
@@ -92,44 +83,38 @@ describe('Dashboard', () => {
       testView({
         props: {
           hasCourses: false,
-          hasAvailableDashboards: false,
           initIsPending: true,
           showSelectSessionModal: false,
         },
         content: ['LoadingView', <LoadingView />],
-        showEnterpriseModal: false,
         showSelectSessionModal: false,
       });
     });
 
-    describe('courses loaded, show select session modal, no available dashboards', () => {
+    describe('courses loaded, show select session modal', () => {
       testView({
         props: {
           hasCourses: true,
-          hasAvailableDashboards: false,
           initIsPending: false,
           showSelectSessionModal: true,
         },
         content: ['LoadedView', (
           <DashboardLayout><CoursesPanel /></DashboardLayout>
         )],
-        showEnterpriseModal: false,
         showSelectSessionModal: true,
       });
     });
 
-    describe('there are no courses, there ARE available dashboards', () => {
+    describe('there are no courses', () => {
       testView({
         props: {
           hasCourses: false,
-          hasAvailableDashboards: true,
           initIsPending: false,
           showSelectSessionModal: false,
         },
         content: ['Dashboard layout with no courses sidebar and content', (
           <DashboardLayout><CoursesPanel /></DashboardLayout>
         )],
-        showEnterpriseModal: true,
         showSelectSessionModal: false,
       });
     });

src/containers/EnterpriseDashboardModal/__snapshots__/index.test.jsx.snap

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EnterpriseDashboard empty snapshot 1`] = `null`;
-
-exports[`EnterpriseDashboard snapshot 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  onClose={[MockFunction useEnterpriseDashboardHook.handleEscape]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      You have access to the edX, Inc. dashboard
-    </h4>
-    <p>
-      To access the courses available to you through edX, Inc., visit the edX, Inc. dashboard now.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction useEnterpriseDashboardHook.handleClose]}
-        variant="tertiary"
-      >
-        Dismiss
-      </Button>
-      <Button
-        href="/edx-dashboard"
-        onClick={[MockFunction useEnterpriseDashboardHook.handleCTAClick]}
-        type="a"
-      >
-        Go to dashboard
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;

src/containers/EnterpriseDashboardModal/hooks.js

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { StrictDict } from 'utils';
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  showModal: (val) => React.useState(val), // eslint-disable-line
-});
-
-const { modalOpened, modalClosed, modalCTAClicked } = track.enterpriseDashboard;
-
-export const useEnterpriseDashboardHook = () => {
-  const [showModal, setShowModal] = module.state.showModal(true);
-  const dashboard = reduxHooks.useEnterpriseDashboardData();
-
-  const trackOpened = modalOpened(dashboard.enterpriseUUID);
-  const trackClose = modalClosed(dashboard.enterpriseUUID, 'Cancel button');
-  const trackEscape = modalClosed(dashboard.enterpriseUUID, 'Escape');
-
-  const handleCTAClick = modalCTAClicked(dashboard.enterpriseUUID, dashboard.url);
-  const handleClose = () => {
-    trackClose();
-    setShowModal(false);
-  };
-  const handleEscape = () => {
-    trackEscape();
-    setShowModal(false);
-  };
-
-  React.useEffect(() => {
-    if (dashboard && dashboard.label) {
-      trackOpened();
-    }
-  }, []); // eslint-disable-line
-
-  return {
-    showModal,
-    handleCTAClick,
-    handleClose,
-    handleEscape,
-    dashboard,
-  };
-};
-
-export default useEnterpriseDashboardHook;

src/containers/EnterpriseDashboardModal/hooks.test.js

@@ -1,75 +0,0 @@
-import { MockUseState } from 'testUtils';
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
-
-import * as hooks from './hooks';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useEnterpriseDashboardData: jest.fn(),
-  },
-}));
-jest.mock('tracking', () => {
-  const modalOpenedEvent = jest.fn();
-  const modalClosedEvent = jest.fn();
-  const modalCTAClickedEvent = jest.fn();
-  return {
-    __esModule: true,
-    default: {
-      enterpriseDashboard: {
-        modalOpenedEvent,
-        modalClosedEvent,
-        modalCTAClickedEvent,
-        modalOpened: jest.fn(() => modalOpenedEvent),
-        modalClosed: jest.fn(() => modalClosedEvent),
-        modalCTAClicked: jest.fn(() => modalCTAClickedEvent),
-      },
-    },
-  };
-});
-
-const state = new MockUseState(hooks);
-
-const enterpriseDashboardData = { label: 'edX, Inc.', url: '/edx-dashboard' };
-
-describe('EnterpriseDashboard hooks', () => {
-  reduxHooks.useEnterpriseDashboardData.mockReturnValue({ ...enterpriseDashboardData });
-
-  describe('state values', () => {
-    state.testGetter(state.keys.showModal);
-  });
-
-  describe('behavior', () => {
-    let out;
-
-    beforeEach(() => {
-      state.mock();
-      out = hooks.useEnterpriseDashboardHook();
-    });
-    afterEach(state.restore);
-
-    test('useEnterpriseDashboardHook to return dashboard data from redux hooks', () => {
-      expect(out.dashboard).toMatchObject(enterpriseDashboardData);
-    });
-
-    test('modal initializes to shown when rendered and closes on click', () => {
-      state.expectInitializedWith(state.keys.showModal, true);
-      out.handleClose();
-      expect(state.values.showModal).toEqual(false);
-    });
-
-    test('modal initializes to shown when rendered and closes on escape', () => {
-      state.expectInitializedWith(state.keys.showModal, true);
-      out.handleEscape();
-      expect(state.values.showModal).toEqual(false);
-    });
-
-    test('CTA click tracks modalCTAClicked', () => {
-      out.handleCTAClick();
-      expect(track.enterpriseDashboard.modalCTAClicked).toHaveBeenCalledWith(
-        enterpriseDashboardData.enterpriseUUID,
-        enterpriseDashboardData.url,
-      );
-    });
-  });
-});

src/containers/EnterpriseDashboardModal/index.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-// import PropTypes from 'prop-types';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  ModalDialog, ActionRow, Button,
-} from '@openedx/paragon';
-
-import messages from './messages';
-import useEnterpriseDashboardHook from './hooks';
-
-export const EnterpriseDashboardModal = () => {
-  const { formatMessage } = useIntl();
-  const {
-    showModal,
-    handleClose,
-    handleCTAClick,
-    handleEscape,
-    dashboard,
-  } = useEnterpriseDashboardHook();
-  if (!dashboard || !dashboard.label) {
-    return null;
-  }
-  return (
-    <ModalDialog
-      isOpen={showModal}
-      onClose={handleEscape}
-      hasCloseButton={false}
-      title=""
-    >
-      <div
-        className="bg-white p-3 rounded shadow"
-        style={{ textAlign: 'start' }}
-      >
-        <h4>
-          {formatMessage(messages.enterpriseDialogHeader, {
-            label: dashboard.label,
-          })}
-        </h4>
-        <p>
-          {formatMessage(messages.enterpriseDialogBody, {
-            label: dashboard.label,
-          })}
-        </p>
-        <ActionRow>
-          <Button variant="tertiary" onClick={handleClose}>
-            {formatMessage(messages.enterpriseDialogDismissButton)}
-          </Button>
-          <Button type="a" href={dashboard.url} onClick={handleCTAClick}>
-            {formatMessage(messages.enterpriseDialogConfirmButton)}
-          </Button>
-        </ActionRow>
-      </div>
-    </ModalDialog>
-  );
-};
-
-EnterpriseDashboardModal.propTypes = {};
-
-export default EnterpriseDashboardModal;

src/containers/EnterpriseDashboardModal/index.test.jsx

@@ -1,29 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-import EnterpriseDashboard from '.';
-
-import useEnterpriseDashboardHook from './hooks';
-
-jest.mock('./hooks', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-describe('EnterpriseDashboard', () => {
-  test('snapshot', () => {
-    const hookData = {
-      dashboard: { label: 'edX, Inc.', url: '/edx-dashboard' },
-      showDialog: false,
-      handleClose: jest.fn().mockName('useEnterpriseDashboardHook.handleClose'),
-      handleCTAClick: jest.fn().mockName('useEnterpriseDashboardHook.handleCTAClick'),
-      handleEscape: jest.fn().mockName('useEnterpriseDashboardHook.handleEscape'),
-    };
-    useEnterpriseDashboardHook.mockReturnValueOnce({ ...hookData });
-    const el = shallow(<EnterpriseDashboard />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  test('empty snapshot', () => {
-    useEnterpriseDashboardHook.mockReturnValueOnce({});
-    const el = shallow(<EnterpriseDashboard />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-});

src/containers/EnterpriseDashboardModal/messages.js

@@ -1,26 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  enterpriseDialogHeader: {
-    id: 'leanerDashboard.enterpriseDialogHeader',
-    defaultMessage: 'You have access to the {label} dashboard',
-    description: 'title for enterpise dashboard dialog',
-  },
-  enterpriseDialogBody: {
-    id: 'leanerDashboard.enterpriseDialogBody',
-    defaultMessage: 'To access the courses available to you through {label}, visit the {label} dashboard now.',
-    description: 'Body text for enterpise dashboard dialog',
-  },
-  enterpriseDialogDismissButton: {
-    id: 'leanerDashboard.enterpriseDialogDismissButton',
-    defaultMessage: 'Dismiss',
-    description: 'Dismiss button to cancel visiting dashboard',
-  },
-  enterpriseDialogConfirmButton: {
-    id: 'leanerDashboard.enterpriseDialogConfirmButton',
-    defaultMessage: 'Go to dashboard',
-    description: 'Confirm button to go to the dashboard url',
-  },
-});
-
-export default messages;

src/containers/LearnerDashboardHeader/LearnerDashboardMenu.jsx

@@ -17,11 +17,11 @@ const getLearnerHeaderMenu = (
       content: formatMessage(messages.course),
       isActive: true,
     },
-    {
+    ...(getConfig().ENABLE_PROGRAMS ? [{
       type: 'item',
       href: `${urls.programsUrl()}`,
       content: formatMessage(messages.program),
-    },
+    }] : []),
     {
       type: 'item',
       href: `${urls.baseAppUrl(courseSearchUrl)}`,
@@ -32,11 +32,11 @@ const getLearnerHeaderMenu = (
     },
   ],
   secondaryMenu: [
-    {
+    ...(getConfig().SUPPORT_URL ? [{
       type: 'item',
       href: `${getConfig().SUPPORT_URL}`,
       content: formatMessage(messages.help),
-    },
+    }] : []),
   ],
   userMenu: [
     {
@@ -70,6 +70,7 @@ const getLearnerHeaderMenu = (
       ],
     },
   ],
-});
+}
+);
 
 export default getLearnerHeaderMenu;

src/containers/LearnerDashboardHeader/__snapshots__/index.test.jsx.snap

@@ -12,11 +12,6 @@ exports[`LearnerDashboardHeader render 1`] = `
           "isActive": true,
           "type": "item",
         },
-        {
-          "content": "Programs",
-          "href": "http://localhost:18000/dashboard/programs",
-          "type": "item",
-        },
         {
           "content": "Discover New",
           "href": "http://localhost:18000/course-search-url",
@@ -25,15 +20,7 @@ exports[`LearnerDashboardHeader render 1`] = `
         },
       ]
     }
-    secondaryMenuItems={
-      [
-        {
-          "content": "Help",
-          "href": "http://localhost:18000/support",
-          "type": "item",
-        },
-      ]
-    }
+    secondaryMenuItems={[]}
     userMenuItems={
       [
         {

src/containers/LearnerDashboardHeader/hooks.test.js

@@ -56,7 +56,7 @@ describe('LearnerDashboardHeader hooks', () => {
         username: 'test',
       };
       const learnerHomeHeaderMenu = useLearnerDashboardHeaderMenu({ courseSearchUrl, authenticatedUser });
-      expect(learnerHomeHeaderMenu.mainMenu.length).toBe(3);
+      expect(learnerHomeHeaderMenu.mainMenu.length).toBe(2);
     });
   });
 

src/containers/LearnerDashboardHeader/index.test.jsx

@@ -29,7 +29,19 @@ describe('LearnerDashboardHeader', () => {
     expect(wrapper.instance.findByType('ConfirmEmailBanner')).toHaveLength(1);
     expect(wrapper.instance.findByType('MasqueradeBar')).toHaveLength(1);
     expect(wrapper.instance.findByType(Header)).toHaveLength(1);
-    wrapper.instance.findByType(Header)[0].props.mainMenuItems[2].onClick();
+    wrapper.instance.findByType(Header)[0].props.mainMenuItems[1].onClick();
     expect(findCoursesNavClicked).toHaveBeenCalledWith(urls.baseAppUrl('/course-search-url'));
+    expect(wrapper.instance.findByType(Header)[0].props.secondaryMenuItems.length).toBe(0);
+  });
+
+  test('should display Help link if SUPPORT_URL is set', () => {
+    mergeConfig({ SUPPORT_URL: 'http://localhost:18000/support' });
+    const wrapper = shallow(<LearnerDashboardHeader />);
+    expect(wrapper.instance.findByType(Header)[0].props.secondaryMenuItems.length).toBe(1);
+  });
+  test('should display Programs link if it is enabled by configuration', () => {
+    mergeConfig({ ENABLE_PROGRAMS: true });
+    const wrapper = shallow(<LearnerDashboardHeader />);
+    expect(wrapper.instance.findByType(Header)[0].props.mainMenuItems.length).toBe(3);
   });
 });

src/containers/MasqueradeBar/index.scss

@@ -1,38 +1,36 @@
-@import "@openedx/paragon/scss/core/core";
-
 .masquerade-bar {
   display: flex;
   align-items: flex-start;
-  padding: map-get($spacers, 3);
-  margin-bottom: map-get($spacers, 2);
+  padding: var(--pgn-spacing-spacer-3);
+  margin-bottom: var(--pgn-spacing-spacer-2);
 
   .masquerade-form-label {
-    padding: map-get($spacers, 2) map-get($spacers, 3);
+    padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3);
     display: flex;
     align-items: center;
     margin-bottom: 0;
     white-space: nowrap;
 
     &>.pgn__icon {
-      margin-right: map-get($spacers, 3);
+      margin-right: var(--pgn-spacing-spacer-3);
     }
   }
 
   .masquerade-form-input {
     margin-bottom: 0;
     flex-grow: 1;
-    max-width: map-get($grid-breakpoints, 'md');
+    max-width: var(--pgn-size-breakpoint-md);
   }
 
   .masquerade-chip {
-    padding: map-get($spacers, 2) map-get($spacers, 3);
-    font-size: $font-size-base;
+    padding: var(--pgn-spacing-spacer-2) var(--pgn-spacing-spacer-3);
+    font-size: var(--pgn-typography-font-size-base);
   }
 }
 
-@include media-breakpoint-down(md) {
+@media (--pgn-size-breakpoint-max-width-md) {
   .masquerade-bar {
     margin: auto;
-    padding: map-get($spacers, 3) map-get($spacers, 4);
+    padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
   }
-}
+}

src/containers/UnenrollConfirmModal/constants.js

@@ -1,5 +1,6 @@
 /* eslint-disable quotes */
 import { StrictDict } from 'utils';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
 export const reasonKeys = StrictDict({
   prereqs: 'prereqs',
@@ -26,7 +27,7 @@ export const order = [
   reasonKeys.easy,
 ];
 
-const messages = StrictDict({
+const messages = defineMessages({
   [reasonKeys.prereqs]: {
     id: 'learner-dash.unenrollConfirm.reasons.prereqs',
     description: 'Unenroll reason option - missing prerequisites',

src/data/redux/app/selectors/appSelectors.js

@@ -10,10 +10,7 @@ export const numCourses = createSelector(
   (courseData) => Object.keys(courseData).length,
 );
 export const hasCourses = createSelector([module.numCourses], (num) => num > 0);
-export const hasAvailableDashboards = createSelector(
-  [simpleSelectors.enterpriseDashboard],
-  (data) => data !== null && data.isLearnerPortalEnabled === true,
-);
+
 export const showSelectSessionModal = createSelector(
   [simpleSelectors.selectSessionModal],
   (data) => data.cardId != null,
@@ -22,6 +19,5 @@ export const showSelectSessionModal = createSelector(
 export default StrictDict({
   numCourses,
   hasCourses,
-  hasAvailableDashboards,
   showSelectSessionModal,
 });

src/data/redux/app/selectors/appSelectors.test.js

@@ -17,15 +17,6 @@ describe('basic app selectors', () => {
       expect(cb(0)).toEqual(false);
     });
   });
-  describe('hasAvailableDashboards', () => {
-    it('returns true iff the enterpriseDashboard field is populated and learner portal is enabled', () => {
-      const { preSelectors, cb } = appSelectors.hasAvailableDashboards;
-      expect(preSelectors).toEqual([simpleSelectors.enterpriseDashboard]);
-      expect(cb({ isLearnerPortalEnabled: true })).toEqual(true);
-      expect(cb({ isLearnerPortalEnabled: false })).toEqual(false);
-      expect(cb(null)).toEqual(false);
-    });
-  });
   describe('showSelectSessionModal', () => {
     it('returns true if the selectSessionModal cardId is not null', () => {
       const { preSelectors, cb } = appSelectors.showSelectSessionModal;

src/data/redux/app/selectors/courseCard.js

@@ -52,7 +52,6 @@ export const courseCard = StrictDict({
 
       homeUrl: courseRun.homeUrl,
       marketingUrl: courseRun.marketingUrl,
-      upgradeUrl: courseRun.upgradeUrl,
 
       progressUrl: baseAppUrl(courseRun.progressUrl),
       resumeUrl: baseAppUrl(courseRun.resumeUrl), // resume will route this to learning mfe.

src/data/redux/app/selectors/courseCard.test.js

@@ -156,7 +156,6 @@ describe('courseCard selectors module', () => {
 
           homeUrl: 'test-home-url',
           marketingUrl: 'test-marketing-url',
-          upgradeUrl: 'test-upgrade-url',
 
           progressUrl: 'test-progress-url',
           resumeUrl: 'test-resume-url',
@@ -181,10 +180,9 @@ describe('courseCard selectors module', () => {
       it('passes minPassingGrade floored from float to a percentage value', () => {
         expect(selected.minPassingGrade).toEqual(93);
       });
-      it('passes [homeUrl, marketingUrl, upgradeUrl]', () => {
+      it('passes [homeUrl, marketingUrl]', () => {
         expect(selected.homeUrl).toEqual(testData.homeUrl);
         expect(selected.marketingUrl).toEqual(testData.marketingUrl);
-        expect(selected.upgradeUrl).toEqual(testData.upgradeUrl);
       });
       it('passes [progressUrl, unenrollUrl, resumeUrl], converted to baseAppUrl', () => {
         expect(selected.progressUrl).toEqual(baseAppUrl(testData.progressUrl));

src/data/redux/app/selectors/simpleSelectors.test.js

@@ -36,12 +36,6 @@ describe('app simple selectors', () => {
       expect(preSelectors).toEqual([appSelector]);
       expect(cb(testState.app)).toEqual(testString);
     });
-    test('enterpriseDashboard returns empty object if data returns null', () => {
-      testState = { app: { enterpriseDashboard: null } };
-      const { preSelectors, cb } = simpleSelectors.enterpriseDashboard;
-      expect(preSelectors).toEqual([appSelector]);
-      expect(cb(testState.app)).toEqual({});
-    });
     describe('cardSimpleSelectors', () => {
       keys = keyStore(cardSimpleSelectors);
       test.each([

src/data/redux/hooks/app.js

@@ -18,7 +18,6 @@ export const useSocialShareSettings = () => useSelector(selectors.socialShareSet
 
 /** global-level meta-selectors **/
 export const useHasCourses = () => useSelector(selectors.hasCourses);
-export const useHasAvailableDashboards = () => useSelector(selectors.hasAvailableDashboards);
 export const useCurrentCourseList = (opts) => useSelector(
   state => selectors.currentList(state, opts),
 );

src/data/services/lms/api.js

@@ -50,12 +50,6 @@ export const logEvent = ({ eventName, data, courseId }) => post(urls.event(), {
   event: JSON.stringify(data),
 });
 
-export const logUpgrade = ({ courseId }) => module.logEvent({
-  eventName: eventNames.upgradeButtonClickedEnrollment,
-  courseId,
-  data: { location: 'learner-dashboard' },
-});
-
 export const logShare = ({ courseId, site }) => module.logEvent({
   eventName: eventNames.shareClicked,
   courseId,
@@ -78,7 +72,6 @@ export default {
   updateEntitlementEnrollment,
   deleteEntitlementEnrollment,
   logEvent,
-  logUpgrade,
   logShare,
   createCreditRequest,
 };

src/data/services/lms/api.test.js

@@ -130,13 +130,6 @@ describe('lms api methods', () => {
       beforeEach(() => {
         jest.spyOn(api, moduleKeys.logEvent).mockImplementation(logEvent);
       });
-      test('logUpgrade sends enrollment upgrade click event with learner dashboard location', () => {
-        expect(api.logUpgrade({ courseId })).toEqual(logEvent({
-          eventName: eventNames.upgradeButtonClickedEnrollment,
-          courseId,
-          data: { location: 'learner-dashboard' },
-        }));
-      });
       test('logShare sends share clicke vent with course id, side and location', () => {
         const site = 'test-site';
         expect(api.logShare({ courseId, site })).toEqual(logEvent({

src/data/services/lms/fakeData/courses.js

@@ -779,9 +779,6 @@ export const compileCourseRunData = ({ courseName, ...data }, index) => {
     courseProvider: getOption(providerOptions, index),
     programs: getOption(programsOptions, index),
   };
-  if (out.enrollment.canUpgrade) {
-    out.courseRun.upgradeUrl = 'test-upgrade-url';
-  }
   return out;
 };
 

src/index.jsx

@@ -2,8 +2,8 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
 import {
   Route, Navigate, Routes,
 } from 'react-router-dom';
@@ -30,23 +30,29 @@ import App from './App';
 import NoticesWrapper from './components/NoticesWrapper';
 
 subscribe(APP_READY, () => {
-  ReactDOM.render(
-    <AppProvider store={store}>
-      <NoticesWrapper>
-        <Routes>
-          <Route path="/" element={<PageWrap><App /></PageWrap>} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
-      </NoticesWrapper>
-    </AppProvider>,
-    document.getElementById('root'),
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
+    <StrictMode>
+      <AppProvider store={store}>
+        <NoticesWrapper>
+          <Routes>
+            <Route path="/" element={<PageWrap><App /></PageWrap>} />
+            <Route path="*" element={<Navigate to="/" replace />} />
+          </Routes>
+        </NoticesWrapper>
+      </AppProvider>
+    </StrictMode>,
   );
 });
 
 subscribe(APP_INIT_ERROR, (error) => {
-  ReactDOM.render(
-    <ErrorPage message={error.message} />,
-    document.getElementById('root'),
+  const root = createRoot(document.getElementById('root'));
+
+  root.render(
+    <StrictMode>
+      <ErrorPage message={error.message} />
+    </StrictMode>,
   );
 });
 

src/index.test.jsx

@@ -1,5 +1,3 @@
-import { render } from 'react-dom';
-
 import {
   APP_INIT_ERROR,
   APP_READY,
@@ -11,9 +9,20 @@ import {
 import { configuration } from './config';
 import * as app from '.';
 
-jest.mock('react-dom', () => ({
-  render: jest.fn(),
-}));
+// These need to be var not let so they get hoisted
+// and can be used by jest.mock (which is also hoisted)
+var mockRender; // eslint-disable-line no-var
+var mockCreateRoot; // eslint-disable-line no-var
+jest.mock('react-dom/client', () => {
+  mockRender = jest.fn();
+  mockCreateRoot = jest.fn(() => ({
+    render: mockRender,
+  }));
+
+  return ({
+    createRoot: mockCreateRoot,
+  });
+});
 
 jest.mock('@edx/frontend-platform', () => ({
   mergeConfig: jest.fn(),
@@ -32,7 +41,9 @@ describe('app registry', () => {
   let getElement;
 
   beforeEach(() => {
-    render.mockClear();
+    mockCreateRoot.mockClear();
+    mockRender.mockClear();
+
     getElement = window.document.getElementById;
     window.document.getElementById = jest.fn(id => ({ id }));
   });
@@ -44,18 +55,16 @@ describe('app registry', () => {
     const callArgs = subscribe.mock.calls[0];
     expect(callArgs[0]).toEqual(APP_READY);
     callArgs[1]();
-    const [rendered, target] = render.mock.calls[0];
+    const [rendered] = mockRender.mock.calls[0];
     expect(rendered).toMatchSnapshot();
-    expect(target).toEqual(document.getElementById('root'));
   });
   test('subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element', () => {
     const callArgs = subscribe.mock.calls[1];
     expect(callArgs[0]).toEqual(APP_INIT_ERROR);
     const error = { message: 'test-error-message' };
     callArgs[1](error);
-    const [rendered, target] = render.mock.calls[0];
+    const [rendered] = mockRender.mock.calls[0];
     expect(rendered).toMatchSnapshot();
-    expect(target).toEqual(document.getElementById('root'));
   });
   test('initialize is called with requireAuthenticatedUser', () => {
     expect(initialize).toHaveBeenCalledTimes(1);

src/plugin-slots/CourseBannerSlot/README.md

@@ -0,0 +1,48 @@
+# Course Card Action Slot
+
+### Slot ID: `org.openedx.frontend.learner_dashboard.course_card_banner.v1`
+### Props:
+* `cardId`
+
+## Description
+
+This slot is used for replacing or adding content for the `CourseBanner` component. This banner is rendered as a child of the `CourseCard`.
+
+The default CourseBanner looks like this when audit access has expired for the course:
+![Screenshot of the default CourseBanner when audit access has expired](./images/course_banner_slot_default.png)
+
+## Example
+
+The following `env.config.jsx` will render a custom implemenation of a CourseBanner under every `CourseCard`.
+
+![Screenshot of custom banner added under CourseCard](./images/course_banner_slot_default.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { Alert } from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.learner_dashboard.course_card_banner.v1': {
+      keepDefault: false,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'org.openedx.frontend.learner_dashboard.course_card_banner.v1',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: ({ cardId }) => (
+              <Alert variant="info" className="mb-0">
+                Course banner for course with {cardId}
+              </Alert>
+            ),
+          },
+        },
+      ],
+    },
+  },
+}
+
+export default config;
+```

src/plugin-slots/CourseBannerSlot/index.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import CourseBanner from 'containers/CourseCard/components/CourseCardBanners/CourseBanner';
+
+const CourseBannerSlot = ({ cardId }) => (
+  <PluginSlot
+    id="org.openedx.frontend.learner_dashboard.course_card_banner.v1"
+    pluginProps={{
+      cardId,
+    }}
+  >
+    <CourseBanner
+      cardId={cardId}
+    />
+  </PluginSlot>
+);
+
+CourseBannerSlot.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseBannerSlot;

src/plugin-slots/CourseCardActionSlot/README.md

@@ -1,6 +1,10 @@
 # Course Card Action Slot
 
-### Slot ID: `course_card_action_slot`
+### Slot ID: `org.openedx.frontend.learner_dashboard.course_card_action.v1`
+
+### Slot ID Aliases
+* `course_card_action_slot`
+
 ### Props:
 * `cardId`
 
@@ -20,7 +24,7 @@ import ActionButton from 'containers/CourseCard/components/CourseCardActions/Act
 
 const config = {
   pluginSlots: {
-    course_card_action_slot: {
+    'org.openedx.frontend.learner_dashboard.course_card_action.v1': {
       keepDefault: false,
       plugins: [
         {

src/plugin-slots/CourseCardActionSlot/index.jsx

@@ -2,27 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
-import { reduxHooks } from 'hooks';
-import UpgradeButton from 'containers/CourseCard/components/CourseCardActions/UpgradeButton';
-
-const CourseCardActionSlot = ({ cardId }) => {
-  const { isEntitlement } = reduxHooks.useCardEntitlementData(cardId);
-  const {
-    isVerified,
-    isExecEd2UCourse,
-  } = reduxHooks.useCardEnrollmentData(cardId);
-
-  return (
-    <PluginSlot
-      id="course_card_action_slot"
-      pluginProps={{
-        cardId,
-      }}
-    >
-      {!(isEntitlement || isVerified || isExecEd2UCourse) && <UpgradeButton cardId={cardId} />}
-    </PluginSlot>
-  );
-};
+const CourseCardActionSlot = ({ cardId }) => (
+  <PluginSlot
+    id="org.openedx.frontend.learner_dashboard.course_card_action.v1"
+    idAliases={['course_card_action_slot']}
+    pluginProps={{
+      cardId,
+    }}
+  />
+);
 
 CourseCardActionSlot.propTypes = {
   cardId: PropTypes.string.isRequired,

src/plugin-slots/CourseListSlot/README.md

@@ -1,6 +1,9 @@
 # Course List Slot
 
-### Slot ID: `course_list_slot`
+### Slot ID: `org.openedx.frontend.learner_dashboard.course_list.v1`
+
+### Slot ID Aliases
+* `course_list_slot`
 
 ## Plugin Props
 
@@ -25,7 +28,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    course_list_slot: {
+    'org.openedx.frontend.learner_dashboard.course_list.v1': {
       // Hide the default CourseList component
       keepDefault: false,
       plugins: [

src/plugin-slots/CourseListSlot/index.jsx

@@ -4,7 +4,11 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { CourseList, courseListDataShape } from 'containers/CoursesPanel/CourseList';
 
 export const CourseListSlot = ({ courseListData }) => (
-  <PluginSlot id="course_list_slot" pluginProps={{ courseListData }}>
+  <PluginSlot
+    id="org.openedx.frontend.learner_dashboard.course_list.v1"
+    idAliases={['course_list_slot']}
+    pluginProps={{ courseListData }}
+  >
     <CourseList courseListData={courseListData} />
   </PluginSlot>
 );

src/plugin-slots/DashboardModalSlot/README.md

@@ -0,0 +1,41 @@
+# Dashboard Modal Slot
+
+### Slot ID: `org.openedx.frontend.learner_dashboard.dashboard_modal.v1`
+
+### https://github.com/openedx/frontend-plugin-framework/blob/master/docs/decisions/0003-slot-naming-and-life-cycle.rst#1-naming-format
+
+## Description
+
+This slot is used for the modal on a dashboard.
+The following `env.config.jsx` will render the modal.
+
+## Example
+
+Learner dashboard will show modal
+![Screenshot of the dashboard modal](./images/dashboard_modal_slot.png)
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+import { ModalDialog } from '@openedx/paragon';
+
+const config = {
+  pluginSlots: {
+    org.openedx.frontend.learner_dashboard.dashboard_modal.v1: {
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Insert,
+          widget: {
+            id: 'dashboard_modal',
+            type: DIRECT_PLUGIN,
+            priority: 60,
+            RenderWidget: 
+              <ModalDialog title="Modal that appears on learner dashboard" />,
+          },
+        },
+      ],
+    }
+  },
+}
+
+export default config;
+```

src/plugin-slots/DashboardModalSlot/index.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+
+const DashboardModalSlot = () => (
+  <PluginSlot id="org.openedx.frontend.learner_dashboard.dashboard_modal.v1" />
+);
+
+export default DashboardModalSlot;

src/plugin-slots/FooterSlot/README.md

@@ -1,12 +1,15 @@
 # Footer Slot
 
-### Slot ID: `footer_slot`
+### Slot ID: `org.openedx.frontend.layout.footer.v1`
+
+### Slot ID Aliases
+* `footer_slot`
 
 ## Description
 
 This slot is used to replace/modify/hide the footer.
 
-The implementation of the `FooterSlot` component lives in [the `frontend-slot-footer` repository](https://github.com/openedx/frontend-slot-footer/).
+The implementation of the `FooterSlot` component lives in [the `frontend-component-footer` repository](https://github.com/openedx/frontend-component-footer/).
 
 ## Example
 
@@ -23,7 +26,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    footer_slot: {
+    'org.openedx.frontend.layout.footer.v1': {
       plugins: [
         {
           // Hide the default footer

src/plugin-slots/NoCoursesViewSlot/README.md

@@ -1,6 +1,9 @@
 # No Courses View Slot
 
-### Slot ID: `no_courses_view_slot`
+### Slot ID: `org.openedx.frontend.learner_dashboard.no_courses_view.v1`
+
+### Slot ID Aliases
+* `no_courses_view_slot`
 
 ## Description
 
@@ -21,7 +24,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-    no_courses_view_slot: {
+    'org.openedx.frontend.learner_dashboard.no_courses_view.v1': {
       // Hide the default NoCoursesView component
       keepDefault: false,
       plugins: [

src/plugin-slots/NoCoursesViewSlot/index.jsx

@@ -4,7 +4,10 @@ import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import NoCoursesView from 'containers/CoursesPanel/NoCoursesView';
 
 export const NoCoursesViewSlot = () => (
-  <PluginSlot id="no_courses_view_slot">
+  <PluginSlot
+    id="org.openedx.frontend.learner_dashboard.no_courses_view.v1"
+    idAliases={['no_courses_view_slot']}
+  >
     <NoCoursesView />
   </PluginSlot>
 );

src/plugin-slots/README.md

@@ -1,7 +1,8 @@
 # `frontend-app-learner-dashboard` Plugin Slots
 
-* [`course_card_action_slot`](./CourseCardActionSlot/)
-* [`footer_slot`](./FooterSlot/)
-* [`widget_sidebar_slot`](./WidgetSidebarSlot/)
-* [`course_list_slot`](./CourseListSlot/)
-* [`no_courses_view_slot`](./NoCoursesViewSlot/)
+* [`org.openedx.frontend.learner_dashboard.course_card_action.v1`](./CourseCardActionSlot/)
+* [`org.openedx.frontend.layout.footer.v1`](./FooterSlot/)
+* [`org.openedx.frontend.learner_dashboard.widget_sidebar.v1`](./WidgetSidebarSlot/)
+* [`org.openedx.frontend.learner_dashboard.course_list.v1`](./CourseListSlot/)
+* [`org.openedx.frontend.learner_dashboard.no_courses_view.v1`](./NoCoursesViewSlot/)
+* [`org.openedx.frontend.learner_dashboard.dashboard_modal.v1`](./DashboardModalSlot)

src/plugin-slots/WidgetSidebarSlot/README.md

@@ -1,6 +1,9 @@
 # Widget Sidebar Slot
 
-### Slot ID: `widget_sidebar_slot`
+### Slot ID: `org.openedx.frontend.learner_dashboard.widget_sidebar.v1`
+
+### Slot ID Aliases
+* `widget_sidebar_slot`
 
 ## Description
 
@@ -21,7 +24,7 @@ import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-frame
 
 const config = {
   pluginSlots: {
-     widget_sidebar_slot: {
+     'org.openedx.frontend.learner_dashboard.widget_sidebar.v1': {
       // Hide the default LookingForChallenge component
       keepDefault: false,
       plugins: [

src/plugin-slots/WidgetSidebarSlot/__snapshots__/index.test.jsx.snap

@@ -2,7 +2,12 @@
 
 exports[`WidgetSidebar snapshots 1`] = `
 <PluginSlot
-  id="widget_sidebar_slot"
+  id="org.openedx.frontend.learner_dashboard.widget_sidebar.v1"
+  idAliases={
+    [
+      "widget_sidebar_slot",
+    ]
+  }
 >
   <LookingForChallengeWidget />
 </PluginSlot>

src/plugin-slots/WidgetSidebarSlot/index.jsx

@@ -5,7 +5,10 @@ import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget';
 
 // eslint-disable-next-line arrow-body-style
 export const WidgetSidebarSlot = () => (
-  <PluginSlot id="widget_sidebar_slot">
+  <PluginSlot
+    id="org.openedx.frontend.learner_dashboard.widget_sidebar.v1"
+    idAliases={['widget_sidebar_slot']}
+  >
     <LookingForChallengeWidget />
   </PluginSlot>
 );

src/setupTest.jsx

@@ -1,6 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom';
-import '@testing-library/jest-dom/extend-expect';
 
 jest.mock('react', () => ({
   ...jest.requireActual('react'),

src/test/app.test.jsx

@@ -9,7 +9,6 @@ import {
   within,
   prettyDOM,
 } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 import {
   initialize,
   mergeConfig,

src/tracking/constants.js

@@ -2,7 +2,6 @@ import { StrictDict } from 'utils';
 
 export const categories = StrictDict({
   dashboard: 'dashboard',
-  upgrade: 'upgrade',
   userEngagement: 'user-engagement',
   searchButton: 'search_button',
   credit: 'credit',
@@ -14,9 +13,6 @@ export const events = StrictDict({
   courseImageClicked: 'courseImageClicked',
   courseTitleClicked: 'courseTitleClicked',
   courseOptionsDropdownClicked: 'courseOptionsDropdownClicked',
-  upgradeButtonClicked: 'upgradeButtonClicked',
-  upgradeButtonClickedEnrollment: 'upgradeButtonClickedEnrollment',
-  upgradeButtonClickedUpsell: 'upgradeButtonClickedUpsell',
   shareClicked: 'shareClicked',
   userSettingsChanged: 'userSettingsChanged',
   newSession: 'newSession',
@@ -24,21 +20,13 @@ export const events = StrictDict({
   leaveSession: 'leaveSession',
   unenrollReason: 'unenrollReason',
   entitlementUnenrollReason: 'entitlementUnenrollReason',
-  enterpriseDashboardModalOpened: 'enterpriseDashboardModalOpened',
-  enterpriseDashboardModalCTAClicked: 'enterpriseDashboardModalCTAClicked',
-  enterpriseDashboardModalClosed: 'enterpriseDashboardModalClosed',
 });
 
-const learnerPortal = 'edx.ui.enterprise.lms.dashboard.learner_portal_modal';
-
 export const eventNames = StrictDict({
   enterCourseClicked: 'edx.bi.dashboard.enter_course.clicked',
   courseImageClicked: 'edx.bi.dashboard.course_image.clicked',
   courseTitleClicked: 'edx.bi.dashboard.course_title.clicked',
   courseOptionsDropdownClicked: 'edx.bi.dashboard.course_options_dropdown.clicked',
-  upgradeButtonClicked: 'edx.bi.dashboard.upgrade_button.clicked',
-  upgradeButtonClickedEnrollment: 'edx.course.enrollment.upgrade.clicked',
-  upgradeButtonClickedUpsell: 'edx.bi.ecommerce.upsell_links_clicked',
   shareClicked: 'edx.course.share_clicked',
   userSettingsChanged: 'edx.user.settings.changed',
   newSession: 'course-dashboard.new-session',
@@ -46,9 +34,6 @@ export const eventNames = StrictDict({
   leaveSession: 'course-dashboard.leave-session',
   unenrollReason: 'unenrollment_reason.selected',
   entitlementUnenrollReason: 'entitlement_unenrollment_reason.selected',
-  enterpriseDashboardModalOpened: `${learnerPortal}.opened`,
-  enterpriseDashboardModalCTAClicked: `${learnerPortal}.dashboard_cta.clicked`,
-  enterpriseDashboardModalClosed: `${learnerPortal}.closed`,
   findCoursesClicked: 'edx.bi.dashboard.find_courses_button.clicked',
   purchaseCredit: 'edx.bi.credit.clicked_purchase_credit',
   filterClicked: 'course-dashboard.filter.clicked',

src/tracking/index.js

@@ -1,7 +1,6 @@
 import course from './trackers/course';
 import credit from './trackers/credit';
 import engagement from './trackers/engagement';
-import enterpriseDashboard from './trackers/enterpriseDashboard';
 import entitlements from './trackers/entitlements';
 import socialShare from './trackers/socialShare';
 import findCourses from './trackers/findCourses';
@@ -11,7 +10,6 @@ export default {
   course,
   credit,
   engagement,
-  enterpriseDashboard,
   entitlements,
   socialShare,
   findCourses,

src/tracking/trackers/course.js

@@ -1,15 +1,7 @@
-import api from 'data/services/lms/api';
 import { createEventTracker, createLinkTracker } from 'data/services/segment/utils';
 import { categories, eventNames } from '../constants';
 import * as module from './course';
 
-export const upsellOptions = {
-  linkName: 'course_dashboard_green',
-  linkType: 'button',
-  pageName: 'course_dashboard',
-  linkCategory: 'green_update',
-};
-
 // Utils/Helpers
 /**
  * Generate a segement event tracker for a given course event.
@@ -31,20 +23,6 @@ export const courseLinkTracker = (eventName) => (courseId, href) => (
   createLinkTracker(module.courseEventTracker(eventName, courseId), href)
 );
 
-// Upgrade Events
-/**
- * There are currently multiple tracked api events for the upgrade event, with different targets.
- * Goal here is to split out the tracked events for easier testing.
- */
-export const upgradeButtonClicked = (courseId) => createEventTracker(
-  eventNames.upgradeButtonClicked,
-  { category: categories.upgrade, label: courseId },
-);
-export const upgradeButtonClickedUpsell = (courseId) => createEventTracker(
-  eventNames.upgradeButtonClickedUpsell,
-  { ...upsellOptions, courseId },
-);
-
 // Non-Link events
 export const courseOptionsDropdownClicked = (courseId) => (
   module.courseEventTracker(eventNames.courseOptionsDropdownClicked, courseId)
@@ -57,19 +35,10 @@ export const courseTitleClicked = (...args) => (
   module.courseLinkTracker(eventNames.courseTitleClicked)(...args));
 export const enterCourseClicked = (...args) => (
   module.courseLinkTracker(eventNames.enterCourseClicked)(...args));
-export const upgradeClicked = (courseId, href) => createLinkTracker(
-  () => {
-    module.upgradeButtonClicked(courseId)();
-    module.upgradeButtonClickedUpsell(courseId)();
-    api.logUpgrade({ courseId });
-  },
-  href,
-);
 
 export default {
   courseImageClicked,
   courseOptionsDropdownClicked,
   courseTitleClicked,
   enterCourseClicked,
-  upgradeClicked,
 };