feat: remove upgrade button

This removes the upgrade button as default content in CourseCardActionSlot. This is, for the moment, a Sumac-specific change. The button is still present in master, pending proper removal (including the component definitions from the rest of the repository) prior to the U release by the maintainers. See: https://github.com/openedx/frontend-app-learner-dashboard/issues/438
fix: Use browserslist-config
2024-12-06 15:55:31 -03:00 · 2024-12-06 11:08:23 -03:00 · 2024-12-02 07:50:28 -08:00 · 2024-12-02 07:50:28 -08:00
302 changed files with 26492 additions and 24915 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+README.md
+LICENSE
+.babelrc
+.eslintignore
+.eslintrc.json
+.gitignore
+.npmignore
+commitlint.config.js
--- a/.env
+++ b/.env
@@ -0,0 +1,44 @@
+NODE_ENV='production'
+NODE_PATH=./src
+BASE_URL=''
+LMS_BASE_URL=''
+ECOMMERCE_BASE_URL=''
+LOGIN_URL=''
+LOGOUT_URL=''
+CSRF_TOKEN_API_PATH=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+DATA_API_BASE_URL=''
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+ACCESS_TOKEN_COOKIE_NAME=''
+NEW_RELIC_APP_ID=''
+NEW_RELIC_LICENSE_KEY=''
+SITE_NAME=''
+MARKETING_SITE_BASE_URL=''
+SUPPORT_URL=''
+CONTACT_URL=''
+OPEN_SOURCE_URL=''
+TERMS_OF_SERVICE_URL=''
+PRIVACY_POLICY_URL=''
+FACEBOOK_URL=''
+TWITTER_URL=''
+YOU_TUBE_URL=''
+LINKED_IN_URL=''
+REDDIT_URL=''
+APPLE_APP_STORE_URL=''
+GOOGLE_PLAY_URL=''
+ENTERPRISE_MARKETING_URL=''
+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=''
+ACCOUNT_SETTINGS_URL=''
+ACCOUNT_PROFILE_URL=''
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,50 @@
+NODE_ENV='development'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME=localhost
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+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'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+FACEBOOK_URL='https://www.facebook.com'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'
+LINKED_IN_URL='https://www.linkedin.com'
+REDDIT_URL='https://www.reddit.com'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+ENTERPRISE_MARKETING_URL='http://example.com'
+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'
+SESSION_COOKIE_DOMAIN='localhost'
+ZENDESK_KEY=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL='http://localhost:1997'
+ACCOUNT_PROFILE_URL='http://localhost:1995'
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
--- a/.env.test
+++ b/.env.test
@@ -0,0 +1,49 @@
+NODE_ENV='test'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME=localhost
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+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'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+FACEBOOK_URL='https://www.facebook.com'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'
+LINKED_IN_URL='https://www.linkedin.com'
+REDDIT_URL='https://www.reddit.com'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+ENTERPRISE_MARKETING_URL='http://example.com'
+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=''
+ACCOUNT_SETTINGS_URL='http://account-settings-url.test'
+ACCOUNT_PROFILE_URL='http://account-profile-url.test'
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=true
+ENABLE_PROGRAMS=false
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+coverage/*
+dist/
+node_modules/
+src/postcss.config.js
+src/segment.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,22 @@
+const { createConfig } = require('@openedx/frontend-build');
+
+const config = createConfig('eslint', {
+  rules: {
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-self-import': 'off',
+    'import/no-import-module-exports': 'off',
+    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+  },
+});
+
+config.settings = {
+  "import/resolver": {
+    node: {
+      paths: ["src", "node_modules"],
+      extensions: [".js", ".jsx"],
+    },
+  },
+};
+
+module.exports = config;
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.snap linguist-generated=false
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -11,6 +11,9 @@ on:
 jobs:
  tests:
    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: [18, 20]

    steps:
    - name: Checkout
@@ -19,7 +22,7 @@ jobs:
    - name: Setup Nodejs
      uses: actions/setup-node@v4
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node }}

    - name: Install dependencies
      run: npm ci
@@ -37,7 +40,24 @@ jobs:
      run: npm run build

    - name: Run Coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v4
      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
+          }}"
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,35 @@
+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
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,29 @@
+.DS_Store
+.eslintcache
+env.config.*
 node_modules
 npm-debug.log
 coverage
-module.config.js
+
 dist/
-/*.tgz
+public/samples/

-### i18n ###
-src/i18n/transifex_input.json
+### pyenv ###
+.python-version

-### Editors ###
-.DS_Store
+### Emacs ###
 *~
-/temp
-/.vscode
+*.swo
+*.swp
+
+### Development environments ###
+.idea
+.vscode
+
+# Local package dependencies
+module.config.js
+
+### transifex ###
+src/i18n/transifex_input.json
+temp
+src/i18n/messages
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint
--- a/.npmignore
+++ b/.npmignore
@@ -1,6 +1,12 @@
-__mocks__
+.eslintignore
+.eslintrc.json
+.gitignore
+docker-compose.yml
+Dockerfile
+Makefile
+npm-debug.log
+
+config
+coverage
 node_modules
-*.test.js
-*.test.jsx
-*.test.ts
-*.test.tsx
+public
--- a/.releaserc
+++ b/.releaserc
@@ -0,0 +1,27 @@
+{
+  "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": []
+}
--- a/5
+++ b/5
@@ -45,11 +45,12 @@ pull_translations:
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
      && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-base/src/i18n/messages:frontend-base \
+               translations/frontend-platform/src/i18n/messages:frontend-platform \
               translations/paragon/src/i18n/messages:paragon \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
               translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard

-	$(intl_imports) frontend-base paragon frontend-app-learner-dashboard
+	$(intl_imports) frontend-platform paragon frontend-component-footer frontend-app-learner-dashboard

 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:
--- a/README.rst
+++ b/README.rst
@@ -18,7 +18,7 @@ frontend-app-learner-dashboard
 The Learner Home app is a microfrontend (MFE) course listing experience for the Open edX Learning Management System
 (LMS).  This experience was designed to provide a clean and functional interface to allow learners to view all of their
 open enrollments, as well as take relevant actions on those enrollments.  It also serves as host to a number of exposed
-"widget" containers to provide upsell and discovery widgets as sidebar components.
+"widget" containers to provide upsell and discovery widgets as sidebar/footer components.

 Quickstart
 ----------
@@ -30,10 +30,31 @@ To start the MFE and enable the feature in LMS:
 From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not
 already, and then redirected to your home page.

-Widgets
+Plugins
 -------
-This MFE can be customized with widgets.  The parts of this MFE that can be customized in that manner are documented
-`here </src/slots>`_.
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
+Contributing
+------------
+
+A core goal of this app is to provide a clean experimentation interface.  To promote this end, we have provided a
+silo'ed code directory at ``src/widgets`` in which contributors should add their custom widget components.  In order to
+ensure our ability to maintain the code stability of the app, the code for these widgets should be strictly contained
+within the bounds of that directory.
+
+Once written, the widgets can be configured into one of our widget containers at ``src/containers/WidgetContainers``.
+This can include conditional logic, as well as Optimizely triggers. It is important to note that our integration tests
+will isolate and ignore these containers, and thus testing your widget is the response of the creator/maintainer of the
+widget itself.
+
+Some guidelines for writing widgets:
+
+* Code for the widget should be strictly confined to the ``src/widgets`` directory.
+* You can load data from the redux store, but should not add or modify fields in that structure.
+* Network events should be managed in component hooks, though can use our ``data/constants/requests:requestStates`` for
+  ease of tracking the request states.

 License
 -------
--- a/app.d.ts
+++ b/app.d.ts
@@ -1,10 +0,0 @@
-/// <reference types="@openedx/frontend-base" />
-
-declare module 'site.config' {
-  export default SiteConfig;
-}
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +0,0 @@
-const { createConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createConfig('babel');
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -17,7 +17,6 @@ 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'
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,22 +0,0 @@
-// @ts-check
-
-const { createLintConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createLintConfig(
-  {
-    files: [
-      'src/**/*',
-      'site.config.*',
-    ],
-  },
-  {
-    ignores: [
-      'coverage/*',
-      'dist/*',
-      'documentation/*',
-      'node_modules/*',
-      '**/__mocks__/*',
-      '**/__snapshots__/*',
-    ],
-  },
-);
--- a/example.env.config.js
+++ b/example.env.config.js
@@ -0,0 +1,73 @@
+/*
+Learner Dashboard is now able to handle JS-based configuration!
+
+For the time being, the `.env.*` files are still made available when cloning down this repo or pulling from
+the master branch. To switch to using `env.config.js`, make a copy of `example.env.config.js` and configure as needed.
+
+For testing with Jest Snapshot, there is a mock in `/src/setupTest.jsx` for `getConfig` that will need to be
+uncommented.
+
+Note: having both .env and env.config.js files will follow a predictable order, in which non-empty values in the
+JS-based config will overwrite the .env environment variables.
+
+frontend-platform's getConfig loads configuration in the following sequence:
+- .env file config
+- optional handlers (commonly used to merge MFE-specific config in via additional process.env variables)
+- env.config.js file config
+- runtime config
+*/
+
+module.exports = {
+  NODE_ENV: 'development',
+  NODE_PATH: './src',
+  PORT: 1996,
+  BASE_URL: 'localhost:1996',
+  LMS_BASE_URL: 'http://localhost:18000',
+  ECOMMERCE_BASE_URL: 'http://localhost:18130',
+  LOGIN_URL: 'http://localhost:18000/login',
+  LOGOUT_URL: 'http://localhost:18000/logout',
+  LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
+  LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
+  LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
+  FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
+  CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
+  REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
+  ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
+  USER_INFO_COOKIE_NAME: 'edx-user-info',
+  SITE_NAME: 'localhost',
+  DATA_API_BASE_URL: 'http://localhost:8000',
+  // LMS_CLIENT_ID should match the lms DOT client application in your LMS container
+  LMS_CLIENT_ID: 'login-service-client-id',
+  SEGMENT_KEY: '',
+  FEATURE_FLAGS: {},
+  MARKETING_SITE_BASE_URL: 'http://localhost:18000',
+  SUPPORT_URL: 'http://localhost:18000/support',
+  CONTACT_URL: 'http://localhost:18000/contact',
+  OPEN_SOURCE_URL: 'http://localhost:18000/openedx',
+  TERMS_OF_SERVICE_URL: 'http://localhost:18000/terms-of-service',
+  PRIVACY_POLICY_URL: 'http://localhost:18000/privacy-policy',
+  FACEBOOK_URL: 'https://www.facebook.com',
+  TWITTER_URL: 'https://twitter.com',
+  YOU_TUBE_URL: 'https://www.youtube.com',
+  LINKED_IN_URL: 'https://www.linkedin.com',
+  REDDIT_URL: 'https://www.reddit.com',
+  APPLE_APP_STORE_URL: 'https://www.apple.com/ios/app-store/',
+  GOOGLE_PLAY_URL: 'https://play.google.com/store',
+  ENTERPRISE_MARKETING_URL: 'http://example.com',
+  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',
+  SESSION_COOKIE_DOMAIN: 'localhost',
+  ZENDESK_KEY: '',
+  HOTJAR_APP_ID: '',
+  HOTJAR_VERSION: 6,
+  HOTJAR_DEBUG: '',
+  NEW_RELIC_APP_ID: '',
+  NEW_RELIC_LICENSE_KEY: '',
+  ACCOUNT_SETTINGS_URL: 'http://localhost:1997',
+  ACCOUNT_PROFILE_URL: 'http://localhost:1995',
+  ENABLE_NOTICES: '',
+  CAREER_LINK_URL: '',
+  EXPERIMENT_08_23_VAN_PAINTED_DOOR: true,
+};
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,21 +1,18 @@
-const { createConfig } = require('@openedx/frontend-base/config');
+const { createConfig } = require('@openedx/frontend-build');

-module.exports = createConfig('test', {
+module.exports = createConfig('jest', {
  setupFilesAfterEnv: [
    'jest-expect-message',
    '<rootDir>/src/setupTest.jsx',
  ],
+  modulePaths: ['<rootDir>/src/'],
  coveragePathIgnorePatterns: [
    'src/segment.js',
    'src/postcss.config.js',
    'testUtils', // don't unit test jest mocking tools
    'src/data/services/lms/fakeData', // don't unit test mock data
    'src/test', // don't unit test integration test utils
-    'src/__mocks__',
  ],
-  moduleNameMapper: {
-    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
-  },
  testTimeout: 120000,
+  testEnvironment: 'jsdom',
 });
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,9 @@
+# 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}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,84 +1,99 @@
 {
-  "name": "@openedx/frontend-app-learner-dashboard",
-  "version": "1.0.0-alpha.2",
+  "name": "@edx/frontend-app-learner-dashboard",
+  "version": "0.0.1",
  "description": "",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
  },
-  "main": "src/index.ts",
-  "files": [
-    "/src"
-  ],
  "browserslist": [
    "extends @edx/browserslist-config"
  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
  "scripts": {
-    "dev": "PORT=1996 PUBLIC_PATH=/learner-dashboard openedx dev",
-    "i18n_extract": "openedx formatjs extract",
-    "lint": "openedx lint .",
-    "lint:fix": "openedx lint --fix .",
-    "snapshot": "openedx test --updateSnapshot",
-    "test": "openedx test --coverage --passWithNoTests"
+    "build": "fedx-scripts webpack",
+    "i18n_extract": "fedx-scripts formatjs extract",
+    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
+    "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
+    "semantic-release": "semantic-release",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "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"
  },
-  "author": "Open edX",
+  "author": "edX",
  "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-learner-dashboard#readme",
+  "homepage": "",
  "publishConfig": {
    "access": "public"
  },
-  "bugs": {
-    "url": "https://github.com/openedx/frontend-app-learner-dashboard/issues"
-  },
  "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-header": "^5.6.0",
+    "@edx/frontend-enterprise-hotjar": "3.0.0",
+    "@edx/frontend-platform": "8.1.2",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/react-unit-test-utils": "3.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",
    "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^2.0.0",
+    "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/user-event": "^13.5.0",
    "classnames": "^2.3.1",
-    "filesize": "^10.0.0",
+    "core-js": "3.38.1",
+    "dompurify": "^2.3.1",
+    "email-prop-type": "^3.0.1",
+    "file-saver": "^2.0.5",
+    "filesize": "^8.0.6",
    "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-helmet": "^6.1.0",
+    "react-intl": "6.8.0",
+    "react-pdf": "^7.0.0",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "6.27.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",
-    "reselect": "^4.0.0"
+    "regenerator-runtime": "^0.14.0",
+    "reselect": "^4.0.0",
+    "universal-cookie": "^4.0.4",
+    "util": "^0.12.4",
+    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "^1.5.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@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",
+    "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": "^18.3.1",
-    "redux-mock-store": "^1.5.4"
-  },
-  "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.2",
-    "@openedx/paragon": "^22",
-    "@tanstack/react-query": "^5",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-redux": "^8",
-    "react-router": "^6",
-    "react-router-dom": "^6",
-    "redux": "^4"
+    "react-test-renderer": "^17.0.2",
+    "redux-mock-store": "^1.5.4",
+    "semantic-release": "^20.1.3"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
  <head>
-      <title>Learner Dashboard Development Site></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
--- a/site.config.dev.tsx
+++ b/site.config.dev.tsx
@@ -1,41 +0,0 @@
-import { EnvironmentTypes, SiteConfig, footerApp, headerApp, shellApp } from '@openedx/frontend-base';
-
-import { learnerDashboardApp } from './src';
-
-import './src/app.scss';
-
-const siteConfig: SiteConfig = {
-  siteId: 'learner-dashboard-dev',
-  siteName: 'Learner Dashboard Dev',
-  baseUrl: 'http://apps.local.openedx.io:1996',
-  lmsBaseUrl: 'http://local.openedx.io:8000',
-  loginUrl: 'http://local.openedx.io:8000/login',
-  logoutUrl: 'http://local.openedx.io:8000/logout',
-
-  environment: EnvironmentTypes.DEVELOPMENT,
-  basename: '/learner-dashboard',
-  apps: [
-    shellApp,
-    headerApp,
-    footerApp,
-    learnerDashboardApp
-  ],
-  externalRoutes: [
-    {
-      role: 'profile',
-      url: 'http://apps.local.openedx.io:1995/profile/'
-    },
-    {
-      role: 'account',
-      url: 'http://apps.local.openedx.io:1997/account/'
-    },
-    {
-      role: 'logout',
-      url: 'http://local.openedx.io:8000/logout'
-    },
-  ],
-
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-};
-
-export default siteConfig;
--- a/site.config.test.tsx
+++ b/site.config.test.tsx
@@ -1,28 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '@openedx/frontend-base';
-
-import { appId } from './src/constants';
-
-const siteConfig: SiteConfig = {
-  siteId: 'learner-dashboard-test-site',
-  siteName: 'Learner Dashboard Test Site',
-  baseUrl: 'http://localhost:1996',
-  lmsBaseUrl: 'http://localhost:8000',
-  loginUrl: 'http://localhost:8000/login',
-  logoutUrl: 'http://localhost:8000/logout',
-
-  environment: EnvironmentTypes.TEST,
-  basename: '/learner-dashboard',
-  apps: [{
-    appId,
-    config: {
-      ECOMMERCE_BASE_URL: 'http://localhost:18130',
-      FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
-      LEARNING_BASE_URL: 'http://localhost:2000',
-    },
-  }],
-
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-  segmentKey: '',
-};
-
-export default siteConfig;
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+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 { Alert } from '@openedx/paragon';
+
+import { RequestKeys } from 'data/constants/requests';
+import store from 'data/store';
+import {
+  selectors,
+  actions,
+} from 'data/redux';
+import { reduxHooks } from 'hooks';
+import Dashboard from 'containers/Dashboard';
+
+import track from 'tracking';
+
+import fakeData from 'data/services/lms/fakeData/courses';
+
+import AppWrapper from 'containers/WidgetContainers/AppWrapper';
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+
+import { getConfig } from '@edx/frontend-platform';
+import messages from './messages';
+import './App.scss';
+
+export const App = () => {
+  const { authenticatedUser } = React.useContext(AppContext);
+  const { formatMessage } = useIntl();
+  const isFailed = {
+    initialize: reduxHooks.useRequestIsFailed(RequestKeys.initialize),
+    refreshList: reduxHooks.useRequestIsFailed(RequestKeys.refreshList),
+  };
+  const hasNetworkFailure = isFailed.initialize || isFailed.refreshList;
+  const { supportEmail } = reduxHooks.usePlatformSettingsData();
+  const loadData = reduxHooks.useLoadData();
+
+  React.useEffect(() => {
+    if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
+      window.loadEmptyData = () => {
+        loadData({ ...fakeData.globalData, courses: [] });
+      };
+      window.loadMockData = () => {
+        loadData({
+          ...fakeData.globalData,
+          courses: [
+            ...fakeData.courseRunData,
+            ...fakeData.entitlementData,
+          ],
+        });
+      };
+      window.store = store;
+      window.selectors = selectors;
+      window.actions = actions;
+      window.track = track;
+    }
+    if (getConfig().HOTJAR_APP_ID) {
+      try {
+        initializeHotjar({
+          hotjarId: getConfig().HOTJAR_APP_ID,
+          hotjarVersion: getConfig().HOTJAR_VERSION,
+          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
+        });
+      } catch (error) {
+        logError(error);
+      }
+    }
+  }, [authenticatedUser, loadData]);
+  return (
+    <>
+      <Helmet>
+        <title>{formatMessage(messages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
+      <div>
+        <AppWrapper>
+          <LearnerDashboardHeader />
+          <main>
+            {hasNetworkFailure
+              ? (
+                <Alert variant="danger">
+                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+                </Alert>
+              ) : (
+                <Dashboard />
+              )}
+          </main>
+        </AppWrapper>
+        <FooterSlot />
+      </div>
+    </>
+  );
+};
+
+export default App;
--- a/src/App.scss
+++ b/src/App.scss
@@ -0,0 +1,69 @@
+// 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";
+
+$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
+
+@import "~@edx/frontend-component-header/dist/index";
+@import "~@edx/frontend-component-footer/dist/_footer";
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.alert.alert-info .alert-icon {
+  color: black;
+}
+
+#root {
+  // Removing a odd 1.5 scaling on checkboxes.:
+  input[type=checkbox] {
+    transform: none;
+  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+  }
+
+  header {
+    flex: 0 0 auto;
+
+    .logo {
+      display: block;
+      box-sizing: content-box;
+      position: relative;
+      top: 0.1em;
+      height: 1.75rem;
+      margin-right: 1rem;
+      img {
+        display: block;
+        height: 100%;
+      }
+    }
+  }
+
+  footer {
+    flex: 0;
+  }
+}
+
+#paragon-portal-root {
+  .pgn__modal-layer {
+    .pgn__modal-close-container {
+      right: 1rem !important;
+    }
+  }
+  .confirm-modal .pgn__modal-body {
+    overflow: hidden;
+  }
+}
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -0,0 +1,156 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import { RequestKeys } from 'data/constants/requests';
+import { reduxHooks } from 'hooks';
+import Dashboard from 'containers/Dashboard';
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+import AppWrapper from 'containers/WidgetContainers/AppWrapper';
+import { App } from './App';
+import messages from './messages';
+
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
+
+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',
+  actions: 'redux.actions',
+  thunkActions: 'redux.thunkActions',
+}));
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useRequestIsFailed: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+    useLoadData: jest.fn(),
+  },
+}));
+jest.mock('data/store', () => 'data/store');
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({})),
+}));
+
+const loadData = jest.fn();
+reduxHooks.useLoadData.mockReturnValue(loadData);
+
+let el;
+
+const supportEmail = 'test-support-url';
+reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+
+describe('App router component', () => {
+  const { formatMessage } = useIntl();
+  describe('component', () => {
+    const runBasicTests = () => {
+      test('snapshot', () => { expect(el.snapshot).toMatchSnapshot(); });
+      it('displays title in helmet component', () => {
+        const control = el.instance
+          .findByType(Helmet)[0]
+          .findByType('title')[0];
+        expect(control.children[0].el).toEqual(formatMessage(messages.pageTitle));
+      });
+      it('displays learner dashboard header', () => {
+        expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
+      });
+      it('wraps the header and main components in an AppWrapper widget container', () => {
+        const container = el.instance.findByType(AppWrapper)[0];
+        expect(container.children[0].type).toEqual('LearnerDashboardHeader');
+        expect(container.children[1].type).toEqual('main');
+      });
+    };
+    describe('no network failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({});
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const dashboard = main.children[0];
+        expect(dashboard.type).toEqual('Dashboard');
+        expect(
+          dashboard.matches(shallow(<Dashboard />)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely url', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ OPTIMIZELY_URL: 'fake.url' });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const dashboard = main.children[0];
+        expect(dashboard.type).toEqual('Dashboard');
+        expect(
+          dashboard.matches(shallow(<Dashboard />)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely project id', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ OPTIMIZELY_PROJECT_ID: 'fakeId' });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const dashboard = main.children[0];
+        expect(dashboard.type).toEqual('Dashboard');
+        expect(
+          dashboard.matches(shallow(<Dashboard />)),
+        ).toEqual(true);
+      });
+    });
+    describe('initialize failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        getConfig.mockReturnValue({});
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const alert = main.children[0];
+        expect(alert.type).toEqual('Alert');
+        expect(alert.children.length).toEqual(1);
+        const errorPage = alert.children[0];
+        expect(errorPage.type).toEqual('ErrorPage');
+        expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail }));
+      });
+    });
+    describe('refresh failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
+        getConfig.mockReturnValue({});
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const alert = main.children[0];
+        expect(alert.type).toEqual('Alert');
+        expect(alert.children.length).toEqual(1);
+        const errorPage = alert.children[0];
+        expect(errorPage.type).toEqual('ErrorPage');
+        expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail }));
+      });
+    });
+  });
+});
--- a/src/Main.jsx
+++ b/src/Main.jsx
@@ -1,20 +0,0 @@
-import { Provider as ReduxProvider } from 'react-redux';
-import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-import store from './data/store';
-import Dashboard from './containers/Dashboard';
-
-import './app.scss';
-
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <ReduxProvider store={store}>
-      <PageWrap>
-        <Dashboard />
-      </PageWrap>
-    </ReduxProvider>
-  </CurrentAppProvider>
-);
-
-export default Main;
--- a/src/mocks/file.js
+++ b/src/mocks/file.js
@@ -1 +0,0 @@
-module.exports = 'FileMock';
--- a/src/mocks/svg.js
+++ b/src/mocks/svg.js
@@ -1 +0,0 @@
-module.exports = 'SvgURL';
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -2,11 +2,22 @@

 exports[`App router component component initialize failure snapshot 1`] = `
 <Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
  <div>
    <AppWrapper>
-      <main
-        id="main"
-      >
+      <LearnerDashboardHeader />
+      <main>
        <Alert
          variant="danger"
        >
@@ -16,59 +27,107 @@ exports[`App router component component initialize failure snapshot 1`] = `
        </Alert>
      </main>
    </AppWrapper>
+    <FooterSlot />
  </div>
 </Fragment>
 `;

 exports[`App router component component no network failure snapshot 1`] = `
 <Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
  <div>
    <AppWrapper>
-      <main
-        id="main"
-      >
+      <LearnerDashboardHeader />
+      <main>
        <Dashboard />
      </main>
    </AppWrapper>
+    <FooterSlot />
  </div>
 </Fragment>
 `;

 exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
 <Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
  <div>
    <AppWrapper>
-      <main
-        id="main"
-      >
+      <LearnerDashboardHeader />
+      <main>
        <Dashboard />
      </main>
    </AppWrapper>
+    <FooterSlot />
  </div>
 </Fragment>
 `;

 exports[`App router component component no network failure with optimizely url snapshot 1`] = `
 <Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
  <div>
    <AppWrapper>
-      <main
-        id="main"
-      >
+      <LearnerDashboardHeader />
+      <main>
        <Dashboard />
      </main>
    </AppWrapper>
+    <FooterSlot />
  </div>
 </Fragment>
 `;

 exports[`App router component component refresh failure snapshot 1`] = `
 <Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
  <div>
    <AppWrapper>
-      <main
-        id="main"
-      >
+      <LearnerDashboardHeader />
+      <main>
        <Alert
          variant="danger"
        >
@@ -78,6 +137,7 @@ exports[`App router component component refresh failure snapshot 1`] = `
        </Alert>
      </main>
    </AppWrapper>
+    <FooterSlot />
  </div>
 </Fragment>
 `;
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -1,43 +1,40 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<UNDEFINED>
-  <ErrorPage
-    message="test-error-message"
-  />
-</UNDEFINED>
+<ErrorPage
+  message="test-error-message"
+/>
 `;

 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<UNDEFINED>
-  <SiteProvider
-    store={
-      {
-        "redux": "store",
-      }
+<AppProvider
+  store={
+    {
+      "redux": "store",
    }
-  >
-    <NoticesWrapper>
-      <Routes>
-        <Route
-          element={
-            <PageWrap>
-              <App />
-            </PageWrap>
-          }
-          path="/"
-        />
-        <Route
-          element={
-            <Navigate
-              replace={true}
-              to="/"
-            />
-          }
-          path="*"
-        />
-      </Routes>
-    </NoticesWrapper>
-  </SiteProvider>
-</UNDEFINED>
+  }
+  wrapWithRouter={true}
+>
+  <NoticesWrapper>
+    <Routes>
+      <Route
+        element={
+          <PageWrap>
+            <App />
+          </PageWrap>
+        }
+        path="/"
+      />
+      <Route
+        element={
+          <Navigate
+            replace={true}
+            to="/"
+          />
+        }
+        path="*"
+      />
+    </Routes>
+  </NoticesWrapper>
+</AppProvider>
 `;
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,41 +0,0 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
-$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
-
-#learnerDashboardRoot {
-  main {
-    flex-grow: 1;
-  }
-
-  // Removing a odd 1.5 scaling on checkboxes.:
-  input[type=checkbox] {
-    transform: none;
-  }
-
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .alert.alert-info .alert-icon {
-    color: black;
-  }
-
-  #paragon-portal-root {
-    .pgn__modal-layer {
-      .pgn__modal-close-container {
-        right: 1rem !important;
-      }
-    }
-    .confirm-modal .pgn__modal-body {
-      overflow: hidden;
-    }
-  }
-}
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,23 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import providers from './providers';
-import messages from './i18n';
-import slots from './slots';
-
-const app: App = {
-  appId,
-  routes,
-  providers,
-  messages,
-  slots,
-  config: {
-    LEARNING_BASE_URL: 'http://apps.local.openedx.io:2000',
-    ENABLE_PROGRAMS: false,
-    ECOMMERCE_BASE_URL: '',
-    ORDER_HISTORY_URL: '',
-    SUPPORT_URL: '',
-  }
-};
-
-export default app;
--- a/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/assets/confirm-email.svg
+++ b/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/assets/confirm-email.svg
--- a/src/assets/top_stripe.svg
+++ b/src/assets/top_stripe.svg
@@ -0,0 +1,15 @@
+<svg width="1350" height="7" viewBox="0 0 1350 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3302_26079)">
+<rect width="1350" height="6.75" transform="translate(0 -0.375)" fill="#03C7E8"/>
+<rect y="-0.375" width="585.562" height="6.75" fill="#D23228"/>
+<path d="M549.281 -0.375H933.188L929.491 6.375H549.281V-0.375Z" fill="#002121"/>
+<path d="M550.129 13.125L545.062 -10.5L555.188 -10.5L550.129 13.125Z" fill="#D23228"/>
+<path d="M931.082 13.125L925.594 -6.28125L936.563 -6.28125L931.082 13.125Z" fill="#002121"/>
+<path d="M0 -0.375H106.312L105.289 6.375H0V-0.375Z" fill="#921108"/>
+</g>
+<defs>
+<clipPath id="clip0_3302_26079">
+<rect width="1350" height="6.75" fill="white" transform="translate(0 -0.375)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/NoticesWrapper/api.js
+++ b/src/components/NoticesWrapper/api.js
@@ -0,0 +1,26 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+
+export const noticesUrl = `${getConfig().LMS_BASE_URL}/notices/api/v1/unacknowledged`;
+export const error404Message = 'This probably happened because the notices plugin is not installed on platform.';
+
+export const getNotices = ({ onLoad }) => {
+  const authenticatedUser = getAuthenticatedUser();
+
+  const handleError = async (e) => {
+    // Error probably means that notices is not installed, which is fine.
+    const { customAttributes: { httpErrorStatus } } = e;
+    if (httpErrorStatus === 404) {
+      logInfo(`${e}. ${error404Message}`);
+    } else {
+      logError(e);
+    }
+  };
+  if (authenticatedUser) {
+    return getAuthenticatedHttpClient().get(noticesUrl, {}).then(onLoad).catch(handleError);
+  }
+  return null;
+};
+
+export default { getNotices };
--- a/src/components/NoticesWrapper/api.test.js
+++ b/src/components/NoticesWrapper/api.test.js
@@ -0,0 +1,65 @@
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+
+import * as api from './api';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
+    LMS_BASE_URL: 'test-lms-url',
+  })),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+  getAuthenticatedUser: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+  logInfo: jest.fn(),
+}));
+
+const testData = 'test-data';
+const successfulGet = () => Promise.resolve(testData);
+const error404 = { customAttributes: { httpErrorStatus: 404 }, test: 'error' };
+const error404Get = () => Promise.reject(error404);
+const error500 = { customAttributes: { httpErrorStatus: 500 }, test: 'error' };
+const error500Get = () => Promise.reject(error500);
+
+const get = jest.fn().mockImplementation(successfulGet);
+getAuthenticatedHttpClient.mockReturnValue({ get });
+const authenticatedUser = { fake: 'user' };
+getAuthenticatedUser.mockReturnValue(authenticatedUser);
+
+const onLoad = jest.fn();
+describe('getNotices api method', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('behavior', () => {
+    describe('not authenticated', () => {
+      it('does not fetch anything', () => {
+        getAuthenticatedUser.mockReturnValueOnce(null);
+        api.getNotices({ onLoad });
+        expect(get).not.toHaveBeenCalled();
+      });
+    });
+    describe('authenticated', () => {
+      it('fetches noticesUrl with onLoad behavior', async () => {
+        await api.getNotices({ onLoad });
+        expect(get).toHaveBeenCalledWith(api.noticesUrl, {});
+        expect(onLoad).toHaveBeenCalledWith(testData);
+      });
+      it('calls logInfo if fetch fails with 404', async () => {
+        get.mockImplementation(error404Get);
+        await api.getNotices({ onLoad });
+        expect(logInfo).toHaveBeenCalledWith(`${error404}. ${api.error404Message}`);
+      });
+      it('calls logError if fetch fails with non-404 error', async () => {
+        get.mockImplementation(error500Get);
+        await api.getNotices({ onLoad });
+        expect(logError).toHaveBeenCalledWith(error500);
+      });
+    });
+  });
+});
--- a/src/components/NoticesWrapper/hooks.js
+++ b/src/components/NoticesWrapper/hooks.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+
+import { StrictDict } from 'utils';
+import { getNotices } from './api';
+import * as module from './hooks';
+
+/**
+ * This component uses the platform-plugin-notices plugin to function.
+ * If the user has an unacknowledged notice, they will be rerouted off
+ * course home and onto a full-screen notice page. If the plugin is not
+ * installed, or there are no notices, we just passthrough this component.
+ */
+export const state = StrictDict({
+  isRedirected: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useNoticesWrapperData = () => {
+  const [isRedirected, setIsRedirected] = module.state.isRedirected();
+  React.useEffect(() => {
+    if (getConfig().ENABLE_NOTICES) {
+      getNotices({
+        onLoad: (data) => {
+          if (data?.data?.results?.length > 0) {
+            setIsRedirected(true);
+            window.location.replace(`${data.data.results[0]}?next=${window.location.href}`);
+          }
+        },
+      });
+    }
+  }, [setIsRedirected]);
+  return { isRedirected };
+};
+
+export default useNoticesWrapperData;
--- a/src/components/NoticesWrapper/hooks.test.js
+++ b/src/components/NoticesWrapper/hooks.test.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { MockUseState } from 'testUtils';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getNotices } from './api';
+import * as hooks from './hooks';
+
+jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn() }));
+jest.mock('./api', () => ({ getNotices: jest.fn() }));
+
+getConfig.mockReturnValue({ ENABLE_NOTICES: true });
+const state = new MockUseState(hooks);
+
+let hook;
+describe('NoticesWrapper hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.isRedirected);
+  });
+  describe('useNoticesWrapperData', () => {
+    beforeEach(() => {
+      state.mock();
+    });
+    describe('behavior', () => {
+      it('initializes state hooks', () => {
+        hooks.useNoticesWrapperData();
+        expect(hooks.state.isRedirected).toHaveBeenCalledWith();
+      });
+      describe('effects', () => {
+        it('does not call notices if not enabled', () => {
+          getConfig.mockReturnValueOnce({ ENABLE_NOTICES: false });
+          hooks.useNoticesWrapperData();
+          const [cb, prereqs] = React.useEffect.mock.calls[0];
+          expect(prereqs).toEqual([state.setState.isRedirected]);
+          cb();
+          expect(getNotices).not.toHaveBeenCalled();
+        });
+        describe('getNotices call (if enabled) onLoad behavior', () => {
+          it('does not redirect if there are no results', () => {
+            hooks.useNoticesWrapperData();
+            expect(React.useEffect).toHaveBeenCalled();
+            const [cb, prereqs] = React.useEffect.mock.calls[0];
+            expect(prereqs).toEqual([state.setState.isRedirected]);
+            cb();
+            expect(getNotices).toHaveBeenCalled();
+            const { onLoad } = getNotices.mock.calls[0][0];
+            onLoad({});
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+            onLoad({ data: {} });
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+            onLoad({ data: { results: [] } });
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+          });
+          it('redirects and set isRedirected if results are returned', () => {
+            delete window.location;
+            window.location = { replace: jest.fn(), href: 'test-old-href' };
+            hooks.useNoticesWrapperData();
+            const [cb, prereqs] = React.useEffect.mock.calls[0];
+            expect(prereqs).toEqual([state.setState.isRedirected]);
+            cb();
+            expect(getNotices).toHaveBeenCalled();
+            const { onLoad } = getNotices.mock.calls[0][0];
+            const target = 'url-target';
+            onLoad({ data: { results: [target] } });
+            expect(state.setState.isRedirected).toHaveBeenCalledWith(true);
+            expect(window.location.replace).toHaveBeenCalledWith(
+              `${target}?next=${window.location.href}`,
+            );
+          });
+        });
+      });
+    });
+    describe('output', () => {
+      it('forwards isRedirected from state call', () => {
+        hook = hooks.useNoticesWrapperData();
+        expect(hook.isRedirected).toEqual(state.stateVals.isRedirected);
+      });
+    });
+  });
+});
--- a/src/components/NoticesWrapper/index.jsx
+++ b/src/components/NoticesWrapper/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useNoticesWrapperData from './hooks';
+
+/**
+ * This component uses the platform-plugin-notices plugin to function.
+ * If the user has an unacknowledged notice, they will be rerouted off
+ * course home and onto a full-screen notice page. If the plugin is not
+ * installed, or there are no notices, we just passthrough this component.
+ */
+const NoticesWrapper = ({ children }) => {
+  const { isRedirected } = useNoticesWrapperData();
+  return (
+    <div>
+      {isRedirected === true ? null : children}
+    </div>
+  );
+};
+
+NoticesWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default NoticesWrapper;
--- a/src/components/NoticesWrapper/index.test.jsx
+++ b/src/components/NoticesWrapper/index.test.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import useNoticesWrapperData from './hooks';
+import NoticesWrapper from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = { isRedirected: false };
+useNoticesWrapperData.mockReturnValue(hookProps);
+
+let el;
+const children = [<b key={1}>some</b>, <i key={2}>children</i>];
+describe('NoticesWrapper component', () => {
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(useNoticesWrapperData).toHaveBeenCalledWith();
+    });
+  });
+  describe('output', () => {
+    it('does not show children if redirected', () => {
+      useNoticesWrapperData.mockReturnValueOnce({ isRedirected: true });
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(el.instance.children.length).toEqual(0);
+    });
+    it('shows children if not redirected', () => {
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(el.instance.children.length).toEqual(2);
+      expect(el.instance.children[0].type).toEqual(shallow(children[0]).type);
+      expect(el.instance.props).toEqual(shallow(children[0]).props);
+      expect(el.instance.children[1].type).toEqual(shallow(children[1]).type);
+      expect(el.instance.props).toEqual(shallow(children[1]).props);
+    });
+  });
+});
--- a/src/components/ZendeskFab/snapshots/index.test.jsx.snap
+++ b/src/components/ZendeskFab/snapshots/index.test.jsx.snap
@@ -0,0 +1,65 @@
+// 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,
+      },
+    }
+  }
+/>
+`;
--- a/src/components/ZendeskFab/index.jsx
+++ b/src/components/ZendeskFab/index.jsx
@@ -0,0 +1,56 @@
+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;
--- a/src/components/ZendeskFab/index.test.jsx
+++ b/src/components/ZendeskFab/index.test.jsx
@@ -0,0 +1,12 @@
+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();
+  });
+});
--- a/src/components/ZendeskFab/messages.js
+++ b/src/components/ZendeskFab/messages.js
@@ -0,0 +1,16 @@
+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;
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -0,0 +1,27 @@
+const configuration = {
+  // BASE_URL: process.env.BASE_URL,
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  ECOMMERCE_BASE_URL: process.env.ECOMMERCE_BASE_URL,
+  // LOGIN_URL: process.env.LOGIN_URL,
+  // LOGOUT_URL: process.env.LOGOUT_URL,
+  // CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+  // REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+  // DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
+  // SECURE_COOKIES: process.env.NODE_ENV !== 'development',
+  SEGMENT_KEY: process.env.SEGMENT_KEY,
+  // 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 = {};
+
+export { configuration, features };
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +0,0 @@
-export const appId = 'org.openedx.frontend.app.learnerDashboard';
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+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';
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
+++ b/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, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
 );

 describe('BeginCourseButton', () => {
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+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';
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
+++ b/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, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
 );

 let wrapper;
--- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';

+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx
@@ -0,0 +1,45 @@
+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;
--- a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
@@ -0,0 +1,49 @@
+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);
+    });
+  });
+});
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+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';
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
+++ b/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, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
    ),
  },
 }));
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/BeginCourseButton.test.jsx.snap
+++ b/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],
-        "url": "home-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
      },
    }
  }
@@ -29,7 +29,7 @@ exports[`BeginCourseButton snapshot enabled snapshot 1`] = `
      "trackCourseEvent": {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "home-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
      },
    }
  }
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/ResumeButton.test.jsx.snap
+++ b/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],
-        "url": "resume-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
      },
    }
  }
@@ -29,7 +29,7 @@ exports[`ResumeButton snapshot enabled snapshot 1`] = `
      "trackCourseEvent": {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "resume-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
      },
    }
  }
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/UpgradeButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/UpgradeButton.test.jsx.snap
@@ -0,0 +1,32 @@
+// 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>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/ViewCourseButton.test.jsx.snap
+++ b/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],
-        "url": "homeUrl",
+        "upgradeUrl": "homeUrl",
      },
    }
  }
@@ -29,7 +29,7 @@ exports[`ViewCourseButton learner cannot view course 1`] = `
      "trackCourseEvent": {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "homeUrl",
+        "upgradeUrl": "homeUrl",
      },
    }
  }
--- a/src/containers/CourseCard/components/CourseCardActions/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/index.jsx
@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';

 import { ActionRow } from '@openedx/paragon';

-import { reduxHooks } from '../../../../hooks';
-import CourseCardActionSlot from '../../../../slots/CourseCardActionSlot';
+import { reduxHooks } from 'hooks';

+import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
--- a/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
@@ -2,7 +2,8 @@ import { shallow } from '@edx/react-unit-test-utils';

 import { reduxHooks } from 'hooks';

-import CourseCardActionSlot from 'slots/CourseCardActionSlot';
+import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
+import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -19,7 +20,8 @@ jest.mock('hooks', () => ({
  },
 }));

-jest.mock('slots/CourseCardActionSlot', () => 'CustomActionButton');
+jest.mock('plugin-slots/CourseCardActionSlot', () => 'CustomActionButton');
+jest.mock('./UpgradeButton', () => 'UpgradeButton');
 jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
 jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
 jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
@@ -57,7 +59,19 @@ 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();
@@ -69,15 +83,22 @@ 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 CourseCardActionSlot and ViewCourseButton for archived courses', () => {
+      it('renders UpgradeButton 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 CourseCardActionSlot and BeginCourseButton', () => {
+        it('renders UpgradeButton and BeginCourseButton', () => {
          mockHooks();
          render();
          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
@@ -85,7 +106,7 @@ describe('CourseCardActions', () => {
        });
      });
      describe('active courses (started, and not archived)', () => {
-        it('renders CourseCardActionSlot and ResumeButton', () => {
+        it('renders UpgradeButton and ResumeButton', () => {
          mockHooks({ hasStarted: true });
          render();
          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
--- a/src/containers/CourseCard/components/CourseCardActions/messages.js
+++ b/src/containers/CourseCard/components/CourseCardActions/messages.js
@@ -1,6 +1,11 @@
-import { defineMessages } from '@openedx/frontend-base';
+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',
--- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx
@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';

 import { MailtoLink, Hyperlink } from '@openedx/paragon';
 import { CheckCircle } from '@openedx/paragon/icons';
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { utilHooks, reduxHooks } from 'hooks';
+import Banner from 'components/Banner';

 import messages from './messages';

@@ -31,7 +31,7 @@ export const CertificateBanner = ({ cardId }) => {
  if (certificate.isRestricted) {
    return (
      <Banner variant="danger">
-        {supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
+        { supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
        {isVerified && '  '}
        {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
      </Banner>
--- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
@@ -2,17 +2,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink } from '@openedx/paragon';
-import { useIntl } from '@openedx/frontend-base';
-
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { useIntl } from '@edx/frontend-platform/i18n';

+import { utilHooks, reduxHooks } from 'hooks';
+import Banner from 'components/Banner';
 import messages from './messages';

 export const CourseBanner = ({ cardId }) => {
  const {
    isVerified,
    isAuditAccessExpired,
+    canUpgrade,
    coursewareAccess = {},
  } = reduxHooks.useCardEnrollmentData(cardId);
  const courseRun = reduxHooks.useCardCourseRunData(cardId);
@@ -26,7 +26,13 @@ export const CourseBanner = ({ cardId }) => {
  return (
    <>
      {isAuditAccessExpired
-        && (
+        && (canUpgrade ? (
+          <Banner>
+            {formatMessage(messages.auditAccessExpired)}
+            {'  '}
+            {formatMessage(messages.upgradeToAccess)}
+          </Banner>
+        ) : (
          <Banner>
            {formatMessage(messages.auditAccessExpired)}
            {'  '}
@@ -34,7 +40,17 @@ 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>
@@ -43,7 +59,6 @@ export const CourseBanner = ({ cardId }) => {
          })}
        </Banner>
      )}
-
      {(!isStaff && hasUnmetPrerequisites) && (
        <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
      )}
--- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx
@@ -25,6 +25,7 @@ let el;

 const enrollmentData = {
  isVerified: false,
+  canUpgrade: false,
  isAuditAccessExpired: false,
  coursewareAccess: {
    hasUnmetPrerequisites: false,
@@ -64,18 +65,51 @@ describe('CourseBanner', () => {
    render({ enrollment: { isVerified: true } });
    expect(el.isEmptyRender()).toEqual(true);
  });
-  describe('audit access expired', () => {
+  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', () => {
    beforeEach(() => {
      render({ enrollment: { isAuditAccessExpired: true } });
    });
    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
      expect(el.snapshot).toMatchSnapshot();
    });
-    test('messages: auditAccessExpired', () => {
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
      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 } } });
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/hooks.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/hooks.js
@@ -1,5 +1,6 @@
-import { StrictDict } from '../../../../../utils';
-import { reduxHooks } from '../../../../../hooks';
+import { StrictDict } from 'utils';
+
+import { reduxHooks } from 'hooks';

 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -16,9 +17,7 @@ export const statusComponents = StrictDict({
 export const useCreditBannerData = (cardId) => {
  const credit = reduxHooks.useCardCreditData(cardId);
  const { supportEmail } = reduxHooks.usePlatformSettingsData();
-  if (!credit.isEligible) {
-    return null;
-  }
+  if (!credit.isEligible) { return null; }

  const { error, purchased, requestStatus } = credit;
  let ContentComponent = EligibleContent;
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import Banner from '../../../../../components/Banner';
+import Banner from 'components/Banner';

 import { MailtoLink } from '@openedx/paragon';
 import hooks from './hooks';
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/messages.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/messages.js
@@ -1,14 +1,14 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
  error: {
    id: 'learner-dash.courseCard.banners.credit.error',
-    description: 'Error message for credit transaction with support email link',
+    description: '',
    defaultMessage: 'An error occurred with this transaction.  For help, contact {supportEmailLink}.',
  },
  errorNoEmail: {
    id: 'learner-dash.courseCard.banners.credit.errorNoEmail',
-    description: 'Error message for credit transaction without support email',
+    description: '',
    defaultMessage: 'An error occurred with this transaction.',
  },
 });
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
-import { reduxHooks } from '../../../../../../hooks';
+import { reduxHooks } from 'hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';

@@ -12,7 +11,7 @@ import messages from './messages';

 export const ApprovedContent = ({ cardId }) => {
  const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
  const { formatMessage } = useIntl();
  return (
    <CreditContent
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.jsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import { reduxHooks } from '../../../../../../hooks';
-import track from '../../../../../../tracking';
+import { reduxHooks } from 'hooks';
+import track from 'tracking';

 import CreditContent from './components/CreditContent';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
+import { reduxHooks } from 'hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';
 import hooks from './hooks';
@@ -13,7 +13,7 @@ import messages from './messages';
 export const MustRequestContent = ({ cardId }) => {
  const { formatMessage } = useIntl();
  const { requestData, createCreditRequest } = hooks.useCreditRequestData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
  return (
    <CreditContent
      action={{
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.jsx
@@ -1,16 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
-import { reduxHooks } from '../../../../../../hooks';
+import { reduxHooks } from 'hooks';
 import CreditContent from './components/CreditContent';
 import messages from './messages';

 export const PendingContent = ({ cardId }) => {
  const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
  const { formatMessage } = useIntl();
  return (
    <CreditContent
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import { reduxHooks } from '../../../../../../hooks';
+import { reduxHooks } from 'hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { reduxHooks } from '../../../../../../../hooks';
+import { reduxHooks } from 'hooks';
 import { Hyperlink } from '@openedx/paragon';

 export const ProviderLink = ({ cardId }) => {
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/hooks.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/hooks.js
@@ -1,7 +1,7 @@
 import React from 'react';

-import { StrictDict } from '../../../../../../utils';
-import { apiHooks } from '../../../../../../hooks';
+import { StrictDict } from 'utils';
+import { apiHooks } from 'hooks';

 import * as module from './hooks';

--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/messages.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/messages.js
@@ -1,59 +1,59 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
  approved: {
    id: 'learner-dash.courseCard.banners.credit.approved',
-    description: 'Message shown when credit request has been approved',
+    description: '',
    defaultMessage: '{congratulations} {providerName} has approved your request for course credit. To see your course credit, visit the {linkToProviderSite} website.',
  },
  congratulations: {
    id: 'learner-dash.courseCard.banners.credit.congratulations',
-    description: 'Congratulatory message for credit approval',
+    description: '',
    defaultMessage: 'Congratulations!',
  },
  eligible: {
    id: 'learner-dash.courseCard.banners.credit.eligible',
-    description: 'Message shown when user is eligible to purchase course credit',
+    description: '',
    defaultMessage: 'You have completed this course and are eligible to purchase course credit.  Select {getCredit} to get started.',
  },
  eligibleFromProvider: {
    id: 'learner-dash.courseCard.banners.credit.eligibleFromProvider',
-    description: 'Message shown when user is eligible for credit from a specific provider',
+    description: '',
    defaultMessage: 'You are now eligible for credit from {providerName}. Congratulations!',
  },
  getCredit: {
    id: 'learner-dash.courseCard.banners.credit.getCredit',
-    description: 'Button text for initiating the credit process',
+    description: '',
    defaultMessage: 'Get Credit',
  },
  mustRequest: {
    id: 'learner-dash.courseCard.banners.credit.mustRequest',
-    description: 'Message shown after payment to instruct user to request credit',
+    description: '',
    defaultMessage: 'Thank you for your payment.  To receive course credit, you must request credit at the {linkToProviderSite} website.  Select {requestCredit} to get started',
  },
  received: {
    id: 'learner-dash.courseCard.banners.credit.received',
-    description: 'Message shown when credit request has been received',
+    description: '',
    defaultMessage: '{providerName} has received your course credit request.  We will update you when credit processing is complete.',
  },
  rejected: {
    id: 'learner-dash.courseCard.banners.credit.rejected',
-    description: 'Message shown when credit request has been rejected',
+    description: '',
    defaultMessage: '{providerName} did not approve your request for course credit.  For more information, contact {linkToProviderSite} directly.',
  },
  requestCredit: {
    id: 'learner-dash.courseCard.banners.credit.requestCredit',
-    description: 'Button text for requesting credit',
+    description: '',
    defaultMessage: 'Request Credit',
  },
  viewCredit: {
    id: 'learner-dash.courseCard.banners.credit.viewCredit',
-    description: 'Button text for viewing credit details',
+    description: '',
    defaultMessage: 'View Credit',
  },
  viewDetails: {
    id: 'learner-dash.courseCard.banners.credit.viewDetails',
-    description: 'Button text for viewing credit request details',
+    description: '',
    defaultMessage: 'View Details',
  },
 });
--- a/src/containers/CourseCard/components/CourseCardBanners/EntitlementBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/EntitlementBanner.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { utilHooks, reduxHooks } from 'hooks';

+import Banner from 'components/Banner';
 import messages from './messages';

 export const EntitlementBanner = ({ cardId }) => {
--- a/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.jsx
@@ -2,10 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';

 import { Program } from '@openedx/paragon/icons';
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import { reduxHooks } from '../../../../../hooks';
-import Banner from '../../../../../components/Banner';
+import { reduxHooks } from 'hooks';
+import Banner from 'components/Banner';

 import ProgramList from './ProgramsList';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.test.jsx
@@ -1,6 +1,6 @@
 import { shallow } from '@edx/react-unit-test-utils';

-import { reduxHooks } from '../../../../../hooks';
+import { reduxHooks } from 'hooks';
 import RelatedProgramsBanner from '.';

 jest.mock('./ProgramsList', () => 'ProgramsList');
--- a/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/messages.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/messages.js
@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
  relatedPrograms: {
--- a/src/containers/CourseCard/components/CourseCardBanners/snapshots/CourseBanner.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardBanners/snapshots/CourseBanner.test.jsx.snap
@@ -1,6 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`CourseBanner audit access expired snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
+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`] = `
 <Fragment>
  <Banner>
    Your audit access to this course has expired.
@@ -15,6 +25,21 @@ exports[`CourseBanner audit access expired snapshot: (auditAccessExpired, findAn
 </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 />`;
--- a/src/containers/CourseCard/components/CourseCardBanners/snapshots/index.test.jsx.snap
+++ b/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"
  />
-  <CourseBannerSlot
+  <CourseBanner
    cardId="test-card-id"
  />
  <EntitlementBanner
@@ -25,7 +25,7 @@ exports[`CourseCardBanners renders default CourseCardBanners 1`] = `
  <RelatedProgramsBanner
    cardId="test-card-id"
  />
-  <CourseBannerSlot
+  <CourseBanner
    cardId="test-card-id"
  />
  <EntitlementBanner
--- a/src/containers/CourseCard/components/CourseCardBanners/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/index.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { reduxHooks } from '../../../../hooks';
-import CourseBannerSlot from '../../../../slots/CourseBannerSlot';
+import { reduxHooks } from 'hooks';

+import CourseBanner from './CourseBanner';
 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} />
-      <CourseBannerSlot cardId={cardId} />
+      <CourseBanner cardId={cardId} />
      <EntitlementBanner cardId={cardId} />
      {isEnrolled && <CertificateBanner cardId={cardId} />}
      {isEnrolled && <CreditBanner cardId={cardId} />}
--- a/src/containers/CourseCard/components/CourseCardBanners/messages.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/messages.js
@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
  auditAccessExpired: {
@@ -6,11 +6,26 @@ 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',
--- a/src/containers/CourseCard/components/CourseCardDetails/hooks.js
+++ b/src/containers/CourseCard/components/CourseCardDetails/hooks.js
@@ -1,5 +1,5 @@
-import { useIntl } from '@openedx/frontend-base';
-import { utilHooks, reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { utilHooks, reduxHooks } from 'hooks';

 import * as hooks from './hooks';
 import messages from './messages';
@@ -10,10 +10,8 @@ export const useAccessMessage = ({ cardId }) => {
  const courseRun = reduxHooks.useCardCourseRunData(cardId);
  const formatDate = utilHooks.useFormatDate();
  if (!courseRun.isStarted) {
-    if (!courseRun.startDate && !courseRun.advertisedStart) {
-      return null;
-    }
-    const startDate = courseRun.advertisedStart ?? formatDate(courseRun.startDate);
+    if (!courseRun.startDate) { return null; }
+    const startDate = formatDate(courseRun.startDate);
    return formatMessage(messages.courseStarts, { startDate });
  }
  if (enrollment.isEnrolled) {
@@ -29,9 +27,7 @@ export const useAccessMessage = ({ cardId }) => {
        { accessExpirationDate: formatDate(accessExpirationDate) },
      );
    }
-    if (!endDate) {
-      return null;
-    }
+    if (!endDate) { return null; }
    return formatMessage(
      isArchived ? messages.courseEnded : messages.courseEnds,
      { endDate: formatDate(endDate) },
@@ -53,7 +49,7 @@ export const useCardDetailsData = ({ cardId }) => {
  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);

  return {
-    providerName: providerName ?? formatMessage(messages.unknownProviderName),
+    providerName: providerName || formatMessage(messages.unknownProviderName),
    accessMessage: hooks.useAccessMessage({ cardId }),
    isEntitlement,
    isFulfilled,
--- a/src/containers/CourseCard/components/CourseCardDetails/hooks.test.js
+++ b/src/containers/CourseCard/components/CourseCardDetails/hooks.test.js
@@ -1,4 +1,4 @@
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

 import { keyStore } from 'utils';
 import { utilHooks, reduxHooks } from 'hooks';
--- a/src/containers/CourseCard/components/CourseCardDetails/messages.js
+++ b/src/containers/CourseCard/components/CourseCardDetails/messages.js
@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';

 const messages = defineMessages({
  accessExpired: {
--- a/src/containers/CourseCard/components/CourseCardImage.jsx
+++ b/src/containers/CourseCard/components/CourseCardImage.jsx
@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

 import { Badge } from '@openedx/paragon';

-import track from '../../../tracking';
-import { reduxHooks } from '../../../hooks';
-import verifiedRibbon from '../../../assets/verified-ribbon.png';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import verifiedRibbon from 'assets/verified-ribbon.png';
 import useActionDisabledState from './hooks';

 import messages from '../messages';
@@ -20,13 +20,11 @@ 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 d-inline-block overflow-visible ${orientation}`;
+  const wrapperClassName = `pgn__card-wrapper-image-cap overflow-visible ${orientation}`;
  const image = (
    <>
      <img
-        // 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"
+        className="pgn__card-image-cap show"
        src={bannerImgSrc}
        alt={formatMessage(messages.bannerAlt)}
      />
--- a/src/containers/CourseCard/components/CourseCardImage.test.jsx
+++ b/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, url) => ({
-      trackCourseEvent: { eventName, cardId, url },
+    useTrackCourseEvent: jest.fn((eventName, cardId, upgradeUrl) => ({
+      trackCourseEvent: { eventName, cardId, upgradeUrl },
    })),
  },
 }));
--- a/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx
+++ b/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx
@@ -3,12 +3,11 @@ import PropTypes from 'prop-types';
 import * as ReactShare from 'react-share';

 import { StrictDict } from '@edx/react-unit-test-utils';
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown } from '@openedx/paragon';

-import MasqueradeUserContext from '../../../../data/contexts/MasqueradeUserContext';
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';

 import messages from './messages';

@@ -22,7 +21,7 @@ export const SocialShareMenu = ({ cardId, emailSettings }) => {
  const { courseName } = reduxHooks.useCardCourseData(cardId);
  const { isEmailEnabled, isExecEd2UCourse } = reduxHooks.useCardEnrollmentData(cardId);
  const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();

  const handleTwitterShare = reduxHooks.useTrackCourseEvent(track.socialShare, cardId, 'twitter');
  const handleFacebookShare = reduxHooks.useTrackCourseEvent(track.socialShare, cardId, 'facebook');
--- a/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx
@@ -1,7 +1,7 @@
 import { when } from 'jest-when';
 import * as ReactShare from 'react-share';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { formatMessage, shallow } from '@edx/react-unit-test-utils';

 import track from 'tracking';
@@ -20,8 +20,8 @@ jest.mock('tracking', () => ({
  socialShare: 'test-social-share-key',
 }));

-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
  useIntl: jest.fn().mockReturnValue({
    formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage,
  }),
--- a/src/containers/CourseCard/components/CourseCardMenu/hooks.js
+++ b/src/containers/CourseCard/components/CourseCardMenu/hooks.js
@@ -1,7 +1,7 @@
 import { useKeyedState, StrictDict } from '@edx/react-unit-test-utils';

-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';

 export const stateKeys = StrictDict({
  isUnenrollConfirmVisible: 'isUnenrollConfirmVisible',
@@ -32,9 +32,7 @@ export const useHandleToggleDropdown = (cardId) => {
    cardId,
  );
  return (isOpen) => {
-    if (isOpen) {
-      trackCourseEvent();
-    }
+    if (isOpen) { trackCourseEvent(); }
  };
 };

--- a/src/containers/CourseCard/components/CourseCardMenu/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardMenu/index.jsx
@@ -1,16 +1,14 @@
-import { useContext } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Dropdown, Icon, IconButton } from '@openedx/paragon';
 import { MoreVert } from '@openedx/paragon/icons';
 import { StrictDict } from '@edx/react-unit-test-utils';

-import MasqueradeUserContext from '../../../../data/contexts/MasqueradeUserContext';
-import EmailSettingsModal from '../../../../containers/EmailSettingsModal';
-import UnenrollConfirmModal from '../../../../containers/UnenrollConfirmModal';
-import { reduxHooks } from '../../../../hooks';
-
+import EmailSettingsModal from 'containers/EmailSettingsModal';
+import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
+import { reduxHooks } from 'hooks';
 import SocialShareMenu from './SocialShareMenu';
 import {
  useEmailSettings,
@@ -32,7 +30,7 @@ export const CourseCardMenu = ({ cardId }) => {
  const unenrollModal = useUnenrollData();
  const handleToggleDropdown = useHandleToggleDropdown(cardId);
  const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
  const { isEmailEnabled } = reduxHooks.useCardEnrollmentData(cardId);

  if (!shouldShowDropdown) {
--- a/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx
@@ -2,7 +2,7 @@ import { when } from 'jest-when';

 import { Dropdown } from '@openedx/paragon';
 import { shallow } from '@edx/react-unit-test-utils';
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';

 import EmailSettingsModal from 'containers/EmailSettingsModal';
 import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
@@ -11,8 +11,8 @@ import SocialShareMenu from './SocialShareMenu';
 import * as hooks from './hooks';
 import CourseCardMenu, { testIds } from '.';

-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
  useIntl: jest.fn().mockReturnValue({
    formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage,
  }),
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Adolfo R. Brandes	021f52b303	feat: remove upgrade button This removes the upgrade button as default content in CourseCardActionSlot. This is, for the moment, a Sumac-specific change. The button is still present in master, pending proper removal (including the component definitions from the rest of the repository) prior to the U release by the maintainers. See: https://github.com/openedx/frontend-app-learner-dashboard/issues/438	2024-12-06 15:55:31 -03:00
Adolfo R. Brandes	8e0e217402	fix: Use browserslist-config We were installing browserslist-config but not declaring it. This had the effect that webpack - and likely others - were not using it.	2024-12-06 11:08:23 -03:00
Diana Olarte	261448dee9	fix: display programs tab only if it is configured fix: apply feedback	2024-12-02 07:50:28 -08:00
Diana Olarte	5ef5ed954c	fix: display SUPPORT_URL only if the url is configured	2024-12-02 07:50:28 -08:00
				`@@ -1 +0,0 @@`
				`export const appId = 'org.openedx.frontend.app.learnerDashboard';`