test: update snapshots

fix: update menu item link for variant header
2023-03-07 18:10:13 -05:00 · 2023-03-07 18:09:35 -05:00 · 2023-03-07 17:29:52 -05:00 · 2023-03-07 17:21:03 -05:00 · 2023-03-07 17:14:18 -05:00
461 changed files with 60758 additions and 24019 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,39 @@
+NODE_ENV='production'
+NODE_PATH=./src
+BASE_URL=''
+LMS_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_MICROFRONTEND_URL=''
+PROFILE_MICROFRONTEND_URL=''
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,47 @@
+NODE_ENV='development'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+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
+LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.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='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=''
+// Microfrontends
+ACCOUNT_MICROFRONTEND_URL='http://localhost:1997/'
+PROFILE_MICROFRONTEND_URL='http://localhost:1995/u/'
--- a/.env.test
+++ b/.env.test
@@ -0,0 +1,46 @@
+NODE_ENV='test'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+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
+LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.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='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'
+ZENDESK_KEY='test-zendesk-key'
+HOTJAR_APP_ID='hot-jar-app-id'
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+// Microfrontends
+ACCOUNT_MICROFRONTEND_URL='http://localhost:1997/'
+PROFILE_MICROFRONTEND_URL='http://localhost:1995/u/'
--- 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,21 @@
+const { createConfig } = require('@edx/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',
+    '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/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1,8 @@
-*   @openedx/2U-aperture
+# Root app is developed and owned by Aurora
+*   @edx/content-aurora
+
+# WIDGETS and experiments are developed and owned by separate teams below
+
+# Recommendations panel
+/src/widgets/RecommendationsPanel       @edx/vanguards
+/src/widgets/LookingForChallengeWidget  @edx/vanguards
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,7 +0,0 @@
-version: 2
-updates:
-    # Adding new check for github-actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-        interval: "weekly"
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -1,33 +0,0 @@
-{
-    "extends": [
-      "config:base",
-      "schedule:weekly",
-      ":automergeLinters",
-      ":automergeMinor",
-      ":automergeTesters",
-      ":enableVulnerabilityAlerts",
-      ":rebaseStalePrs",
-      ":semanticCommits",
-      ":updateNotScheduled"
-    ],
-    "packageRules": [
-      {
-        "matchDepTypes": [
-          "devDependencies"
-        ],
-        "matchUpdateTypes": [
-          "lockFileMaintenance",
-          "minor",
-          "patch",
-          "pin"
-        ],
-        "automerge": true
-      },
-      {
-        "matchPackagePatterns": ["@edx", "@openedx"],
-        "matchUpdateTypes": ["minor", "patch"],
-        "automerge": true
-      }
-    ],
-    "timezone": "America/New_York"
-  }
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,16 +10,18 @@ on:

 jobs:
  tests:
-    runs-on: ubuntu-latest
-
+    runs-on: ubuntu-20.04
+    strategy:
+      matrix:
+        node: [16]
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v2

    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v2
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ matrix.node }}

    - name: Install dependencies
      run: npm ci
@@ -37,7 +39,19 @@ jobs:
      run: npm run build

    - name: Run Coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v3
+
+    - name: Send failure notification
+      if: ${{ failure() }}
+      uses: dawidd6/action-send-mail@v3
      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+        server_address: email-smtp.us-east-1.amazonaws.com
+        server_port: 465
+        username: ${{ secrets.EDX_SMTP_USERNAME }}
+        password: ${{ secrets.EDX_SMTP_PASSWORD }}
+        subject: Upgrade python requirements workflow failed in ${{github.repository}}
+        to: masters-grades@edx.org
+        from: github-actions <github-actions@edx.org>
+        body: Upgrade python requirements workflow in ${{github.repository}} failed!
+          For details see "github.com/${{ github.repository }}/actions/runs/${{ github.run_id
+          }}"
--- a/.github/workflows/lockfileversion-check.yml
+++ b/.github/workflows/lockfileversion-check.yml
@@ -10,4 +10,4 @@ on:

 jobs:
  version-check:
-    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master
+    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,32 @@
+name: Release CI
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v2
+        with:
+          node-version: 12
+
+      - 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,27 @@
+.DS_Store
+.eslintcache
 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
--- 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/.nvmrc
+++ b/.nvmrc
@@ -1 +0,0 @@
-24
--- 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/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[main]
+host = https://www.transifex.com
+
+[o:open-edx:p:edx-platform:r:frontend-app-learner-dashboard]
+file_filter = src/i18n/messages/<lang>.json
+source_file = src/i18n/transifex_input.json
+source_lang = en
+type        = KEYVALUEJSON
+
--- a/43
+++ b/43
@@ -2,13 +2,17 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json

-intl_imports = ./node_modules/.bin/intl-imports.js
+transifex_resource = frontend-app-learner-dashboard
+transifex_langs = "ar,fr,es_419,zh_CN"
+
 transifex_utils = ./node_modules/.bin/transifex-utils.js
 i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
+tx_url1 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/translation/en/strings/
+tx_url2 = https://www.transifex.com/api/2/project/edx-platform/resource/$(transifex_resource)/source/

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 NPM_TESTS=build i18n_extract lint test

@@ -24,19 +28,6 @@ test.npm.%: validate-no-uncommitted-package-lock-changes
 requirements:  ## install ci requirements
 	npm ci

-clean:
-	rm -rf dist
-
-build: clean
-	tsc --project tsconfig.build.json
-	tsc-alias -p tsconfig.build.json
-	find src -type f \( -name '*.scss' -o -name '*.png' -o -name '*.svg' \) -exec sh -c '\
-	  for f in "$$@"; do \
-	    d="dist/$${f#src/}"; \
-	    mkdir -p "$$(dirname "$$d")"; \
-	    cp "$$f" "$$d"; \
-	  done' sh {} +
-
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
 	rm -rf $(transifex_temp)
@@ -53,16 +44,20 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)

-pull_translations:
-	rm -rf src/i18n/messages
-	mkdir src/i18n/messages
-	cd src/i18n/messages \
-      && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-base/src/i18n/messages:frontend-base \
-               translations/paragon/src/i18n/messages:paragon \
-               translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard
+# Pushes translations to Transifex.  You must run make extract_translations first.
+push_translations:
+	# Pushing strings to Transifex...
+	tx push -s
+	# Fetching hashes from Transifex...
+	./node_modules/reactifex/bash_scripts/get_hashed_strings.sh $(tx_url1)
+	# Writing out comments to file...
+	$(transifex_utils) $(transifex_temp) --comments
+	# Pushing comments to Transifex...
+	./node_modules/reactifex/bash_scripts/put_comments.sh $(tx_url2)

-	$(intl_imports) frontend-base paragon frontend-app-learner-dashboard
+# Pulls translations from Transifex.
+pull_translations:
+	tx pull -t -f --mode reviewed --languages=$(transifex_langs)

 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:
--- a/README.md
+++ b/README.md
@@ -0,0 +1,26 @@
+# 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/footer components.
+
+## Quickstart
+
+To start the MFE and enable the feature in LMS:
+
+1. Start the MFE with `npm run start`. Take a note of the path/port (defaults to `http://localhost:1996`).
+
+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.
+
+## 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.
+
+## Resources
+
+* [Learner Home project info at the Open edX Wiki](https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575906333/Learner+Home)
--- a/README.rst
+++ b/README.rst
@@ -1,86 +0,0 @@
-|license-badge| |status-badge| |ci-badge| |codecov-badge|
-
-.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-learner-dashboard.svg
-    :target: https://github.com/openedx/frontend-app-learner-dashboard/blob/master/LICENSE
-    :alt: License
-.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
-    :alt: Maintained
-.. |ci-badge| image:: https://github.com/openedx/frontend-app-learner-dashboard/actions/workflows/ci.yml/badge.svg
-    :target: https://github.com/openedx/frontend-app-learner-dashboard/actions/workflows/ci.yml
-    :alt: Continuous Integration
-.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-learner-dashboard/coverage.svg?branch=master
-    :target: https://app.codecov.io/github/openedx/frontend-app-learner-dashboard?branch=master
-    :alt: Codecov
-
-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.
-
-Quickstart
----------
-
-To start the MFE and enable the feature in LMS:
-
-1. Start the MFE with ``npm run start``. Take a note of the path/port (defaults to ``http://localhost:1996``).
-
-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
-------
-This MFE can be customized with widgets.  The parts of this MFE that can be customized in that manner are documented
-`here </src/slots>`_.
-
-License
-------
-
-The code in this repository is licensed under the AGPLv3 unless otherwise noted.
-
-Please see the `license`_ for more info.
-
-.. _license: https://github.com/openedx/frontend-app-learner-dashboard/blob/master/LICENSE
-
-Getting Help
------------
-
-If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in
-the community.
-
-Our real-time conversations are on Slack. You can request a `Slack invitation`_, then join our
-`community Slack workspace`_.  Because this is a frontend repository, the best place to discuss it would be in the
-`#wg-frontend channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you
-are facing as you can provide.
-
-https://github.com/openedx/frontend-app-learner-dashboard/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
-
-Resources
---------
-
-Additional info about the Learner Home MFE project can be found on the `Open edX Wiki`_.
-
-.. _Open edX Wiki: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575906333/Learner+Home
-
-The Open edX Code of Conduct
----------------------------
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
-
-Reporting Security Issues
-------------------------
-
-Please do not report security issues in public. Please email security@openedx.org.
--- 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/tools');
-
-module.exports = createConfig('babel');
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,25 +0,0 @@
-# This file records information about this repo. Its use is described in OEP-55:
-# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
-apiVersion: backstage.io/v1alpha1
-kind: Component
-metadata:
-  name: 'frontend-app-learner-dashboard'
-  description: 'The Microfrontend for the course listing interface allowing learners to view and act upon enrollments.'
-  links:
-    - url: 'https://github.com/openedx/frontend-app-learner-dashboard/blob/master/README.rst'
-      title: 'Documentation'
-      icon: 'Article'
-  annotations:
-    # (Optional) Annotation keys and values can be whatever you want.
-    # We use it in Open edX repos to have a comma-separated list of GitHub user
-    # names that might be interested in changes to the architecture of this
-    # component.
-    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'
-  owner: 2U-aperture
-# (Optional) An array of different components or resources.
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,22 +0,0 @@
-// @ts-check
-
-const { createLintConfig } = require('@openedx/frontend-base/tools');
-
-module.exports = createLintConfig(
-  {
-    files: [
-      'src/**/*',
-      'site.config.*',
-    ],
-  },
-  {
-    ignores: [
-      'coverage/*',
-      'dist/*',
-      'documentation/*',
-      'node_modules/*',
-      '**/__mocks__/*',
-      '**/__snapshots__/*',
-    ],
-  },
-);
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,22 +1,21 @@
-const { createConfig } = require('@openedx/frontend-base/tools');
+const { createConfig } = require('@edx/frontend-build');

-module.exports = createConfig('test', {
+module.exports = createConfig('jest', {
  setupFilesAfterEnv: [
    'jest-expect-message',
    '<rootDir>/src/setupTest.jsx',
  ],
+  modulePaths: ['<rootDir>/src/'],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
+  ],
  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: {
-    // Asset mocks
-    '\\.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,90 +1,94 @@
 {
-  "name": "@openedx/frontend-app-learner-dashboard",
-  "version": "1.0.0-alpha.6",
+  "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"
  },
-  "exports": {
-    ".": "./dist/index.js",
-    "./app.scss": "./dist/app.scss"
-  },
-  "files": [
-    "/dist"
-  ],
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
  "scripts": {
-    "build": "make build",
-    "clean": "make clean",
-    "dev": "PORT=1996 PUBLIC_PATH=/learner-dashboard openedx dev",
-    "i18n_extract": "openedx formatjs extract",
-    "lint": "openedx lint .",
-    "lint:fix": "openedx lint --fix .",
-    "prepack": "npm run build",
-    "test": "openedx test --coverage --passWithNoTests"
+    "build": "fedx-scripts webpack",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "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",
+    "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:@edx/brand-edx.org@^2.0.3",
+    "@edx/browserslist-config": "^1.1.0",
+    "@edx/frontend-component-footer": "^11.4.1",
+    "@edx/frontend-enterprise-hotjar": "^1.2.0",
+    "@edx/frontend-platform": "^2.6.2",
+    "@edx/paragon": "20.19.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",
-    "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^2.0.0",
+    "@fortawesome/react-fontawesome": "^0.1.15",
+    "@redux-beacon/segment": "^1.1.0",
+    "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.21.4",
    "classnames": "^2.3.1",
-    "filesize": "^10.0.0",
+    "core-js": "3.16.2",
+    "dompurify": "^2.3.1",
+    "email-prop-type": "^3.0.1",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
+    "file-saver": "^2.0.5",
+    "filesize": "^8.0.6",
    "font-awesome": "4.7.0",
+    "history": "5.0.1",
+    "html-react-parser": "^1.3.0",
+    "jest": "^26.6.3",
    "lodash": "^4.17.21",
    "moment": "^2.29.4",
-    "prop-types": "15.8.1",
+    "prop-types": "15.7.2",
+    "query-string": "7.0.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-helmet": "^6.1.0",
+    "react-intl": "^5.20.9",
+    "react-pdf": "^5.5.0",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "5.3.3",
    "react-share": "^4.4.0",
+    "react-zendesk": "^0.1.13",
+    "redux": "4.1.1",
+    "redux-beacon": "^2.1.0",
+    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.2",
-    "reselect": "^4.0.0"
+    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "^0.13.9",
+    "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",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@edx/frontend-build": "11.0.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "axios-mock-adapter": "^1.20.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "fetch-mock": "^9.11.0",
+    "husky": "^7.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",
+    "jest-expect-message": "^1.0.2",
+    "react-dev-utils": "^11.0.4",
+    "react-test-renderer": "^16.14.0",
+    "reactifex": "1.1.1",
    "redux-mock-store": "^1.5.4",
-    "tsc-alias": "^1.8.16"
-  },
-  "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.13",
-    "@openedx/paragon": "^23",
-    "@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"
+    "semantic-release": "^17.4.5"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,9 +1,10 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
  <head>
-      <title>Learner Dashboard Development Site></title>
+      <title>Learner Dashboard | <%= process.env.SITE_NAME %></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
  </head>
  <body>
    <div id="root"></div>
--- a/site.config.dev.tsx
+++ b/site.config.dev.tsx
@@ -1,40 +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,
-  apps: [
-    shellApp,
-    headerApp,
-    footerApp,
-    learnerDashboardApp
-  ],
-  externalRoutes: [
-    {
-      role: 'org.openedx.frontend.role.profile',
-      url: 'http://apps.local.openedx.io:1995/profile/'
-    },
-    {
-      role: 'org.openedx.frontend.role.account',
-      url: 'http://apps.local.openedx.io:1997/account/'
-    },
-    {
-      role: 'org.openedx.frontend.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,27 +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,
-  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,96 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+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 Footer from '@edx/frontend-component-footer';
+import { Alert } from '@edx/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 ZendeskFab from 'components/ZendeskFab';
+
+import track from 'tracking';
+
+import fakeData from 'data/services/lms/fakeData/courses';
+import LearnerDashboardHeaderVariant from './containers/LearnerDashboardHeaderVariant';
+
+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 || process.env.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 (process.env.HOTJAR_APP_ID) {
+      try {
+        initializeHotjar({
+          hotjarId: process.env.HOTJAR_APP_ID,
+          hotjarVersion: process.env.HOTJAR_VERSION,
+          hotjarDebug: !!process.env.HOTJAR_DEBUG,
+        });
+      } catch (error) {
+        logError(error);
+      }
+    }
+  }, [authenticatedUser, loadData]);
+  return (
+    <Router>
+      <Helmet>
+        <title>{formatMessage(messages.pageTitle)}</title>
+      </Helmet>
+      <div>
+        <LearnerDashboardHeaderVariant />
+        <main>
+          {hasNetworkFailure
+            ? (
+              <Alert variant="danger">
+                <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+              </Alert>
+            ) : (<Dashboard />)}
+        </main>
+        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <ZendeskFab />
+      </div>
+    </Router>
+  );
+};
+
+export default App;
--- a/src/App.scss
+++ b/src/App.scss
@@ -0,0 +1,68 @@
+// frontend-app-*/src/index.scss
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/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-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,111 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Helmet } from 'react-helmet';
+import { ErrorPage } from '@edx/frontend-platform/react';
+
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import Footer from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Alert } from '@edx/paragon';
+
+import { RequestKeys } from 'data/constants/requests';
+import { reduxHooks } from 'hooks';
+import Dashboard from 'containers/Dashboard';
+import LearnerDashboardHeaderVariant from 'containers/LearnerDashboardHeaderVariant';
+import { App } from './App';
+import messages from './messages';
+
+jest.mock('@edx/frontend-component-footer', () => 'Footer');
+
+jest.mock('containers/Dashboard', () => 'Dashboard');
+jest.mock('containers/LearnerDashboardHeaderVariant', () => 'LearnerDashboardHeaderVariant');
+jest.mock('components/ZendeskFab', () => 'ZendeskFab');
+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');
+
+const loadData = jest.fn();
+reduxHooks.useLoadData.mockReturnValue(loadData);
+
+const logo = 'fakeLogo.png';
+let el;
+
+const supportEmail = 'test-support-url';
+reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+
+describe('App router component', () => {
+  process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
+  const { formatMessage } = useIntl();
+  describe('component', () => {
+    const runBasicTests = () => {
+      test('snapshot', () => { expect(el).toMatchSnapshot(); });
+      it('displays title in helmet component', () => {
+        expect(el.find(Helmet).find('title').text()).toEqual(useIntl().formatMessage(messages.pageTitle));
+      });
+      it('displays learner dashboard header', () => {
+        expect(el.find(LearnerDashboardHeaderVariant).length).toEqual(1);
+      });
+      it('wraps the page in a browser router', () => {
+        expect(el.find(Router)).toMatchObject(el);
+      });
+      test('Footer logo drawn from env variable', () => {
+        expect(el.find(Footer).props().logo).toEqual(logo);
+      });
+    };
+    describe('no network failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        expect(el.find('main')).toMatchObject(shallow(
+          <main><Dashboard /></main>,
+        ));
+      });
+    });
+    describe('initialize failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        expect(el.find('main')).toEqual(shallow(
+          <main>
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          </main>,
+        ));
+      });
+    });
+    describe('refresh failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        expect(el.find('main')).toEqual(shallow(
+          <main>
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          </main>,
+        ));
+      });
+    });
+  });
+});
--- 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
@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App router component component initialize failure snapshot 1`] = `
+<BrowserRouter>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+  </HelmetWrapper>
+  <div>
+    <LearnerDashboardHeaderVariant />
+    <main>
+      <Alert
+        variant="danger"
+      >
+        <ErrorPage
+          message="If you experience repeated failures, please email support at test-support-url"
+        />
+      </Alert>
+    </main>
+    <Footer
+      logo="fakeLogo.png"
+    />
+    <ZendeskFab />
+  </div>
+</BrowserRouter>
+`;
+
+exports[`App router component component no network failure snapshot 1`] = `
+<BrowserRouter>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+  </HelmetWrapper>
+  <div>
+    <LearnerDashboardHeaderVariant />
+    <main>
+      <Dashboard />
+    </main>
+    <Footer
+      logo="fakeLogo.png"
+    />
+    <ZendeskFab />
+  </div>
+</BrowserRouter>
+`;
+
+exports[`App router component component refresh failure snapshot 1`] = `
+<BrowserRouter>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+  </HelmetWrapper>
+  <div>
+    <LearnerDashboardHeaderVariant />
+    <main>
+      <Alert
+        variant="danger"
+      >
+        <ErrorPage
+          message="If you experience repeated failures, please email support at test-support-url"
+        />
+      </Alert>
+    </main>
+    <Footer
+      logo="fakeLogo.png"
+    />
+    <ZendeskFab />
+  </div>
+</BrowserRouter>
+`;
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
+<IntlProvider
+  locale="en"
+>
+  <ErrorPage
+    message="test-error-message"
+  />
+</IntlProvider>
+`;
+
+exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
+<IntlProvider
+  locale="en"
+>
+  <AppProvider
+    store={
+      Object {
+        "redux": "store",
+      }
+    }
+  >
+    <Switch>
+      <PageRoute
+        path="/"
+      >
+        <App />
+      </PageRoute>
+      <Redirect
+        to="/"
+      />
+    </Switch>
+  </AppProvider>
+</IntlProvider>
+`;
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,38 +0,0 @@
-@use "@openedx/frontend-base/shell/app.scss";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
-$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // 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/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Alert } from '@openedx/paragon';
-import { Info } from '@openedx/paragon/icons';
+import { Alert } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';

 export const Banner = ({
  children, variant, icon, className,
--- a/src/components/Banner.test.jsx
+++ b/src/components/Banner.test.jsx
@@ -1,27 +1,27 @@
-import { render, screen } from '@testing-library/react';
+import { shallow } from 'enzyme';
+
+import { Alert } from '@edx/paragon';
+
 import Banner from './Banner';

-describe('Banner component', () => {
-  it('renders children content', () => {
-    render(<Banner>Test content</Banner>);
-    expect(screen.getByText('Test content')).toBeInTheDocument();
-  });
+describe('Banner', () => {
+  const props = {
+    children: 'Hello, world!',
+  };
+  describe('snapshot', () => {
+    test('renders default banner', () => {
+      const wrapper = shallow(<Banner {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('renders with variants', () => {
+      const wrapper = shallow(<Banner {...props} variant="success" />);
+      expect(wrapper).toMatchSnapshot();

-  it('uses default props correctly', () => {
-    render(<Banner>Test content</Banner>);
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('mb-0');
-  });
-
-  it('accepts custom variant prop', () => {
-    render(<Banner variant="success">Test content</Banner>);
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-success');
-  });
-
-  it('accepts custom className prop', () => {
-    render(<Banner className="custom-class">Test content</Banner>);
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('custom-class');
+      expect(wrapper.find(Alert).prop('variant')).toEqual('success');
+    });
+    test('renders with custom class', () => {
+      const wrapper = shallow(<Banner {...props} className="custom-class" />);
+      expect(wrapper).toMatchSnapshot();
+    });
  });
 });
--- a/src/components/EmailLink.jsx
+++ b/src/components/EmailLink.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MailtoLink } from '@edx/paragon';
+
+export const EmailLink = ({ address }) => {
+  if (!address) {
+    return null;
+  }
+  return (
+    <MailtoLink to={address}>{address}</MailtoLink>
+  );
+};
+EmailLink.defaultProps = { address: null };
+EmailLink.propTypes = { address: PropTypes.string };
+
+export default EmailLink;
--- a/src/components/EmailLink.test.jsx
+++ b/src/components/EmailLink.test.jsx
@@ -0,0 +1,16 @@
+import { shallow } from 'enzyme';
+
+import EmailLink from './EmailLink';
+
+describe('EmailLink', () => {
+  it('renders null when no address is provided', () => {
+    const wrapper = shallow(<EmailLink />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toEqual(true);
+  });
+  it('renders a MailtoLink when an address is provided', () => {
+    const wrapper = shallow(<EmailLink address="test@email.com" />);
+    expect(wrapper.find('MailtoLink').length).toEqual(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/components/ZendeskFab/snapshots/index.test.jsx.snap
+++ b/src/components/ZendeskFab/snapshots/index.test.jsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ZendeskFab snapshot 1`] = `
+<Zendesk
+  cookies={true}
+  defer={true}
+  webWidget={
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
+            "*": "edX Support",
+          },
+          "url": "https://edx-cdn.org/v3/prod/favicon.ico",
+        },
+        "contactOnlyAfterQuery": true,
+        "suppress": false,
+        "title": Object {
+          "*": "edX Support",
+        },
+      },
+      "chat": Object {
+        "suppress": false,
+      },
+      "contactForm": Object {
+        "attachments": true,
+        "selectTicketForm": Object {
+          "*": "Please choose your request type:",
+        },
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
+                "id": "description",
+                "prefill": Object {
+                  "*": "",
+                },
+              },
+            ],
+            "id": 360003368814,
+            "subject": false,
+          },
+        ],
+      },
+      "contactOptions": Object {
+        "enabled": false,
+      },
+      "helpCenter": Object {
+        "originalArticleButton": true,
+      },
+    }
+  }
+/>
+`;
--- a/src/components/ZendeskFab/index.jsx
+++ b/src/components/ZendeskFab/index.jsx
@@ -0,0 +1,53 @@
+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,
+      },
+      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 'enzyme';
+
+import ZendeskFab from '.';
+
+jest.mock('react-zendesk', () => 'Zendesk');
+
+describe('ZendeskFab', () => {
+  test('snapshot', () => {
+    const wrapper = shallow(<ZendeskFab />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/components/ZendeskFab/messages.js
+++ b/src/components/ZendeskFab/messages.js
@@ -0,0 +1,16 @@
+import { StrictDict } from 'utils';
+
+export const messages = StrictDict({
+  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/components/snapshots/Banner.test.jsx.snap
+++ b/src/components/snapshots/Banner.test.jsx.snap
@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner snapshot renders default banner 1`] = `
+<Alert
+  className="mb-0"
+  icon={[MockFunction icons.Info]}
+  variant="info"
+>
+  Hello, world!
+</Alert>
+`;
+
+exports[`Banner snapshot renders with custom class 1`] = `
+<Alert
+  className="custom-class"
+  icon={[MockFunction icons.Info]}
+  variant="info"
+>
+  Hello, world!
+</Alert>
+`;
+
+exports[`Banner snapshot renders with variants 1`] = `
+<Alert
+  className="mb-0"
+  icon={[MockFunction icons.Info]}
+  variant="success"
+>
+  Hello, world!
+</Alert>
+`;
--- a/src/components/snapshots/EmailLink.test.jsx.snap
+++ b/src/components/snapshots/EmailLink.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmailLink renders a MailtoLink when an address is provided 1`] = `
+<MailtoLink
+  to="test@email.com"
+>
+  test@email.com
+</MailtoLink>
+`;
+
+exports[`EmailLink renders null when no address is provided 1`] = `""`;
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -0,0 +1,23 @@
+const configuration = {
+  // BASE_URL: process.env.BASE_URL,
+  LMS_BASE_URL: process.env.LMS_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,
+  // Microfrontends
+  ACCOUNT_MICROFRONTEND_URL: process.env.ACCOUNT_MICROFRONTEND_URL,
+  PROFILE_MICROFRONTEND_URL: process.env.PROFILE_MICROFRONTEND_URL,
+};
+
+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/CourseCard.scss
+++ b/src/containers/CourseCard/CourseCard.scss
@@ -1,8 +1,10 @@
+@import "@edx/paragon/scss/core/core";
+
 .course-card {
  .card {
    .pgn__card-wrapper-image-cap.vertical {
      display: flex;
-      min-height: var(--pgn-size-card-image-vertical-max-height);
+      min-height: $card-image-vertical-max-height;
    }
    .pgn__card-image-cap {
      border-bottom-left-radius: 0 !important;
@@ -51,11 +53,11 @@
    > .alert {
      border-radius: 0;
      box-shadow: none;
-      padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
+      padding: map-get($spacers, 3) map-get($spacers, 4);

      &:last-of-type {
-        border-bottom-left-radius: var(--pgn-size-alert-border-radius);
-        border-bottom-right-radius: var(--pgn-size-alert-border-radius);
+        border-bottom-left-radius: $alert-border-radius;
+        border-bottom-right-radius: $alert-border-radius;
      }
    }

--- a/src/containers/CourseCard/snapshots/index.test.jsx.snap
+++ b/src/containers/CourseCard/snapshots/index.test.jsx.snap
@@ -0,0 +1,111 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCard component snapshot: collapsed 1`] = `
+<div
+  className="mb-4.5 course-card"
+  data-testid="CourseCard"
+  id="test-card-id"
+>
+  <Card
+    orientation="vertical"
+  >
+    <div
+      className="d-flex flex-column w-100"
+    >
+      <div>
+        <CourseCardImage
+          cardId="test-card-id"
+          orientation="horizontal"
+        />
+        <Card.Body>
+          <Card.Header
+            actions={
+              <CourseCardMenu
+                cardId="test-card-id"
+              />
+            }
+            title={
+              <CourseCardTitle
+                cardId="test-card-id"
+              />
+            }
+          />
+          <Card.Section
+            className="pt-0"
+          >
+            <CourseCardDetails
+              cardId="test-card-id"
+            />
+          </Card.Section>
+          <Card.Footer
+            orientation="vertical"
+          >
+            <CourseCardActions
+              cardId="test-card-id"
+            />
+          </Card.Footer>
+        </Card.Body>
+      </div>
+      <CourseCardBanners
+        cardId="test-card-id"
+      />
+    </div>
+  </Card>
+</div>
+`;
+
+exports[`CourseCard component snapshot: not collapsed 1`] = `
+<div
+  className="mb-4.5 course-card"
+  data-testid="CourseCard"
+  id="test-card-id"
+>
+  <Card
+    orientation="horizontal"
+  >
+    <div
+      className="d-flex flex-column w-100"
+    >
+      <div
+        className="d-flex"
+      >
+        <CourseCardImage
+          cardId="test-card-id"
+          orientation="horizontal"
+        />
+        <Card.Body>
+          <Card.Header
+            actions={
+              <CourseCardMenu
+                cardId="test-card-id"
+              />
+            }
+            title={
+              <CourseCardTitle
+                cardId="test-card-id"
+              />
+            }
+          />
+          <Card.Section
+            className="pt-0"
+          >
+            <CourseCardDetails
+              cardId="test-card-id"
+            />
+          </Card.Section>
+          <Card.Footer
+            orientation="horizontal"
+          >
+            <CourseCardActions
+              cardId="test-card-id"
+            />
+          </Card.Footer>
+        </Card.Body>
+      </div>
+      <CourseCardBanners
+        cardId="test-card-id"
+      />
+    </div>
+  </Card>
+</div>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/snapshots/index.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/snapshots/index.test.jsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionButton snapshot is collapsed 1`] = `
+<Button
+  arbitary="props"
+  size="sm"
+/>
+`;
+
+exports[`ActionButton snapshot is not collapsed 1`] = `
+<Button
+  arbitary="props"
+/>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js
@@ -1,4 +1,4 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { useWindowSize, breakpoints } from '@edx/paragon';

 export const useIsCollapsed = () => {
  const { width } = useWindowSize();
--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js
@@ -1,33 +1,6 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { useWindowSize, breakpoints } from '@edx/paragon';
 import useIsCollapsed from './hooks';

-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  useWindowSize: jest.fn(),
-  breakpoints: {
-    extraSmall: {
-      minWidth: 0,
-      maxWidth: 575,
-    },
-    small: {
-      minWidth: 576,
-      maxWidth: 767,
-    },
-    medium: {
-      minWidth: 768,
-      maxWidth: 991,
-    },
-    large: {
-      minWidth: 992,
-      maxWidth: 1199,
-    },
-    extraLarge: {
-      minWidth: 1200,
-      maxWidth: 100000,
-    },
-  },
-}));
-
 describe('useIsCollapsed', () => {
  it('returns true only when it is between medium and small', () => {
    // make sure all three breakpoints gap is large enough for test
--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@openedx/paragon';
+import { Button } from '@edx/paragon';

 import useIsCollapsed from './hooks';

--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx
@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { shallow } from 'enzyme';
+
 import ActionButton from '.';

 import useIsCollapsed from './hooks';
@@ -7,22 +8,18 @@ jest.mock('./hooks', () => jest.fn());

 describe('ActionButton', () => {
  const props = {
-    className: 'custom-class',
-    children: 'Test',
+    arbitary: 'props',
  };
-
-  it('is collapsed', async () => {
-    useIsCollapsed.mockReturnValue(true);
-    render(<ActionButton {...props} />);
-    const button = screen.getByRole('button', { name: 'Test' });
-    expect(button).toHaveClass('btn-sm', 'custom-class');
-  });
-
-  it('is not collapsed', () => {
-    useIsCollapsed.mockReturnValue(false);
-    render(<ActionButton {...props} />);
-    const button = screen.getByRole('button', { name: 'Test' });
-    expect(button).toBeInTheDocument();
-    expect(button).not.toHaveClass('size', 'sm');
+  describe('snapshot', () => {
+    test('is collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(true);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is not collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(false);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
  });
 });
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
@@ -1,29 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

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

 export const BeginCourseButton = ({ cardId }) => {
  const { formatMessage } = useIntl();
  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
-  const { disableBeginCourse } = useActionDisabledState(cardId);
-
+  const { hasAccess } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
  const handleClick = reduxHooks.useTrackCourseEvent(
    track.course.enterCourseClicked,
    cardId,
-    homeUrl + execEdTrackingParam,
+    homeUrl,
  );
  return (
    <ActionButton
-      disabled={disableBeginCourse}
+      disabled={isMasquerading || !hasAccess}
      as="a"
      href="#"
      onClick={handleClick}
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
@@ -1,88 +1,70 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
-import { reduxHooks } from '@src/hooks';
-import track from '@src/tracking';
-import useActionDisabledState from '../hooks';
+import { shallow } from 'enzyme';
+
+import { htmlProps } from 'data/constants/htmlKeys';
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
 import BeginCourseButton from './BeginCourseButton';

-jest.mock('@src/tracking', () => ({
+jest.mock('tracking', () => ({
  course: {
    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
  },
 }));

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardExecEdTrackingParam: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
+    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'home-url' })),
+    useCardEnrollmentData: jest.fn(() => ({ hasAccess: true })),
+    useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
+    useTrackCourseEvent: jest.fn(
+      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+    ),
  },
 }));

-jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
+jest.mock('./ActionButton', () => 'ActionButton');

-jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
-
-const homeUrl = 'home-url';
-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 } }),
-);
-
-const props = {
-  cardId: 'cardId',
-};
-
-const renderComponent = () => render(<IntlProvider locale="en"><BeginCourseButton {...props} /></IntlProvider>);
+let wrapper;
+const { homeUrl } = reduxHooks.useCardCourseRunData();

 describe('BeginCourseButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
  beforeEach(() => {
    jest.clearAllMocks();
  });
-  describe('initiliaze hooks', () => {
-    it('initializes course run data with cardId', () => {
-      renderComponent();
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads exec education path param', () => {
-      renderComponent();
-      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads disabled states for begin action from action hooks', () => {
-      renderComponent();
-      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
+  describe('snapshot', () => {
+    test('renders default button when learner has access to the course', () => {
+      wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+      expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        track.course.enterCourseClicked,
+        props.cardId,
+        homeUrl,
+      ));
    });
  });
  describe('behavior', () => {
-    describe('disabled', () => {
-      it('should be disabled', () => {
-        useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
-        renderComponent();
-        const button = screen.getByRole('button', { name: 'Begin Course' });
-        expect(button).toHaveClass('disabled');
-        expect(button).toHaveAttribute('aria-disabled', 'true');
-      });
+    it('initializes course run data with cardId', () => {
+      wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
    });
-    describe('enabled', () => {
-      it('should be enabled', () => {
-        renderComponent();
-        const button = screen.getByRole('button', { name: 'Begin Course' });
-        expect(button).not.toHaveClass('disabled');
-        expect(button).not.toHaveAttribute('aria-disabled', 'true');
+    it('initializes enrollment data with cardId', () => {
+      wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(props.cardId);
+    });
+    describe('disabled states', () => {
+      test('learner does not have access', () => {
+        reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess: false });
+        wrapper = shallow(<BeginCourseButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
      });
-      it('should track enter course clicked event on click, with exec ed param', async () => {
-        renderComponent();
-        const user = userEvent.setup();
-        const button = screen.getByRole('button', { name: 'Begin Course' });
-        user.click(button);
-        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
-          track.course.enterCourseClicked,
-          props.cardId,
-          homeUrl + execEdPath(props.cardId),
-        );
+      test('masquerading', () => {
+        reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
+        wrapper = shallow(<BeginCourseButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
      });
    });
  });
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
@@ -1,29 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

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

 export const ResumeButton = ({ cardId }) => {
-  const { formatMessage } = useIntl();
  const { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
-  const { disableResumeCourse } = useActionDisabledState(cardId);
-
+  const { hasAccess, isAudit, isAuditAccessExpired } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
+  const { formatMessage } = useIntl();
  const handleClick = reduxHooks.useTrackCourseEvent(
    track.course.enterCourseClicked,
    cardId,
-    resumeUrl + execEdTrackingParam,
+    resumeUrl,
  );
  return (
    <ActionButton
-      disabled={disableResumeCourse}
+      disabled={isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired)}
      as="a"
      href="#"
      onClick={handleClick}
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
@@ -1,83 +1,82 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
+import { shallow } from 'enzyme';

-import { reduxHooks } from '@src/hooks';
-import track from '@src/tracking';
-import useActionDisabledState from '../hooks';
+import { htmlProps } from 'data/constants/htmlKeys';
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
 import ResumeButton from './ResumeButton';

-jest.mock('@src/tracking', () => ({
-  course: {
-    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
-  },
-}));
-
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardExecEdTrackingParam: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
+    useCardCourseRunData: jest.fn(() => ({ resumeUrl: 'resumeUrl' })),
+    useCardEnrollmentData: jest.fn(() => ({
+      hasAccess: true,
+      isAudit: true,
+      isAuditAccessExpired: false,
+    })),
+    useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
+    useTrackCourseEvent: (eventName, cardId, url) => jest
+      .fn()
+      .mockName(`useTrackCourseEvent('${eventName}', '${cardId}', '${url}')`),
  },
 }));
-jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: 'enterCourseClicked',
+  },
+}));
+jest.mock('./ActionButton', () => 'ActionButton');

-jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
-
-const resumeUrl = 'resume-url';
-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 } }),
-);
+const { resumeUrl } = reduxHooks.useCardCourseRunData();

 describe('ResumeButton', () => {
  const props = {
    cardId: 'cardId',
  };
-  describe('initialize hooks', () => {
-    beforeEach(() => render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>));
-    it('initializes course run data with cardId', () => {
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads exec education path param', () => {
-      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads disabled states for resume action from action hooks', () => {
-      expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
+  describe('snapshot', () => {
+    test('renders default button when learner has access to the course', () => {
+      const wrapper = shallow(<ResumeButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+      expect(wrapper.prop(htmlProps.onClick).getMockName()).toContain(
+        'useTrackCourseEvent',
+        track.course.enterCourseClicked,
+        props.cardId,
+        resumeUrl,
+      );
    });
  });
  describe('behavior', () => {
-    describe('disabled', () => {
-      beforeEach(() => {
-        useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
-      });
-      it('should be disabled', () => {
-        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
-        const button = screen.getByRole('button', { name: 'Resume' });
-        expect(button).toHaveClass('disabled');
-        expect(button).toHaveAttribute('aria-disabled', 'true');
-      });
+    it('initializes course run data based on cardId', () => {
+      shallow(<ResumeButton {...props} />);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
    });
-    describe('enabled', () => {
-      it('should be enabled', () => {
-        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
-        const button = screen.getByRole('button', { name: 'Resume' });
-        expect(button).toBeInTheDocument();
-        expect(button).not.toHaveClass('disabled');
-        expect(button).not.toHaveAttribute('aria-disabled', 'true');
+    it('initializes course enrollment data based on cardId', () => {
+      shallow(<ResumeButton {...props} />);
+      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(props.cardId);
+    });
+    describe('disabled states', () => {
+      test('masquerading', () => {
+        reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
+        const wrapper = shallow(<ResumeButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
      });
-      it('should track enter course clicked event on click, with exec ed param', async () => {
-        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
-        const user = userEvent.setup();
-        const button = screen.getByRole('button', { name: 'Resume' });
-        user.click(button);
-        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
-          track.course.enterCourseClicked,
-          props.cardId,
-          resumeUrl + execEdPath(props.cardId),
-        );
+      test('learner does not have access', () => {
+        reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+          hasAccess: false,
+          isAudit: true,
+          isAuditAccessExpired: false,
+        });
+        const wrapper = shallow(<ResumeButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      });
+      test('audit access expired', () => {
+        reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+          hasAccess: true,
+          isAudit: true,
+          isAuditAccessExpired: true,
+        });
+        const wrapper = shallow(<ResumeButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
      });
    });
  });
--- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
@@ -1,21 +1,21 @@
 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 useActionDisabledState from '../hooks';
+import { reduxHooks } from 'hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';

 export const SelectSessionButton = ({ cardId }) => {
  const { formatMessage } = useIntl();
-  const { disableSelectSession } = useActionDisabledState(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
+  const { hasAccess } = reduxHooks.useCardEnrollmentData(cardId);
+  const { canChange, hasSessions } = reduxHooks.useCardEntitlementData(cardId);
  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
  return (
    <ActionButton
-      disabled={disableSelectSession}
+      disabled={isMasquerading || !hasAccess || (!canChange || !hasSessions)}
      onClick={openSessionModal}
    >
      {formatMessage(messages.selectSession)}
--- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
@@ -1,43 +1,67 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
-
-import { reduxHooks } from '@src/hooks';
-import useActionDisabledState from '../hooks';
+import { shallow } from 'enzyme';

+import { reduxHooks } from 'hooks';
+import { htmlProps } from 'data/constants/htmlKeys';
 import SelectSessionButton from './SelectSessionButton';

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
-    useUpdateSelectSessionModalCallback: jest.fn(),
+    useCardEnrollmentData: jest.fn(() => ({ hasAccess: true })),
+    useCardEntitlementData: jest.fn(() => ({ canChange: true, hasSessions: true })),
+    useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
+    useUpdateSelectSessionModalCallback: () => jest.fn().mockName('mockOpenSessionModal'),
  },
 }));
-jest.mock('../hooks', () => jest.fn(() => ({ disableSelectSession: false })));
+jest.mock('./ActionButton', () => 'ActionButton');

-jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
+let wrapper;

 describe('SelectSessionButton', () => {
  const props = { cardId: 'cardId' };
-  it('default render', () => {
-    render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
-    const button = screen.getByRole('button', { name: 'Select Session' });
-    expect(button).toBeInTheDocument();
-  });
-  describe('if useActionDisabledState is false', () => {
-    it('should disabled Select Session', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
-      render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
-      const button = screen.getByRole('button', { name: 'Select Session' });
-      expect(button).toBeDisabled();
+  describe('snapshot', () => {
+    test('renders default button', () => {
+      wrapper = shallow(<SelectSessionButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders disabled button when user does not have access to the course', () => {
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess: false });
+      wrapper = shallow(<SelectSessionButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders disabled button if masquerading', () => {
+      reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
+      wrapper = shallow(<SelectSessionButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
    });
  });
-  describe('on click', () => {
-    it('should call openSessionModal', async () => {
-      render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
-      const user = userEvent.setup();
-      const button = screen.getByRole('button', { name: 'Select Session' });
-      await user.click(button);
-      expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(props.cardId);
+  describe('behavior', () => {
+    it('default render', () => {
+      wrapper = shallow(<SelectSessionButton {...props} />);
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+      expect(wrapper.prop(htmlProps.onClick).getMockName())
+        .toEqual(reduxHooks.useUpdateSelectSessionModalCallback().getMockName());
+    });
+    describe('disabled states', () => {
+      test('learner does not have access', () => {
+        reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess: false });
+        wrapper = shallow(<SelectSessionButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      });
+      test('learner cannot change sessions', () => {
+        reduxHooks.useCardEntitlementData.mockReturnValueOnce({ canChange: false, hasSessions: true });
+        wrapper = shallow(<SelectSessionButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      });
+      test('entitlement does not have available sessions', () => {
+        reduxHooks.useCardEntitlementData.mockReturnValueOnce({ canChange: true, hasSessions: false });
+        wrapper = shallow(<SelectSessionButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      });
+      test('user is masquerading', () => {
+        reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
+        wrapper = shallow(<SelectSessionButton {...props} />);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+      });
    });
  });
 });
--- 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 '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+
+import ActionButton from './ActionButton';
+import messages from './messages';
+
+export const UpgradeButton = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+
+  const { upgradeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { canUpgrade } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
+  const trackUpgradeClick = reduxHooks.useTrackCourseEvent(
+    track.course.upgradeClicked,
+    cardId,
+    upgradeUrl,
+  );
+
+  const isEnabled = (!isMasquerading && canUpgrade);
+  const enabledProps = {
+    as: 'a',
+    href: upgradeUrl,
+    onClick: trackUpgradeClick,
+  };
+  return (
+    <ActionButton
+      iconBefore={Locked}
+      variant="outline-primary"
+      disabled={!isEnabled}
+      {...isEnabled && 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,57 @@
+import { shallow } from 'enzyme';
+
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import { htmlProps } from 'data/constants/htmlKeys';
+import UpgradeButton from './UpgradeButton';
+
+jest.mock('tracking', () => ({
+  course: {
+    upgradeClicked: jest.fn().mockName('segment.trackUpgradeClicked'),
+  },
+}));
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(() => ({ canUpgrade: true })),
+    useTrackCourseEvent: jest.fn(
+      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+    ),
+  },
+}));
+
+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).toMatchSnapshot();
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+      expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        track.course.upgradeClicked,
+        props.cardId,
+        upgradeUrl,
+      ));
+    });
+    test('cannot upgrade', () => {
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ canUpgrade: false });
+      const wrapper = shallow(<UpgradeButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    });
+    test('masquerading', () => {
+      reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
+      const wrapper = shallow(<UpgradeButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    });
+  });
+});
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
@@ -1,28 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';

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

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

 export const ViewCourseButton = ({ cardId }) => {
  const { formatMessage } = useIntl();
  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const { disableViewCourse } = useActionDisabledState(cardId);
-
+  const { hasAccess, isAudit, isAuditAccessExpired } = reduxHooks.useCardEnrollmentData(cardId);
  const handleClick = reduxHooks.useTrackCourseEvent(
    track.course.enterCourseClicked,
    cardId,
    homeUrl,
  );
+  // disabled on no access or (is audit track but audit access was expired)
+  const disabledViewCourseButton = !hasAccess || (isAudit && isAuditAccessExpired);
  return (
    <ActionButton
-      disabled={disableViewCourse}
+      disabled={disabledViewCourseButton}
      as="a"
      href="#"
      onClick={handleClick}
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
@@ -1,55 +1,85 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
+import { shallow } from 'enzyme';

-import track from '@src/tracking';
-import { reduxHooks } from '@src/hooks';
-import useActionDisabledState from '../hooks';
+import track from 'tracking';
+import { htmlProps } from 'data/constants/htmlKeys';
+import { reduxHooks } from 'hooks';
 import ViewCourseButton from './ViewCourseButton';

-jest.mock('@src/tracking', () => ({
+jest.mock('tracking', () => ({
  course: {
    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
  },
 }));

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
-    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
-    useTrackCourseEvent: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useTrackCourseEvent: jest.fn(
+      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+    ),
  },
 }));
-jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
-
-jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
+jest.mock('./ActionButton', () => 'ActionButton');

+let wrapper;
 const defaultProps = { cardId: 'cardId' };
 const homeUrl = 'homeUrl';

+const createWrapper = ({
+  hasAccess = false,
+  isAudit = false,
+  isAuditAccessExpired = false,
+  isEntitlement = false,
+  isExpired = false,
+  propsOveride = {},
+}) => {
+  reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
+  reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess, isAudit, isAuditAccessExpired });
+  reduxHooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isExpired });
+  return shallow(<ViewCourseButton {...defaultProps} {...propsOveride} />);
+};
+
 describe('ViewCourseButton', () => {
-  it('learner can view course', async () => {
-    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
-    const button = screen.getByRole('button', { name: 'View Course' });
-    expect(button).toBeInTheDocument();
-    expect(button).not.toHaveClass('disabled');
-    expect(button).not.toHaveAttribute('aria-disabled', 'true');
+  describe('learner has access to course', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ hasAccess: true });
+    });
+    test('snapshot', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('links to home URL', () => {
+      expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        track.course.enterCourseClicked,
+        defaultProps.cardId,
+        homeUrl,
+      ));
+    });
+    test('link is enabled', () => {
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+    });
+    test('link is disabled when audit access is expired', () => {
+      wrapper = createWrapper({ hasAccess: true, isAudit: true, isAuditAccessExpired: true });
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    });
  });
-  it('calls trackCourseEvent on click', async () => {
-    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
-    const user = userEvent.setup();
-    const button = screen.getByRole('button', { name: 'View Course' });
-    await user.click(button);
-    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
-      track.course.enterCourseClicked,
-      defaultProps.cardId,
-      homeUrl,
-    );
-  });
-  it('learner cannot view course', () => {
-    useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
-    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
-    const button = screen.getByRole('button', { name: 'View Course' });
-    expect(button).toHaveClass('disabled');
-    expect(button).toHaveAttribute('aria-disabled', 'true');
+  describe('learner does not have access to course', () => {
+    beforeEach(() => {
+      wrapper = createWrapper({ hasAccess: false });
+    });
+    test('snapshot', () => {
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('links to home URL', () => {
+      expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        track.course.enterCourseClicked,
+        defaultProps.cardId,
+        homeUrl,
+      ));
+    });
+    test('link is disabled', () => {
+      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    });
  });
 });
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/BeginCourseButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/BeginCourseButton.test.jsx.snap
@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BeginCourseButton snapshot renders default button when learner has access to the course 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="#"
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "upgradeUrl": "home-url",
+      },
+    }
+  }
+>
+  Begin Course
+</ActionButton>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/ResumeButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/ResumeButton.test.jsx.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResumeButton snapshot renders default button when learner has access to the course 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="#"
+  onClick={[MockFunction useTrackCourseEvent('enterCourseClicked', 'cardId', 'resumeUrl')]}
+>
+  Resume
+</ActionButton>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/SelectSessionButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/SelectSessionButton.test.jsx.snap
@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectSessionButton snapshot renders default button 1`] = `
+<ActionButton
+  disabled={false}
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Select Session
+</ActionButton>
+`;
+
+exports[`SelectSessionButton snapshot renders disabled button if masquerading 1`] = `
+<ActionButton
+  disabled={true}
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Select Session
+</ActionButton>
+`;
+
+exports[`SelectSessionButton snapshot renders disabled button when user does not have access to the course 1`] = `
+<ActionButton
+  disabled={true}
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Select Session
+</ActionButton>
+`;
--- 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,42 @@
+// 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={
+    Object {
+      "trackCourseEvent": Object {
+        "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>
+`;
+
+exports[`UpgradeButton snapshot masquerading 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
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewCourseButton learner does not have access to course snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={true}
+  href="#"
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "upgradeUrl": "homeUrl",
+      },
+    }
+  }
+>
+  View Course
+</ActionButton>
+`;
+
+exports[`ViewCourseButton learner has access to course snapshot 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="#"
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.enterCourseClicked],
+        "upgradeUrl": "homeUrl",
+      },
+    }
+  }
+>
+  View Course
+</ActionButton>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/index.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/index.test.jsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardActions snapshot show begin course button when verified and not entitlement and has started 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <BeginCourseButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
+
+exports[`CourseCardActions snapshot show resume button when verified and not entitlement and has started 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <ResumeButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
+
+exports[`CourseCardActions snapshot show select session button when not verified and entitlement 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <SelectSessionButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
+
+exports[`CourseCardActions snapshot show upgrade button when not verified and not entitlement 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <UpgradeButton
+    cardId="cardId"
+  />
+  <BeginCourseButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
+
+exports[`CourseCardActions snapshot show view course button when not verified and entitlement and fulfilled 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <ViewCourseButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/index.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { ActionRow } from '@openedx/paragon';
+import { ActionRow } from '@edx/paragon';

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

+import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -13,25 +13,21 @@ import ViewCourseButton from './ViewCourseButton';

 export const CourseCardActions = ({ cardId }) => {
  const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
-  const {
-    hasStarted,
-  } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isVerified, hasStarted } = reduxHooks.useCardEnrollmentData(cardId);
  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
+  let PrimaryButton;
+  if (isEntitlement) {
+    PrimaryButton = isFulfilled ? ViewCourseButton : SelectSessionButton;
+  } else if (isArchived) {
+    PrimaryButton = ViewCourseButton;
+  } else {
+    PrimaryButton = hasStarted ? ResumeButton : BeginCourseButton;
+  }

  return (
    <ActionRow data-test-id="CourseCardActions">
-      <CourseCardActionSlot cardId={cardId} />
-      {isEntitlement && (isFulfilled
-        ? <ViewCourseButton cardId={cardId} />
-        : <SelectSessionButton cardId={cardId} />
-      )}
-      {(isArchived && !isEntitlement) && (
-        <ViewCourseButton cardId={cardId} />
-      )}
-      {!(isArchived || isEntitlement) && (hasStarted
-        ? <ResumeButton cardId={cardId} />
-        : <BeginCourseButton cardId={cardId} />
-      )}
+      {!(isEntitlement || isVerified) && <UpgradeButton cardId={cardId} />}
+      <PrimaryButton cardId={cardId} />
    </ActionRow>
  );
 };
--- a/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
@@ -1,95 +1,104 @@
-import { render, screen } from '@testing-library/react';
-import { reduxHooks } from '@src/hooks';
+import { shallow } from 'enzyme';
+
+import { reduxHooks } from 'hooks';

 import CourseCardActions from '.';

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
    useCardCourseRunData: jest.fn(),
    useCardEnrollmentData: jest.fn(),
    useCardEntitlementData: jest.fn(),
-    useMasqueradeData: jest.fn(),
  },
 }));

-jest.mock('@src/slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));
-jest.mock('./SelectSessionButton', () => jest.fn(() => <div>SelectSessionButton</div>));
-jest.mock('./ViewCourseButton', () => jest.fn(() => <div>ViewCourseButton</div>));
-jest.mock('./BeginCourseButton', () => jest.fn(() => <div>BeginCourseButton</div>));
-jest.mock('./ResumeButton', () => jest.fn(() => <div>ResumeButton</div>));
-
-const cardId = 'test-card-id';
-const props = { cardId };
+jest.mock('./UpgradeButton', () => 'UpgradeButton');
+jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
+jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
+jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
+jest.mock('./ResumeButton', () => 'ResumeButton');

 describe('CourseCardActions', () => {
-  const mockHooks = ({
-    isEntitlement = false,
-    isExecEd2UCourse = false,
-    isFulfilled = false,
-    isArchived = false,
-    isVerified = false,
-    hasStarted = false,
-    isMasquerading = false,
-  } = {}) => {
+  const props = {
+    cardId: 'cardId',
+  };
+  const createWrapper = ({
+    isEntitlement, isFulfilled, isArchived, isVerified, hasStarted,
+  }) => {
    reduxHooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isFulfilled });
    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ isArchived });
-    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isExecEd2UCourse, isVerified, hasStarted });
-    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isVerified, hasStarted });
+    return shallow(<CourseCardActions {...props} />);
  };
-  const renderComponent = () => render(<CourseCardActions {...props} />);
-  describe('hooks', () => {
-    it('initializes redux hooks', () => {
-      mockHooks();
-      renderComponent();
-      expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
-      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+  describe('snapshot', () => {
+    test('show upgrade button when not verified and not entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show select session button when not verified and entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show begin course button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show resume button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: true,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show view course button when not verified and entitlement and fulfilled', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: true, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
    });
  });
-  describe('output', () => {
-    describe('entitlement course', () => {
-      it('renders ViewCourseButton if fulfilled', () => {
-        mockHooks({ isEntitlement: true, isFulfilled: true });
-        renderComponent();
-        const ViewCourseButton = screen.getByText('ViewCourseButton');
-        expect(ViewCourseButton).toBeInTheDocument();
-      });
-      it('renders SelectSessionButton if not fulfilled', () => {
-        mockHooks({ isEntitlement: true });
-        renderComponent();
-        const SelectSessionButton = screen.getByText('SelectSessionButton');
-        expect(SelectSessionButton).toBeInTheDocument();
+
+  describe('behavior', () => {
+    it('show upgrade button when not verified and not entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
      });
+      expect(wrapper.find('UpgradeButton')).toHaveLength(1);
    });
-    describe('not entitlement, verified, or exec ed', () => {
-      it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
-        mockHooks({ isArchived: true });
-        renderComponent();
-        const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
-        expect(CourseCardActionSlot).toBeInTheDocument();
-        const ViewCourseButton = screen.getByText('ViewCourseButton');
-        expect(ViewCourseButton).toBeInTheDocument();
+    it('show select session button when not verified and entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
      });
-      describe('unstarted courses', () => {
-        it('renders CourseCardActionSlot and BeginCourseButton', () => {
-          mockHooks();
-          renderComponent();
-          const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
-          expect(CourseCardActionSlot).toBeInTheDocument();
-          const BeginCourseButton = screen.getByText('BeginCourseButton');
-          expect(BeginCourseButton).toBeInTheDocument();
-        });
+      expect(wrapper.find('SelectSessionButton')).toHaveLength(1);
+    });
+    it('show begin course button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: false,
      });
-      describe('active courses (started, and not archived)', () => {
-        it('renders CourseCardActionSlot and ResumeButton', () => {
-          mockHooks({ hasStarted: true });
-          renderComponent();
-          const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
-          expect(CourseCardActionSlot).toBeInTheDocument();
-          const ResumeButton = screen.getByText('ResumeButton');
-          expect(ResumeButton).toBeInTheDocument();
-        });
+      expect(wrapper.find('BeginCourseButton')).toHaveLength(1);
+    });
+    it('show resume button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: true,
      });
+      expect(wrapper.find('ResumeButton')).toHaveLength(1);
+    });
+    it('show view course button when not verified and entitlement and fulfilled', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: true, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper.find('ViewCourseButton')).toHaveLength(1);
+    });
+    it('show view course button when not verified and entitlement and fulfilled and archived', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: true, isArchived: true, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper.find('ViewCourseButton')).toHaveLength(1);
    });
  });
 });
--- 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 { StrictDict } from 'utils';

-const messages = defineMessages({
+export const messages = StrictDict({
+  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
@@ -2,12 +2,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { MailtoLink, Hyperlink } from '@openedx/paragon';
-import { CheckCircle } from '@openedx/paragon/icons';
-import { useIntl } from '@openedx/frontend-base';
+import { MailtoLink, Hyperlink } from '@edx/paragon';
+import { CheckCircle } from '@edx/paragon/icons';
+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';

@@ -26,28 +26,16 @@ export const CertificateBanner = ({ cardId }) => {
  const { formatMessage } = useIntl();
  const formatDate = useFormatDate();

-  const emailLink = address => <MailtoLink to={address}>{address}</MailtoLink>;
+  const emailLink = address => address && <MailtoLink to={address}>{address}</MailtoLink>;

  if (certificate.isRestricted) {
    return (
      <Banner variant="danger">
-        {supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
+        {formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) })}
        {isVerified && '  '}
-        {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
-      </Banner>
-    );
-  }
-  if (certificate.isDownloadable) {
-    return (
-      <Banner variant="success" icon={CheckCircle}>
-        {formatMessage(messages.certReady)}
-        {certificate.certPreviewUrl && (
-          <>
-            {'  '}
-            <Hyperlink isInline destination={certificate.certPreviewUrl}>
-              {formatMessage(messages.viewCertificate)}
-            </Hyperlink>
-          </>
+        {isVerified && formatMessage(
+          messages.certRefundContactBilling,
+          { billingEmail: emailLink(billingEmail) },
        )}
      </Banner>
    );
@@ -75,6 +63,17 @@ export const CertificateBanner = ({ cardId }) => {
      </Banner>
    );
  }
+  if (certificate.isDownloadable) {
+    return (
+      <Banner variant="success" icon={CheckCircle}>
+        {formatMessage(messages.certReady)}
+        {'  '}
+        <Hyperlink isInline destination={certificate.certPreviewUrl}>
+          {formatMessage(messages.viewCertificate)}
+        </Hyperlink>
+      </Banner>
+    );
+  }
  if (certificate.isEarnedButUnavailable) {
    return (
      <Banner>
--- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx
@@ -1,10 +1,10 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
+import { shallow } from 'enzyme';

-import { reduxHooks } from '@src/hooks';
+import { reduxHooks } from 'hooks';
 import CertificateBanner from './CertificateBanner';
+import messages from './messages';

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  utilHooks: {
    useFormatDate: jest.fn(() => date => date),
  },
@@ -17,226 +17,135 @@ jest.mock('@src/hooks', () => ({
  },
 }));

-const defaultCertificate = {
-  availableDate: '10/20/3030',
-  isRestricted: false,
-  isDownloadable: false,
-  isEarnedButUnavailable: false,
-};
-const defaultEnrollment = {
-  isAudit: false,
-  isVerified: false,
-};
-const defaultCourseRun = { isArchived: false };
-const defaultGrade = { isPassing: false };
-const defaultPlatformSettings = {};
-const props = { cardId: 'cardId' };
-const supportEmail = 'suport@email.com';
-const billingEmail = 'billing@email.com';
+jest.mock('components/Banner', () => 'Banner');

 describe('CertificateBanner', () => {
+  const props = { cardId: 'cardId' };
+  reduxHooks.usePlatformSettingsData.mockReturnValue({
+    supportEmail: 'suport@email',
+    billingEmail: 'billing@email',
+  });
  reduxHooks.useCardCourseRunData.mockReturnValue({
    minPassingGrade: 0.8,
    progressUrl: 'progressUrl',
  });
+
+  const defaultCertificate = {
+    availableDate: '10/20/3030',
+    isRestricted: false,
+    isDownloadable: false,
+    isEarnedButUnavailable: false,
+  };
+  const defaultEnrollment = {
+    isAudit: false,
+    isVerified: false,
+  };
+  const defaultCourseRun = { isArchived: false };
+  const defaultGrade = { isPassing: false };
  const createWrapper = ({
    certificate = {},
    enrollment = {},
    grade = {},
    courseRun = {},
-    platformSettings = {},
  }) => {
    reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
    reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
-    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
-    return render(<IntlProvider locale="en"><CertificateBanner {...props} /></IntlProvider>);
+    return shallow(<CertificateBanner {...props} />);
  };
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('is restricted', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
+  describe('snapshot', () => {
+    test('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    const msg = screen.getByText((text) => text.includes('please let us know.'));
-    expect(msg).toBeInTheDocument();
-    expect(msg).not.toContain(supportEmail);
-  });
-  it('is restricted with support email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      platformSettings: {
-        supportEmail,
-      },
+    test('is restricted and verified', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    const msg = screen.getByText((text) => text.includes(supportEmail));
-    expect(msg).toBeInTheDocument();
-  });
-  it('is restricted with billing email but not verified', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      platformSettings: {
-        billingEmail,
-      },
+    test('not passing and audit', () => {
+      const wrapper = createWrapper({
+        enrollment: {
+          isAudit: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    expect(banner).toHaveClass('alert-danger');
-    const msg = screen.queryByText((text) => text.includes(billingEmail));
-    expect(msg).not.toBeInTheDocument();
-  });
-  it('is restricted and verified', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
+    test('not passing and has finished', () => {
+      const wrapper = createWrapper({
+        courseRun: { isArchived: true },
+      });
+      expect(wrapper).toMatchSnapshot();
    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    const restrictedMsg = screen.getByText((text) => text.includes('please let us know.'));
-    expect(restrictedMsg).toBeInTheDocument();
-    const refundMsg = screen.getByText((text) => text.includes('If you would like a refund'));
-    expect(refundMsg).toBeInTheDocument();
-  });
-  it('is restricted and verified with support email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
-      platformSettings: {
-        supportEmail,
-      },
+    test('not passing and not audit and not finished', () => {
+      const wrapper = createWrapper({});
+      expect(wrapper).toMatchSnapshot();
    });
-    const restrictedMsg = screen.getByText((text) => text.includes(supportEmail));
-    expect(restrictedMsg).toBeInTheDocument();
-    const refundMsg = screen.getByText((text) => text.includes('If you would like a refund'));
-    expect(refundMsg).toBeInTheDocument();
-    expect(refundMsg.innerHTML).not.toContain(billingEmail);
-  });
-  it('is restricted and verified with billing email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
-      platformSettings: {
-        billingEmail,
-      },
+    test('is passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+        certificate: {
+          isDownloadable: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
    });
-    const restrictedMsg = screen.queryByText((text) => text.includes('please let us know.'));
-    expect(restrictedMsg).toBeInTheDocument();
-    expect(restrictedMsg.innerHTML).not.toContain(supportEmail);
-    const refundMsg = screen.getByText((text) => text.includes(billingEmail));
-    expect(refundMsg).toBeInTheDocument();
-  });
-  it('is restricted and verified with support and billing email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
-      platformSettings: {
-        supportEmail,
-        billingEmail,
-      },
+    test('is passing and is earned but unavailable', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+        certificate: {
+          isEarnedButUnavailable: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
    });
-    const restrictedMsg = screen.getByText((text) => text.includes(supportEmail));
-    expect(restrictedMsg).toBeInTheDocument();
-    const refundMsg = screen.getByText((text) => text.includes(billingEmail));
-    expect(refundMsg).toBeInTheDocument();
-  });
-  it('is passing and is downloadable', () => {
-    createWrapper({
-      grade: { isPassing: true },
-      certificate: { isDownloadable: true },
+    test('is passing and not downloadable render empty', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    expect(banner).toHaveClass('alert-success');
-    const readyMsg = screen.getByText((text) => text.includes('Congratulations.'));
-    expect(readyMsg).toBeInTheDocument();
  });
-  it('not passing and is downloadable', () => {
-    createWrapper({
-      grade: { isPassing: false },
-      certificate: { isDownloadable: true },
+  describe('behavior', () => {
+    it('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+      });
+      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
+      expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
+      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    expect(banner).toHaveClass('alert-success');
-    const readyMsg = screen.getByText((text) => text.includes('Congratulations.'));
-    expect(readyMsg).toBeInTheDocument();
-  });
-  it('not passing and audit', () => {
-    createWrapper({
-      enrollment: {
-        isAudit: true,
-      },
+    it('is restricted and verified', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+      });
+      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
+      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
+      expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-info');
-    const auditMsg = screen.getByText((text) => text.includes('Grade required to pass the course:'));
-    expect(auditMsg).toBeInTheDocument();
-  });
-  it('not passing and has finished', () => {
-    createWrapper({
-      courseRun: { isArchived: true },
-    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-warning');
-    const archivedMsg = screen.getByText('You are not eligible for a certificate.');
-    expect(archivedMsg).toBeInTheDocument();
-  });
-  it('not passing and not audit and not finished', () => {
-    createWrapper({});
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-warning');
-    const msg = screen.getByText((text) => text.includes('Grade required for a certificate'));
-    expect(msg).toBeInTheDocument();
-  });
-  it('is passing and is earned but unavailable', () => {
-    createWrapper({
-      grade: {
-        isPassing: true,
-      },
-      certificate: {
-        isEarnedButUnavailable: true,
-      },
-    });
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-info');
-    const earnedMsg = screen.getByText((text) => text.includes('Your grade and certificate will be ready after'));
-    expect(earnedMsg).toBeInTheDocument();
-  });
-  it('is passing and not downloadable render empty', () => {
-    createWrapper({
-      grade: {
-        isPassing: true,
-      },
-    });
-    const banner = screen.queryByRole('alert');
-    expect(banner).toBeNull();
  });
 });
--- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
@@ -1,18 +1,18 @@
 /* eslint-disable max-len */
 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 { Hyperlink } from '@edx/paragon';
+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,15 +26,33 @@ export const CourseBanner = ({ cardId }) => {
  return (
    <>
      {isAuditAccessExpired
-        && (
+        && (canUpgrade ? (
          <Banner>
            {formatMessage(messages.auditAccessExpired)}
            {'  '}
-            <Hyperlink isInline destination="">
-              {formatMessage(messages.findAnotherCourse)}
-            </Hyperlink>
+            {formatMessage(messages.upgradeToAccess)}
          </Banner>
-        )}
+        ) : (
+          <Banner>
+            {formatMessage(messages.auditAccessExpired)}
+            {'  '}
+            {
+              <Hyperlink isInline destination="">
+                {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 +61,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
@@ -1,13 +1,15 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Hyperlink } from '@edx/paragon';

-import { reduxHooks } from '@src/hooks';
-import { formatMessage } from '@src/testUtils';
+import { reduxHooks } from 'hooks';
+import { formatMessage } from 'testUtils';
 import { CourseBanner } from './CourseBanner';

 import messages from './messages';

-jest.mock('@src/hooks', () => ({
+jest.mock('components/Banner', () => 'Banner');
+jest.mock('hooks', () => ({
  utilHooks: {
    useFormatDate: () => date => date,
  },
@@ -17,10 +19,13 @@ jest.mock('@src/hooks', () => ({
  },
 }));

-const cardId = 'test-card-id';
+const cardId = 'my-test-course-number';
+
+let el;

 const enrollmentData = {
  isVerified: false,
+  canUpgrade: false,
  isAuditAccessExpired: false,
  coursewareAccess: {
    hasUnmetPrerequisites: false,
@@ -34,7 +39,7 @@ const courseRunData = {
  marketingUrl: 'marketing-url',
 };

-const renderCourseBanner = (overrides = {}) => {
+const render = (overrides = {}) => {
  const {
    courseRun = {},
    enrollment = {},
@@ -47,58 +52,114 @@ const renderCourseBanner = (overrides = {}) => {
    ...enrollmentData,
    ...enrollment,
  });
-  return render(<IntlProvider locale="en"><CourseBanner cardId={cardId} /></IntlProvider>);
+  el = shallow(<CourseBanner cardId={cardId} />);
 };

 describe('CourseBanner', () => {
-  it('initializes data with course number from enrollment, course and course run data', () => {
-    renderCourseBanner();
+  test('initializes data with course number from enrollment, course and course run data', () => {
+    render();
    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
    expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
  });
-  it('no display if learner is verified', () => {
-    renderCourseBanner({ enrollment: { isVerified: true } });
-    expect(screen.queryByRole('alert')).toBeNull();
+  test('no display if learner is verified', () => {
+    render({ enrollment: { isVerified: true } });
+    expect(el.isEmptyRender()).toEqual(true);
  });
-  describe('audit access expired', () => {
-    it('should display correct message and link', () => {
-      renderCourseBanner({ enrollment: { isAuditAccessExpired: true } });
-      const auditAccessText = screen.getByText(formatMessage(messages.auditAccessExpired));
-      expect(auditAccessText).toBeInTheDocument();
-      const auditAccessLink = screen.getByText(formatMessage(messages.findAnotherCourse));
-      expect(auditAccessLink).toBeInTheDocument();
+  describe('audit access expired, can upgrade', () => {
+    beforeEach(() => {
+      render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } });
+    });
+    test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.text()).toContain(messages.upgradeToAccess.defaultMessage);
    });
  });
+  describe('audit access expired, cannot upgrade', () => {
+    beforeEach(() => {
+      render({ enrollment: { isAuditAccessExpired: true } });
+    });
+    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.defaultMessage);
+    });
+  });
+  describe('course run active and cannot upgrade', () => {
+    beforeEach(() => {
+      render({ courseRun: { isActive: true } });
+    });
+    test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage);
+      const link = el.find(Hyperlink);
+      expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage);
+      expect(link.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.html()).toEqual('');
+    render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
+    expect(el.html()).toEqual('');
+  });
  describe('unmet prerequisites', () => {
-    it('should display correct message', () => {
-      renderCourseBanner({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
-      const preReqText = screen.getByText(formatMessage(messages.prerequisitesNotMet));
-      expect(preReqText).toBeInTheDocument();
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
+    });
+    test('snapshot: unmetPrerequisites', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: prerequisitesNotMet', () => {
+      expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage);
    });
  });
  describe('too early', () => {
    describe('no start date', () => {
-      it('should not display banner', () => {
-        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
-        const banner = screen.queryByRole('alert');
-        expect(banner).toBeNull();
+      beforeEach(() => {
+        render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
      });
+      test('snapshot', () => expect(el).toMatchSnapshot());
+      test('messages', () => expect(el.text()).toEqual(''));
    });
    describe('has start date', () => {
-      it('should display messages courseHasNotStarted', () => {
-        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } } });
-        const earlyMsg = screen.getByText(
+      beforeEach(() => {
+        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
+      });
+      test('snapshot', () => expect(el).toMatchSnapshot());
+
+      test('messages: courseHasNotStarted', () => {
+        expect(el.text()).toContain(
          formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
        );
-        expect(earlyMsg).toBeInTheDocument();
      });
    });
  });
  describe('staff', () => {
-    it('should not display banner', () => {
-      renderCourseBanner({ enrollment: { coursewareAccess: { isStaff: true } } });
-      const banner = screen.queryByRole('alert');
-      expect(banner).toBeNull();
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { isStaff: true } } });
+    });
+    test('snapshot: isStaff', () => {
+      expect(el).toMatchSnapshot();
    });
  });
+  test('snapshot: stacking banners', () => {
+    render({
+      enrollment: {
+        coursewareAccess: {
+          isStaff: true,
+          isTooEarly: true,
+          hasUnmetPrerequisites: true,
+        },
+      },
+    });
+    expect(el).toMatchSnapshot();
+  });
 });
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/snapshots/index.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/snapshots/index.test.jsx.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CreditBanner component render with error state snapshot 1`] = `
+<Banner
+  variant="danger"
+>
+  <p
+    className="credit-error-msg"
+  >
+    <format-message-function
+      message={
+        Object {
+          "defaultMessage": "An error occurred with this transaction.  For help, contact {supportEmailLink}.",
+          "description": "",
+          "id": "learner-dash.courseCard.banners.credit.error",
+        }
+      }
+      values={
+        Object {
+          "supportEmailLink": <EmailLink
+            address="test-support-email"
+          />,
+        }
+      }
+    />
+  </p>
+  <ContentComponent
+    cardId="test-card-id"
+  />
+</Banner>
+`;
+
+exports[`CreditBanner component render with no error state snapshot 1`] = `
+<Banner>
+  <ContentComponent
+    cardId="test-card-id"
+  />
+</Banner>
+`;
--- 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/hooks.test.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/hooks.test.js
@@ -1,5 +1,5 @@
-import { keyStore } from '@src/utils';
-import { reduxHooks } from '@src/hooks';
+import { keyStore } from 'utils';
+import { reduxHooks } from 'hooks';

 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -9,7 +9,7 @@ import RejectedContent from './views/RejectedContent';

 import * as hooks from './hooks';

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
    useCardCreditData: jest.fn(),
    usePlatformSettingsData: jest.fn(),
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.jsx
@@ -1,11 +1,11 @@
 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 EmailLink from 'components/EmailLink';

-import { MailtoLink } from '@openedx/paragon';
 import hooks from './hooks';
 import messages from './messages';

@@ -15,14 +15,13 @@ export const CreditBanner = ({ cardId }) => {
  if (hookData === null) {
    return null;
  }
-
  const { ContentComponent, error, supportEmail } = hookData;
-  const supportEmailLink = (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>);
+  const supportEmailLink = (<EmailLink address={supportEmail} />);
  return (
    <Banner {...(error && { variant: 'danger' })}>
      {error && (
-        <p className="credit-error-msg" data-testid="credit-error-msg">
-          {supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}
+        <p className="credit-error-msg">
+          {formatMessage(messages.error, { supportEmailLink })}
        </p>
      )}
      <ContentComponent cardId={cardId} />
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/index.test.jsx
@@ -1,65 +1,82 @@
-import { screen, render } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { formatMessage } from 'testUtils';
+
+import EmailLink from 'components/EmailLink';
+
 import hooks from './hooks';
-import { CreditBanner } from '.';
+import messages from './messages';
+import CreditBanner from '.';
+
+jest.mock('components/Banner', () => 'Banner');
+jest.mock('components/EmailLink', () => 'EmailLink');

 jest.mock('./hooks', () => ({
  useCreditBannerData: jest.fn(),
 }));

-describe('CreditBanner', () => {
-  const mockCardId = 'test-card-id';
-  const mockContentComponent = () => <div data-testid="mock-content">Test Content</div>;
-  const mockSupportEmail = 'support@test.com';
+let el;
+const cardId = 'test-card-id';

-  const renderCreditBanner = () => render(
-    <IntlProvider locale="en">
-      <CreditBanner cardId={mockCardId} />
-    </IntlProvider>,
-  );
+const ContentComponent = () => 'ContentComponent';
+const supportEmail = 'test-support-email';

-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('should return null if hook returns null', () => {
-    hooks.useCreditBannerData.mockReturnValue(null);
-    renderCreditBanner();
-    const banner = screen.queryByRole('alert');
-    expect(banner).toBeNull();
-  });
-
-  it('should render content component without error', () => {
-    hooks.useCreditBannerData.mockReturnValue({
-      ContentComponent: mockContentComponent,
-      error: false,
+describe('CreditBanner component', () => {
+  describe('behavior', () => {
+    beforeEach(() => {
+      hooks.useCreditBannerData.mockReturnValue(null);
+      el = shallow(<CreditBanner cardId={cardId} />);
    });
-    renderCreditBanner();
-
-    expect(screen.getByTestId('mock-content')).toBeInTheDocument();
-    expect(screen.queryByTestId('credit-error-msg')).not.toBeInTheDocument();
-  });
-
-  it('should render error message with support email', () => {
-    hooks.useCreditBannerData.mockReturnValue({
-      ContentComponent: mockContentComponent,
-      error: true,
-      supportEmail: mockSupportEmail,
+    it('initializes hooks with cardId', () => {
+      expect(hooks.useCreditBannerData).toHaveBeenCalledWith(cardId);
    });
-    renderCreditBanner();
-
-    expect(screen.getByTestId('credit-error-msg')).toBeInTheDocument();
-    expect(screen.getByText(mockSupportEmail)).toBeInTheDocument();
-  });
-
-  it('should render error message without support email', () => {
-    hooks.useCreditBannerData.mockReturnValue({
-      ContentComponent: mockContentComponent,
-      error: true,
+    it('returns null if hookData is null', () => {
+      expect(el.isEmptyRender()).toEqual(true);
+    });
+  });
+  describe('render', () => {
+    describe('with error state', () => {
+      beforeEach(() => {
+        hooks.useCreditBannerData.mockReturnValue({
+          error: true,
+          ContentComponent,
+          supportEmail,
+        });
+        el = shallow(<CreditBanner cardId={cardId} />);
+      });
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      it('passes danger variant to Banner parent', () => {
+        expect(el.find('Banner').props().variant).toEqual('danger');
+      });
+      it('includes credit-error-msg with support email link', () => {
+        expect(el.find('.credit-error-msg').containsMatchingElement(
+          formatMessage(messages.error, {
+            supportEmailLink: (<EmailLink address={supportEmail} />),
+          }),
+        )).toEqual(true);
+      });
+      it('loads ContentComponent with cardId', () => {
+        expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
+      });
+    });
+    describe('with no error state', () => {
+      beforeEach(() => {
+        hooks.useCreditBannerData.mockReturnValue({
+          error: false,
+          ContentComponent,
+          supportEmail,
+        });
+        el = shallow(<CreditBanner cardId={cardId} />);
+      });
+      test('snapshot', () => {
+        expect(el).toMatchSnapshot();
+      });
+      it('loads ContentComponent with cardId', () => {
+        expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
+      });
    });
-    renderCreditBanner();
-
-    expect(screen.getByTestId('credit-error-msg')).toBeInTheDocument();
-    expect(screen.queryByText(mockSupportEmail)).not.toBeInTheDocument();
  });
 });
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/messages.js
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/messages.js
@@ -1,16 +1,11 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { StrictDict } from 'utils';

-const messages = defineMessages({
+export const messages = StrictDict({
  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',
-    defaultMessage: 'An error occurred with this transaction.',
-  },
 });

 export default messages;
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.jsx
@@ -1,9 +1,9 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
-import { useIntl } from '@openedx/frontend-base';

-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
-import { reduxHooks } from '../../../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';

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

 export const ApprovedContent = ({ cardId }) => {
  const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
  const { formatMessage } = useIntl();
  return (
    <CreditContent
-      action={{ href, message: formatMessage(messages.viewCredit), disabled: isMasquerading }}
+      action={{ href, message: formatMessage(messages.viewCredit) }}
      message={formatMessage(
        messages.approved,
        {
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx
@@ -1,17 +1,21 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { formatMessage } from '@src/testUtils';
-import { reduxHooks } from '@src/hooks';
-import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { formatMessage } from 'testUtils';
+import { reduxHooks } from 'hooks';
 import messages from './messages';
+import ProviderLink from './components/ProviderLink';
 import ApprovedContent from './ApprovedContent';

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
    useCardCreditData: jest.fn(),
  },
 }));
+jest.mock('./components/CreditContent', () => 'CreditContent');
+jest.mock('./components/ProviderLink', () => 'ProviderLink');

+let el;
 const cardId = 'test-card-id';
 const credit = {
  providerStatusUrl: 'test-credit-provider-status-url',
@@ -19,62 +23,36 @@ const credit = {
 };
 reduxHooks.useCardCreditData.mockReturnValue(credit);

-const renderWithMasquerading = (isMasquerading = false) => render(
-  <IntlProvider locale="en">
-    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
-      <ApprovedContent cardId={cardId} />
-    </MasqueradeUserContext.Provider>
-  </IntlProvider>
-);
-
 describe('ApprovedContent component', () => {
-  describe('hooks', () => {
+  beforeEach(() => {
+    el = shallow(<ApprovedContent cardId={cardId} />);
+  });
+  describe('behavior', () => {
    it('initializes credit data with cardId', () => {
-      renderWithMasquerading();
      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
    });
  });
  describe('render', () => {
    describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        jest.clearAllMocks();
-        renderWithMasquerading();
+      let component;
+      beforeAll(() => {
+        component = el.find('CreditContent');
      });
-      it('action.message is formatted viewCredit message', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).toBeInTheDocument();
-        expect(actionButton).toHaveTextContent(formatMessage(messages.viewCredit));
+      test('action.href from credit.providerStatusUrl', () => {
+        expect(component.props().action.href).toEqual(credit.providerStatusUrl);
      });
-      it('action.href from credit.providerStatusUrl', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).toHaveAttribute('href', credit.providerStatusUrl);
+      test('action.message is formatted viewCredit message', () => {
+        expect(component.props().action.message).toEqual(formatMessage(messages.viewCredit));
      });
-      it('action.disabled is false', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).not.toHaveAttribute('aria-disabled', 'true');
-        expect(actionButton).not.toHaveClass('disabled');
-        expect(actionButton).toBeEnabled();
-      });
-      it('message is formatted approved message', () => {
-        const creditMsg = screen.getByTestId('credit-msg');
-        expect(creditMsg).toBeInTheDocument();
-        expect(creditMsg.textContent).toContain(`${credit.providerName} has approved your request for course credit`);
-      });
-    });
-    describe('when masquerading', () => {
-      beforeEach(() => {
-        renderWithMasquerading(true);
-      });
-
-      it('disables the action button', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).toHaveAttribute('aria-disabled', 'true');
-        expect(actionButton).toHaveClass('disabled');
-      });
-
-      it('still renders provider name and link correctly', () => {
-        const creditMsg = screen.getByTestId('credit-msg');
-        expect(creditMsg.textContent).toContain(credit.providerName);
+      test('message is formatted approved message', () => {
+        expect(component.props().message).toEqual(formatMessage(
+          messages.approved,
+          {
+            congratulations: (<b>{formatMessage(messages.congratulations)}</b>),
+            linkToProviderSite: <ProviderLink cardId={cardId} />,
+            providerName: credit.providerName,
+          },
+        ));
      });
    });
  });
--- 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/EligibleContent.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx
@@ -1,26 +1,29 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+import { shallow } from 'enzyme';

-import { reduxHooks } from '@src/hooks';
-import track from '@src/tracking';
+import { reduxHooks } from 'hooks';
+import { formatMessage } from 'testUtils';
+import track from 'tracking';

 import messages from './messages';
 import EligibleContent from './EligibleContent';

-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
  reduxHooks: {
    useCardCreditData: jest.fn(),
    useCardCourseRunData: jest.fn(),
  },
 }));
-
-jest.mock('@src/tracking', () => ({
+jest.mock('./components/CreditContent', () => 'CreditContent');
+jest.mock('tracking', () => ({
  credit: {
-    purchase: jest.fn(),
+    purchase: (...args) => ({ trackCredit: args }),
  },
 }));

+let el;
+let component;
+
 const cardId = 'test-card-id';
 const courseId = 'test-course-id';
 const credit = {
@@ -29,45 +32,50 @@ const credit = {
 reduxHooks.useCardCreditData.mockReturnValue(credit);
 reduxHooks.useCardCourseRunData.mockReturnValue({ courseId });

-const renderEligibleContent = () => render(<IntlProvider locale="en" messages={{}}><EligibleContent cardId={cardId} /></IntlProvider>);
-
+const render = () => {
+  el = shallow(<EligibleContent cardId={cardId} />);
+};
+const loadComponent = () => {
+  component = el.find('CreditContent');
+};
 describe('EligibleContent component', () => {
-  describe('hooks', () => {
+  beforeEach(() => {
+    render();
+  });
+  describe('behavior', () => {
    it('initializes credit data with cardId', () => {
-      renderEligibleContent();
      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
    });
    it('initializes course run data with cardId', () => {
-      renderEligibleContent();
      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
    });
  });
-  describe('behavior', () => {
+  describe('render', () => {
    describe('rendered CreditContent component', () => {
-      it('action message is formatted getCredit message', () => {
-        renderEligibleContent();
-        const button = screen.getByRole('button', { name: messages.getCredit.defaultMessage });
-        expect(button).toBeInTheDocument();
+      beforeEach(() => {
+        loadComponent();
      });
-      it('onClick sends credit purchase track event', async () => {
-        const user = userEvent.setup();
-        renderEligibleContent();
-        const button = screen.getByRole('button', { name: messages.getCredit.defaultMessage });
-        await user.click(button);
-        expect(track.credit.purchase).toHaveBeenCalledWith(courseId);
+      test('action.onClick sends credit purchase track event', () => {
+        expect(component.props().action.onClick).toEqual(
+          track.credit.purchase(courseId),
+        );
      });
-      it('message is formatted eligible message if provider', () => {
-        renderEligibleContent();
-        const eligibleMessage = screen.getByTestId('credit-msg');
-        expect(eligibleMessage).toBeInTheDocument();
-        expect(eligibleMessage).toHaveTextContent(credit.providerName);
+      test('action.message is formatted getCredit message', () => {
+        expect(component.props().action.message).toEqual(formatMessage(messages.getCredit));
      });
-      it('message is formatted eligible message if no provider', () => {
-        reduxHooks.useCardCreditData.mockReturnValue({});
-        renderEligibleContent();
-        const eligibleMessage = screen.getByTestId('credit-msg');
-        expect(eligibleMessage).toBeInTheDocument();
-        expect(eligibleMessage).toHaveTextContent(messages.getCredit.defaultMessage);
+      test('message is formatted eligible message if no provider', () => {
+        reduxHooks.useCardCreditData.mockReturnValueOnce({});
+        render();
+        loadComponent();
+        expect(component.props().message).toEqual(formatMessage(
+          messages.eligible,
+          { getCredit: (<b>{formatMessage(messages.getCredit)}</b>) },
+        ));
+      });
+      test('message is formatted eligible message if provider', () => {
+        expect(component.props().message).toEqual(
+          formatMessage(messages.eligibleFromProvider, { providerName: credit.providerName }),
+        );
      });
    });
  });
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.jsx
@@ -1,8 +1,8 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
-import { useIntl } from '@openedx/frontend-base';

-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';
 import hooks from './hooks';
@@ -12,13 +12,11 @@ import messages from './messages';
 export const MustRequestContent = ({ cardId }) => {
  const { formatMessage } = useIntl();
  const { requestData, createCreditRequest } = hooks.useCreditRequestData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
  return (
    <CreditContent
      action={{
        message: formatMessage(messages.requestCredit),
        onClick: createCreditRequest,
-        disabled: isMasquerading,
      }}
      message={formatMessage(messages.mustRequest, {
        linkToProviderSite: (<ProviderLink cardId={cardId} />),
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx
@@ -1,103 +1,60 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { formatMessage } from 'testUtils';

-import { reduxHooks } from '@src/hooks';
-import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 import messages from './messages';
 import hooks from './hooks';
+import ProviderLink from './components/ProviderLink';
 import MustRequestContent from './MustRequestContent';

 jest.mock('./hooks', () => ({
  useCreditRequestData: jest.fn(),
 }));
+jest.mock('./components/CreditContent', () => 'CreditContent');
+jest.mock('./components/ProviderLink', () => 'ProviderLink');

-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
-}));
+let el;
+let component;

 const cardId = 'test-card-id';
-const requestData = {
-  url: 'test-request-data-url',
-  parameters: {
-    key1: 'val1',
-    key2: 'val2',
-    key3: 'val3',
-  },
-};
-const providerName = 'test-credit-provider-name';
-const providerStatusUrl = 'test-credit-provider-status-url';
+const requestData = { test: 'requestData' };
 const createCreditRequest = jest.fn().mockName('createCreditRequest');
+hooks.useCreditRequestData.mockReturnValue({ requestData, createCreditRequest });

-const renderMustRequestContent = (isMasquerading = false) => render(
-  <IntlProvider locale="en" messages={messages}>
-    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
-      <MustRequestContent cardId={cardId} />
-    </MasqueradeUserContext.Provider>
-  </IntlProvider>,
-);
-
+const render = () => {
+  el = shallow(<MustRequestContent cardId={cardId} />);
+};
 describe('MustRequestContent component', () => {
  beforeEach(() => {
-    jest.clearAllMocks();
-    hooks.useCreditRequestData.mockReturnValue({
-      requestData,
-      createCreditRequest,
-    });
-    reduxHooks.useCardCreditData.mockReturnValue({
-      providerName,
-      providerStatusUrl,
-    });
+    render();
  });
-
-  describe('hooks', () => {
+  describe('behavior', () => {
    it('initializes credit request data with cardId', () => {
-      renderMustRequestContent();
      expect(hooks.useCreditRequestData).toHaveBeenCalledWith(cardId);
    });
  });
-
-  describe('behavior', () => {
-    describe('rendered content', () => {
+  describe('render', () => {
+    describe('rendered CreditContent component', () => {
      beforeEach(() => {
-        renderMustRequestContent();
+        component = el.find('CreditContent');
      });
-
-      it('calls createCreditRequest when request credit button is clicked', async () => {
-        const user = userEvent.setup();
-        const button = screen.getByRole('button', { name: /request credit/i });
-        await user.click(button);
-        expect(createCreditRequest).toHaveBeenCalled();
+      test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => {
+        expect(component.props().action.onClick).toEqual(createCreditRequest);
      });
-
-      it('shows request credit button that is enabled', () => {
-        const button = screen.getByRole('button', { name: /request credit/i });
-        expect(button).toBeEnabled();
+      test('action.message is formatted requestCredit message', () => {
+        expect(component.props().action.message).toEqual(formatMessage(messages.requestCredit));
      });
-
-      it('displays must request message with provider link', () => {
-        expect(screen.getByTestId('credit-msg')).toHaveTextContent(/request credit/i);
+      test('message is formatted mustRequest message', () => {
+        expect(component.props().message).toEqual(
+          formatMessage(messages.mustRequest, {
+            linkToProviderSite: (<ProviderLink cardId={cardId} />),
+            requestCredit: (<b>{formatMessage(messages.requestCredit)}</b>),
+          }),
+        );
      });
-
-      it('renders credit request form with correct data', () => {
-        const { container } = renderMustRequestContent();
-        const form = container.querySelector('form');
-        expect(form).toBeInTheDocument();
-        expect(form).toHaveAttribute('action', requestData.url);
-      });
-    });
-
-    describe('when masquerading', () => {
-      beforeEach(() => {
-        renderMustRequestContent(true);
-      });
-
-      it('disables the request credit button', () => {
-        const button = screen.getByRole('button', { name: /request credit/i });
-        expect(button).toHaveAttribute('aria-disabled', 'true');
-        expect(button).toHaveClass('disabled');
+      test('requestData drawn from useCreditRequestData hook', () => {
+        expect(component.props().requestData).toEqual(requestData);
      });
    });
  });
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.jsx
@@ -1,22 +1,20 @@
+import React from 'react';
 import PropTypes from 'prop-types';
-import { useContext } from 'react';
-import { useIntl } from '@openedx/frontend-base';

-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
-import { reduxHooks } from '../../../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+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 { formatMessage } = useIntl();
  return (
    <CreditContent
      action={{
        href,
        message: formatMessage(messages.viewDetails),
-        disabled: isMasquerading,
      }}
      message={formatMessage(messages.received, { providerName })}
    />
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
nsprenkle	94dd9e1cdd	test: update snapshots	2023-03-07 18:10:13 -05:00
nsprenkle	9f8249ef50	fix: update menu item link for variant header	2023-03-07 18:09:35 -05:00
nsprenkle	dab11db684	test: update snapshots	2023-03-07 17:29:52 -05:00
nsprenkle	315ca34121	fix: add environment variables for new URLs	2023-03-07 17:21:03 -05:00
nsprenkle	496a1c7de5	fix: update menu item link for account and profile	2023-03-07 17:14:18 -05:00
				`@@ -1 +0,0 @@`
				`export const appId = 'org.openedx.frontend.app.learnerDashboard';`