chore(deps): update dependency @openedx/paragon to v23.14.3

Remove reactifex and/or @edx/reactifex packages from devDependencies
as they are no longer needed. Translation extraction functionality has
been verified to work correctly without these dependencies.

Co-Authored-By: Claude <noreply@anthropic.com>

.env

@@ -2,6 +2,7 @@ NODE_ENV='production'
 NODE_PATH=./src
 BASE_URL=''
 LMS_BASE_URL=''
+ECOMMERCE_BASE_URL=''
 LOGIN_URL=''
 LOGOUT_URL=''
 CSRF_TOKEN_API_PATH=''
@@ -30,4 +31,16 @@ ENTERPRISE_MARKETING_URL=''
 ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
-LEARNING_MICROFRONTEND_URL=''
+LEARNING_BASE_URL=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL=''
+ACCOUNT_PROFILE_URL=''
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -1,13 +1,13 @@
 NODE_ENV='development'
-PORT=1993
-BASE_URL='localhost:1993'
+PORT=1996
+BASE_URL='localhost:1996'
 LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-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'
@@ -20,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -36,4 +36,17 @@ 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_MICROFRONTEND_URL='http://localhost:2000'
+LEARNING_BASE_URL='http://localhost:2000'
+SESSION_COOKIE_DOMAIN='localhost'
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL='http://localhost:1997'
+ACCOUNT_PROFILE_URL='http://localhost:1995'
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -1,13 +1,13 @@
 NODE_ENV='test'
-PORT=1993
-BASE_URL='localhost:1993'
+PORT=1996
+BASE_URL='localhost:1996'
 LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
 LOGIN_URL='http://localhost:18000/login'
 LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-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'
@@ -20,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -36,4 +36,15 @@ 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_MICROFRONTEND_URL='http://localhost:2000'
+LEARNING_BASE_URL='http://localhost:2000'
+HOTJAR_APP_ID='hot-jar-app-id'
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL='http://account-settings-url.test'
+ACCOUNT_PROFILE_URL='http://account-profile-url.test'
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=true
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+PARAGON_THEME_URLS={}

.eslintrc.js

@@ -1,10 +1,11 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {
     'import/no-named-as-default': 'off',
     'import/no-named-as-default-member': 'off',
     'import/no-self-import': 'off',
+    'import/no-import-module-exports': 'off',
     'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
   },
 });

.github/dependabot.yml

@@ -0,0 +1,7 @@
+version: 2
+updates:
+    # Adding new check for github-actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+        interval: "weekly"

.github/renovate.json

@@ -0,0 +1,33 @@
+{
+    "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"
+  }

.github/workflows/add-depr-ticket-to-depr-board.yml

@@ -0,0 +1,19 @@
+# Run the workflow that adds new tickets that are either:
+# - labelled "DEPR"
+# - title starts with "[DEPR]"
+# - body starts with "Proposal Date" (this is the first template field)
+# to the org-wide DEPR project board
+
+name: Add newly created DEPR issues to the DEPR project board
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  routeissue:
+    uses: openedx/.github/.github/workflows/add-depr-ticket-to-depr-board.yml@master
+    secrets:
+      GITHUB_APP_ID: ${{ secrets.GRAPHQL_AUTH_APP_ID }}
+      GITHUB_APP_PRIVATE_KEY: ${{ secrets.GRAPHQL_AUTH_APP_PEM }}
+      SLACK_BOT_TOKEN: ${{ secrets.SLACK_ISSUE_BOT_TOKEN }}

.github/workflows/add-remove-label-on-comment.yml

@@ -0,0 +1,20 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "label: " it tries to apply
+# the label indicated in rest of comment.
+# If the comment starts with "remove label: ", it tries
+# to remove the indicated label.
+# Note: Labels are allowed to have spaces and this script does
+# not parse spaces (as often a space is legitimate), so the command
+# "label: really long lots of words label" will apply the
+# label "really long lots of words label"
+
+name: Allows for the adding and removing of labels via comment
+
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  add_remove_labels:
+    uses: openedx/.github/.github/workflows/add-remove-label-on-comment.yml@master
+

.github/workflows/ci.yml

@@ -10,18 +10,16 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node: [12, 14, 16]
+    runs-on: ubuntu-latest
+
     steps:
     - name: Checkout
-      uses: actions/checkout@v2
+      uses: actions/checkout@v5
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v2
+      uses: actions/setup-node@v5
       with:
-        node-version: ${{ matrix.node }}
+        node-version-file: '.nvmrc'
 
     - name: Install dependencies
       run: npm ci
@@ -31,6 +29,9 @@ jobs:
 
     - name: Lint
       run: npm run lint
+    
+    - name: Type check
+      run: npm run types
 
     - name: Test
       run: npm run test
@@ -39,19 +40,7 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v2
-
-    - name: Send failure notification
-      if: ${{ failure() }}
-      uses: dawidd6/action-send-mail@v3
+      uses: codecov/codecov-action@v5
       with:
-        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
-          }}"
+        token: ${{ secrets.CODECOV_TOKEN }}
+        fail_ci_if_error: true

.github/workflows/commitlint.yml

@@ -7,4 +7,4 @@ on:
 
 jobs:
   commitlint:
-    uses: edx/.github/.github/workflows/commitlint.yml@master
+    uses: openedx/.github/.github/workflows/commitlint.yml@master

.github/workflows/lockfileversion-check.yml

@@ -10,4 +10,4 @@ on:
 
 jobs:
   version-check:
-    uses: edx/.github/.github/workflows/lockfileversion-check.yml@master
+    uses: openedx/.github/.github/workflows/lockfileversion-check-v3.yml@master

.github/workflows/npm-publish.yml

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

.github/workflows/self-assign-issue.yml

@@ -0,0 +1,12 @@
+# This workflow runs when a comment is made on the ticket
+# If the comment starts with "assign me" it assigns the author to the
+# ticket (case insensitive)
+
+name: Assign comment author to ticket if they say "assign me"
+on:
+  issue_comment:
+    types: [created]
+
+jobs:
+  self_assign_by_comment:
+    uses: openedx/.github/.github/workflows/self-assign-issue.yml@master

.gitignore

@@ -1,5 +1,6 @@
 .DS_Store
 .eslintcache
+env.config.*
 node_modules
 npm-debug.log
 coverage
@@ -25,3 +26,4 @@ module.config.js
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+src/i18n/messages

.husky/pre-push

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

.nvmrc

@@ -0,0 +1 @@
+24

.releaserc

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

.tx/config

@@ -1,9 +0,0 @@
-[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
-

Makefile

@@ -2,19 +2,15 @@ npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json
 
-transifex_resource = frontend-app-learner-dashboard
-transifex_langs = "ar,fr,es_419,zh_CN"
-
+intl_imports = ./node_modules/.bin/intl-imports.js
 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-react-intl
+transifex_temp = ./temp/babel-plugin-formatjs
 
-NPM_TESTS=build i18n_extract lint test is-es5
+NPM_TESTS=build i18n_extract lint test
 
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
@@ -44,20 +40,17 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# 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)
-
-# Pulls translations from Transifex.
 pull_translations:
-	tx pull -f --mode reviewed --languages=$(transifex_langs)
+	rm -rf src/i18n/messages
+	mkdir src/i18n/messages
+	cd src/i18n/messages \
+      && atlas pull $(ATLAS_OPTIONS) \
+               translations/frontend-platform/src/i18n/messages:frontend-platform \
+               translations/paragon/src/i18n/messages:paragon \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+               translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard
+
+	$(intl_imports) frontend-platform paragon frontend-component-footer frontend-app-learner-dashboard
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -0,0 +1,97 @@
+|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/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.
+
+Plugins
+-------
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
+Contributing
+------------
+
+Contributions are very welcome. Please read `So you want to contribute to Open edX <https://docs.openedx.org/en/latest/developers/quickstarts/so_you_want_to_contribute.html>`_ for details on how to get started as an Open edX contributor.
+
+This project is currently accepting all types of contributions — bug fixes, security fixes, maintenance work, or new features.
+However, if you intend to add a new feature, make sure it has gone through the `Product Review process <https://openedx.atlassian.net/wiki/spaces/COMM/pages/3875962884/How+to+submit+an+open+source+contribution+for+Product+Review>`_.
+
+When proposing a change, create an issue in this repo to get the discussion started.
+
+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.

catalog-info.yaml

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

example.env.config.js

@@ -0,0 +1,73 @@
+/*
+Learner Dashboard is now able to handle JS-based configuration!
+
+For the time being, the `.env.*` files are still made available when cloning down this repo or pulling from
+the master branch. To switch to using `env.config.js`, make a copy of `example.env.config.js` and configure as needed.
+
+For testing with Jest Snapshot, there is a mock in `/src/setupTest.jsx` for `getConfig` that will need to be
+uncommented.
+
+Note: having both .env and env.config.js files will follow a predictable order, in which non-empty values in the
+JS-based config will overwrite the .env environment variables.
+
+frontend-platform's getConfig loads configuration in the following sequence:
+- .env file config
+- optional handlers (commonly used to merge MFE-specific config in via additional process.env variables)
+- env.config.js file config
+- runtime config
+*/
+
+module.exports = {
+  NODE_ENV: 'development',
+  NODE_PATH: './src',
+  PORT: 1996,
+  BASE_URL: 'localhost:1996',
+  LMS_BASE_URL: 'http://localhost:18000',
+  ECOMMERCE_BASE_URL: 'http://localhost:18130',
+  CREDIT_PURCHASE_URL: 'http://localhost:8140',
+  LOGIN_URL: 'http://localhost:18000/login',
+  LOGOUT_URL: 'http://localhost:18000/logout',
+  LOGO_URL: 'https://edx-cdn.org/v3/default/logo.svg',
+  LOGO_TRADEMARK_URL: 'https://edx-cdn.org/v3/default/logo-trademark.svg',
+  LOGO_WHITE_URL: 'https://edx-cdn.org/v3/default/logo-white.svg',
+  FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
+  CSRF_TOKEN_API_PATH: '/csrf/api/v1/token',
+  REFRESH_ACCESS_TOKEN_ENDPOINT: 'http://localhost:18000/login_refresh',
+  ACCESS_TOKEN_COOKIE_NAME: 'edx-jwt-cookie-header-payload',
+  USER_INFO_COOKIE_NAME: 'edx-user-info',
+  SITE_NAME: 'localhost',
+  DATA_API_BASE_URL: 'http://localhost:8000',
+  // LMS_CLIENT_ID should match the lms DOT client application in your LMS container
+  LMS_CLIENT_ID: 'login-service-client-id',
+  SEGMENT_KEY: '',
+  FEATURE_FLAGS: {},
+  MARKETING_SITE_BASE_URL: 'http://localhost:18000',
+  SUPPORT_URL: 'http://localhost:18000/support',
+  CONTACT_URL: 'http://localhost:18000/contact',
+  OPEN_SOURCE_URL: 'http://localhost:18000/openedx',
+  TERMS_OF_SERVICE_URL: 'http://localhost:18000/terms-of-service',
+  PRIVACY_POLICY_URL: 'http://localhost:18000/privacy-policy',
+  FACEBOOK_URL: 'https://www.facebook.com',
+  TWITTER_URL: 'https://twitter.com',
+  YOU_TUBE_URL: 'https://www.youtube.com',
+  LINKED_IN_URL: 'https://www.linkedin.com',
+  REDDIT_URL: 'https://www.reddit.com',
+  APPLE_APP_STORE_URL: 'https://www.apple.com/ios/app-store/',
+  GOOGLE_PLAY_URL: 'https://play.google.com/store',
+  ENTERPRISE_MARKETING_URL: 'http://example.com',
+  ENTERPRISE_MARKETING_UTM_SOURCE: 'example.com',
+  ENTERPRISE_MARKETING_UTM_CAMPAIGN: 'example.com Referral',
+  ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM: 'Footer',
+  LEARNING_BASE_URL: 'http://localhost:2000',
+  SESSION_COOKIE_DOMAIN: 'localhost',
+  HOTJAR_APP_ID: '',
+  HOTJAR_VERSION: 6,
+  HOTJAR_DEBUG: '',
+  NEW_RELIC_APP_ID: '',
+  NEW_RELIC_LICENSE_KEY: '',
+  ACCOUNT_SETTINGS_URL: 'http://localhost:1997',
+  ACCOUNT_PROFILE_URL: 'http://localhost:1995',
+  ENABLE_NOTICES: '',
+  CAREER_LINK_URL: '',
+  EXPERIMENT_08_23_VAN_PAINTED_DOOR: true,
+};

jest.config.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
@@ -6,9 +6,6 @@ module.exports = createConfig('jest', {
     '<rootDir>/src/setupTest.jsx',
   ],
   modulePaths: ['<rootDir>/src/'],
-  snapshotSerializers: [
-    'enzyme-to-json/serializer',
-  ],
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',

openedx.yaml

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

package.json

@@ -1,24 +1,26 @@
 {
-  "name": "@edx/frontend-app-learner-dash",
+  "name": "@edx/frontend-app-learner-dashboard",
   "version": "0.0.1",
   "description": "",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/edx/frontend-app-learner-dash.git"
+    "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
   },
+  "browserslist": [
+    "extends @edx/browserslist-config"
+  ],
   "scripts": {
     "build": "fedx-scripts webpack",
-    "coveralls": "cat ./coverage/lcov.info | coveralls",
-    "is-es5": "es-check es5 ./dist/*.js",
-    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/learner-dashboard/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "quality": "npm run lint-fix && npm run test",
     "watch-tests": "jest --watch",
-    "prepare": "husky install"
+    "types": "tsc --noEmit"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -27,69 +29,58 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
-    "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-component-footer": "11.3.1",
-    "@edx/frontend-platform": "3.0.0",
-    "@edx/paragon": "20.12.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^6.6.0",
+    "@edx/frontend-enterprise-hotjar": "7.2.0",
+    "@edx/frontend-platform": "^8.3.1",
+    "@edx/openedx-atlas": "^0.7.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.1.15",
-    "@redux-beacon/segment": "^1.1.0",
-    "@reduxjs/toolkit": "^1.6.1",
-    "@testing-library/user-event": "^13.5.0",
-    "axios": "^0.21.4",
+    "@fortawesome/react-fontawesome": "^0.2.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.5",
+    "@redux-devtools/extension": "3.3.0",
+    "@reduxjs/toolkit": "^2.0.0",
     "classnames": "^2.3.1",
-    "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",
+    "core-js": "3.45.1",
+    "filesize": "^10.0.0",
     "font-awesome": "4.7.0",
-    "history": "5.0.1",
-    "html-react-parser": "^1.3.0",
-    "jest": "^26.6.3",
+    "history": "5.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "prop-types": "15.7.2",
-    "query-string": "7.0.1",
-    "react": "^16.14.0",
-    "react-dom": "^16.14.0",
-    "react-intl": "^5.20.9",
-    "react-pdf": "^5.5.0",
+    "prop-types": "15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-intl": "6.8.9",
     "react-redux": "^7.2.4",
-    "react-router": "5.2.0",
-    "react-router-dom": "5.2.0",
-    "react-router-redux": "^5.0.0-alpha.9",
-    "redux": "4.1.1",
-    "redux-beacon": "^2.1.0",
-    "redux-devtools-extension": "2.13.9",
+    "react-router-dom": "6.30.1",
+    "react-share": "^4.4.0",
+    "redux": "4.2.1",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.3.0",
-    "regenerator-runtime": "^0.13.9",
+    "redux-thunk": "2.4.2",
+    "regenerator-runtime": "^0.14.0",
     "reselect": "^4.0.0",
-    "util": "^0.12.4",
-    "whatwg-fetch": "^3.6.2"
+    "universal-cookie": "^4.0.4",
+    "util": "^0.12.4"
   },
   "devDependencies": {
-    "@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",
-    "codecov": "^3.8.3",
-    "enzyme-adapter-react-16": "^1.15.6",
-    "es-check": "^6.0.0",
-    "fetch-mock": "^9.11.0",
-    "husky": "^7.0.0",
+    "@edx/browserslist-config": "^1.3.0",
+    "@edx/typescript-config": "^1.1.0",
+    "@openedx/frontend-build": "^14.6.2",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "copy-webpack-plugin": "^13.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "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",
-    "semantic-release": "^17.4.5"
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-expect-message": "^1.1.3",
+    "jest-when": "^3.6.0",
+    "react-dev-utils": "^12.0.0",
+    "react-test-renderer": "^18.3.1",
+    "redux-mock-store": "^1.5.4"
   }
 }

public/index.html

@@ -1,10 +1,8 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
   <head>
-      <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>

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /

src/App.jsx

@@ -1,47 +1,99 @@
 import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet';
 
-import { AppContext } from '@edx/frontend-platform/react';
-import Footer from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
+import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
-import { thunkActions } from 'data/redux';
-import fakeData from 'data/services/lms/fakeData/courses';
-import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
+import { FooterSlot } from '@edx/frontend-component-footer';
+import { Alert } from '@openedx/paragon';
+
+import { RequestKeys } from 'data/constants/requests';
+import store from 'data/store';
+import {
+  selectors,
+  actions,
+} from 'data/redux';
+import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 
+import track from 'tracking';
+
+import fakeData from 'data/services/lms/fakeData/courses';
+
+import AppWrapper from 'containers/AppWrapper';
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+
+import { getConfig } from '@edx/frontend-platform';
+import messages from './messages';
 import './App.scss';
 
 export const App = () => {
-  const dispatch = useDispatch();
-  // TODO: made development-only
   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') {
+    if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
       window.loadEmptyData = () => {
-        dispatch(thunkActions.app.loadData({ ...fakeData.globalData, courses: [] }));
+        loadData({ ...fakeData.globalData, courses: [] });
       };
       window.loadMockData = () => {
-        dispatch(thunkActions.app.loadData({
+        loadData({
           ...fakeData.globalData,
           courses: [
             ...fakeData.courseRunData,
             ...fakeData.entitlementData,
           ],
-        }));
+        });
       };
+      window.store = store;
+      window.selectors = selectors;
+      window.actions = actions;
+      window.track = track;
     }
-  });
+    if (getConfig().HOTJAR_APP_ID) {
+      try {
+        initializeHotjar({
+          hotjarId: getConfig().HOTJAR_APP_ID,
+          hotjarVersion: getConfig().HOTJAR_VERSION,
+          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
+        });
+      } catch (error) {
+        logError(error);
+      }
+    }
+  }, [authenticatedUser, loadData]);
   return (
-    <Router>
+    <>
+      <Helmet>
+        <title>{formatMessage(messages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
       <div>
-        <LearnerDashboardHeader />
-        <main>
-          <Dashboard />
-        </main>
-        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <AppWrapper>
+          <LearnerDashboardHeader />
+          <main id="main">
+            {hasNetworkFailure
+              ? (
+                <Alert variant="danger">
+                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+                </Alert>
+              ) : (
+                <Dashboard />
+              )}
+          </main>
+        </AppWrapper>
+        <FooterSlot />
       </div>
-    </Router>
+    </>
   );
 };
 

src/App.scss

@@ -1,17 +1,21 @@
 // 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";
+@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
 
 $fa-font-path: "~font-awesome/fonts";
 @import "~font-awesome/scss/font-awesome";
 
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+$input-focus-box-shadow: var(--pgn-elevation-form-input-base); // hack to get upgrade to paragon 4.0.0 to work
 
+@import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/_footer";
 
-.alert .alert-icon {
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.alert.alert-info .alert-icon {
   color: black;
 }
 

src/App.test.jsx

@@ -1,41 +1,135 @@
-import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen, waitFor } from '@testing-library/react';
 
-import { BrowserRouter } from 'react-router-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 
-import Footer from '@edx/frontend-component-footer';
-
-import Dashboard from 'containers/Dashboard';
+import { RequestKeys } from 'data/constants/requests';
+import { reduxHooks } from 'hooks';
 import { App } from './App';
+import messages from './messages';
 
-jest.mock('@edx/frontend-component-footer', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({
+  FooterSlot: jest.fn(() => <div>FooterSlot</div>),
+}));
+jest.mock('containers/Dashboard', () => jest.fn(() => <div>Dashboard</div>));
+jest.mock('containers/LearnerDashboardHeader', () => jest.fn(() => <div>LearnerDashboardHeader</div>));
+jest.mock('containers/AppWrapper', () => jest.fn(({ children }) => <div className="AppWrapper">{children}</div>));
+jest.mock('data/redux', () => ({
+  selectors: 'redux.selectors',
+  actions: 'redux.actions',
+  thunkActions: 'redux.thunkActions',
+}));
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useRequestIsFailed: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+    useLoadData: jest.fn(),
+  },
+}));
+jest.mock('data/store', () => 'data/store');
 
-jest.mock('containers/Dashboard', () => 'Dashboard');
-jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({})),
+}));
 
-const logo = 'fakeLogo.png';
-let el;
-let router;
+jest.mock('@edx/frontend-platform/react', () => ({
+  ...jest.requireActual('@edx/frontend-platform/react'),
+  ErrorPage: () => 'ErrorPage',
+}));
+
+const loadData = jest.fn();
+reduxHooks.useLoadData.mockReturnValue(loadData);
+
+const supportEmail = 'test@support.com';
+reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
 
 describe('App router component', () => {
-  test('snapshot: enabled', () => {
-    expect(shallow(<App />)).toMatchSnapshot();
-  });
   describe('component', () => {
-    beforeEach(() => {
-      process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
-      el = shallow(<App />);
-      router = el.find(BrowserRouter);
-    });
-    describe('Router', () => {
-      test('Routing - ListView is only route', () => {
-        expect(router.find('main')).toEqual(shallow(
-          <main><Dashboard /></main>,
-        ));
+    const runBasicTests = () => {
+      it('displays title in helmet component', async () => {
+        await waitFor(() => expect(document.title).toEqual(messages.pageTitle.defaultMessage));
+      });
+      it('displays learner dashboard header', () => {
+        const learnerDashboardHeader = screen.getByText('LearnerDashboardHeader');
+        expect(learnerDashboardHeader).toBeInTheDocument();
+      });
+      it('wraps the header and main components in an AppWrapper widget container', () => {
+        const appWrapper = screen.getByText('LearnerDashboardHeader').parentElement;
+        expect(appWrapper).toHaveClass('AppWrapper');
+        expect(appWrapper.children[1].id).toEqual('main');
+      });
+      it('displays footer slot', () => {
+        const footerSlot = screen.getByText('FooterSlot');
+        expect(footerSlot).toBeInTheDocument();
+      });
+    };
+    describe('no network failure', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({});
+        render(<IntlProvider locale="en"><App /></IntlProvider>);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const dashboard = screen.getByText('Dashboard');
+        expect(dashboard).toBeInTheDocument();
       });
     });
-    test('Footer logo drawn from env variable', () => {
-      expect(router.find(Footer).props().logo).toEqual(logo);
+    describe('no network failure with optimizely url', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ OPTIMIZELY_URL: 'fake.url' });
+        render(<IntlProvider locale="en"><App /></IntlProvider>);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const dashboard = screen.getByText('Dashboard');
+        expect(dashboard).toBeInTheDocument();
+      });
+    });
+    describe('no network failure with optimizely project id', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ OPTIMIZELY_PROJECT_ID: 'fakeId' });
+        render(<IntlProvider locale="en"><App /></IntlProvider>);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const dashboard = screen.getByText('Dashboard');
+        expect(dashboard).toBeInTheDocument();
+      });
+    });
+    describe('initialize failure', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        getConfig.mockReturnValue({});
+        render(<IntlProvider locale="en" messages={messages}><App /></IntlProvider>);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        const alert = screen.getByRole('alert');
+        expect(alert).toBeInTheDocument();
+        const errorPage = screen.getByText('ErrorPage');
+        expect(errorPage).toBeInTheDocument();
+      });
+    });
+    describe('refresh failure', () => {
+      beforeEach(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
+        getConfig.mockReturnValue({});
+        render(<IntlProvider locale="en"><App /></IntlProvider>);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        const alert = screen.getByRole('alert');
+        expect(alert).toBeInTheDocument();
+        const errorPage = screen.getByText('ErrorPage');
+        expect(errorPage).toBeInTheDocument();
+      });
     });
   });
 });

src/__snapshots__/App.test.jsx.snap

@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`App router component snapshot: enabled 1`] = `
-<BrowserRouter>
-  <div>
-    <LearnerDashboardHeader />
-    <main>
-      <Dashboard />
-    </main>
-    <Footer
-      logo="https://edx-cdn.org/v3/stage/open-edx-tag.svg"
-    />
-  </div>
-</BrowserRouter>
-`;

src/__snapshots__/index.test.jsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<ErrorPage
-  message="test-error-message"
-/>
-`;
-
-exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<IntlProvider
-  locale="en"
->
-  <AppProvider
-    store={
-      Object {
-        "redux": "store",
-      }
-    }
-  >
-    <App />
-  </AppProvider>
-</IntlProvider>
-`;

src/components/Banner.jsx

@@ -1,22 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert } from '@edx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Alert } from '@openedx/paragon';
+import { Info } from '@openedx/paragon/icons';
 
-export const Banner = ({ children, variant, icon }) => (
-  <Alert variant={variant} className="mb-0" icon={icon}>
+export const Banner = ({
+  children, variant, icon, className,
+}) => (
+  <Alert variant={variant} className={className} icon={icon}>
     {children}
   </Alert>
 );
 Banner.defaultProps = {
   icon: Info,
   variant: 'info',
+  className: 'mb-0',
 };
 Banner.propTypes = {
   variant: PropTypes.string,
   icon: PropTypes.func,
   children: PropTypes.node.isRequired,
+  className: PropTypes.string,
 };
 
 export default Banner;

src/components/Banner.test.jsx

@@ -1,23 +1,27 @@
-import { shallow } from 'enzyme';
-
-import { Alert } from '@edx/paragon';
-
+import { render, screen } from '@testing-library/react';
 import Banner from './Banner';
 
-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();
+describe('Banner component', () => {
+  it('renders children content', () => {
+    render(<Banner>Test content</Banner>);
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+  });
 
-      expect(wrapper.find(Alert).prop('variant')).toEqual('success');
-    });
+  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');
   });
 });

src/components/NoticesWrapper/api.js

@@ -0,0 +1,25 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+
+export const noticesUrl = `${getConfig().LMS_BASE_URL}/notices/api/v1/unacknowledged`;
+
+export const getNotices = ({ onLoad, notFoundMessage }) => {
+  const authenticatedUser = getAuthenticatedUser();
+
+  const handleError = async (e) => {
+    // Error probably means that notices is not installed, which is fine.
+    const { customAttributes: { httpErrorStatus } } = e;
+    if (httpErrorStatus === 404) {
+      logInfo(`${e}. ${notFoundMessage}`);
+    } else {
+      logError(e);
+    }
+  };
+  if (authenticatedUser) {
+    return getAuthenticatedHttpClient().get(noticesUrl, {}).then(onLoad).catch(handleError);
+  }
+  return null;
+};
+
+export default { getNotices };

src/components/NoticesWrapper/api.test.js

@@ -0,0 +1,65 @@
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+
+import * as api from './api';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
+    LMS_BASE_URL: 'test-lms-url',
+  })),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+  getAuthenticatedUser: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+  logInfo: jest.fn(),
+}));
+
+const testData = 'test-data';
+const successfulGet = () => Promise.resolve(testData);
+const error404 = { customAttributes: { httpErrorStatus: 404 }, test: 'error' };
+const error404Get = () => Promise.reject(error404);
+const error500 = { customAttributes: { httpErrorStatus: 500 }, test: 'error' };
+const error500Get = () => Promise.reject(error500);
+
+const get = jest.fn().mockImplementation(successfulGet);
+getAuthenticatedHttpClient.mockReturnValue({ get });
+const authenticatedUser = { fake: 'user' };
+getAuthenticatedUser.mockReturnValue(authenticatedUser);
+
+const onLoad = jest.fn();
+describe('getNotices api method', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('behavior', () => {
+    describe('not authenticated', () => {
+      it('does not fetch anything', () => {
+        getAuthenticatedUser.mockReturnValueOnce(null);
+        api.getNotices({ onLoad });
+        expect(get).not.toHaveBeenCalled();
+      });
+    });
+    describe('authenticated', () => {
+      it('fetches noticesUrl with onLoad behavior', async () => {
+        await api.getNotices({ onLoad });
+        expect(get).toHaveBeenCalledWith(api.noticesUrl, {});
+        expect(onLoad).toHaveBeenCalledWith(testData);
+      });
+      it('calls logInfo if fetch fails with 404', async () => {
+        get.mockImplementation(error404Get);
+        await api.getNotices({ onLoad });
+        expect(logInfo).toHaveBeenCalledWith(`${error404}. ${api.error404Message}`);
+      });
+      it('calls logError if fetch fails with non-404 error', async () => {
+        get.mockImplementation(error500Get);
+        await api.getNotices({ onLoad });
+        expect(logError).toHaveBeenCalledWith(error500);
+      });
+    });
+  });
+});

src/components/NoticesWrapper/hooks.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { StrictDict } from 'utils';
+import { getNotices } from './api';
+import * as module from './hooks';
+import messages from './messages';
+
+/**
+ * This component uses the platform-plugin-notices plugin to function.
+ * If the user has an unacknowledged notice, they will be rerouted off
+ * course home and onto a full-screen notice page. If the plugin is not
+ * installed, or there are no notices, we just passthrough this component.
+ */
+export const state = StrictDict({
+  isRedirected: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useNoticesWrapperData = () => {
+  const [isRedirected, setIsRedirected] = module.state.isRedirected();
+  const { formatMessage } = useIntl();
+
+  React.useEffect(() => {
+    if (getConfig().ENABLE_NOTICES) {
+      getNotices({
+        onLoad: (data) => {
+          if (data?.data?.results?.length > 0) {
+            setIsRedirected(true);
+            window.location.replace(`${data.data.results[0]}?next=${window.location.href}`);
+          }
+        },
+        notFoundMessage: formatMessage(messages.error404Message),
+      });
+    }
+  }, [setIsRedirected, formatMessage]);
+  return { isRedirected };
+};
+
+export default useNoticesWrapperData;

src/components/NoticesWrapper/hooks.test.js

@@ -0,0 +1,99 @@
+import React from 'react';
+
+import { MockUseState, formatMessage } from 'testUtils';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getNotices } from './api';
+import * as hooks from './hooks';
+
+jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn() }));
+jest.mock('./api', () => ({ getNotices: jest.fn() }));
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+  useContext: jest.fn(context => context),
+}));
+
+jest.mock('@edx/frontend-platform/i18n', () => {
+  const { formatMessage: fn } = jest.requireActual('testUtils');
+  return {
+    ...jest.requireActual('@edx/frontend-platform/i18n'),
+    useIntl: () => ({
+      formatMessage: fn,
+    }),
+  };
+});
+
+getConfig.mockReturnValue({ ENABLE_NOTICES: true });
+const state = new MockUseState(hooks);
+
+let hook;
+describe('NoticesWrapper hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.isRedirected);
+  });
+  describe('useNoticesWrapperData', () => {
+    beforeEach(() => {
+      state.mock();
+    });
+    describe('behavior', () => {
+      it('initializes state hooks', () => {
+        hooks.useNoticesWrapperData();
+        expect(hooks.state.isRedirected).toHaveBeenCalledWith();
+      });
+      describe('effects', () => {
+        it('does not call notices if not enabled', () => {
+          getConfig.mockReturnValueOnce({ ENABLE_NOTICES: false });
+          hooks.useNoticesWrapperData();
+          const [cb, prereqs] = React.useEffect.mock.calls[0];
+          expect(prereqs).toEqual([state.setState.isRedirected, formatMessage]);
+          cb();
+          expect(getNotices).not.toHaveBeenCalled();
+        });
+        describe('getNotices call (if enabled) onLoad behavior', () => {
+          it('does not redirect if there are no results', () => {
+            hooks.useNoticesWrapperData();
+            expect(React.useEffect).toHaveBeenCalled();
+            const [cb, prereqs] = React.useEffect.mock.calls[0];
+            expect(prereqs).toEqual([state.setState.isRedirected, formatMessage]);
+            cb();
+            expect(getNotices).toHaveBeenCalled();
+            const { onLoad } = getNotices.mock.calls[0][0];
+            onLoad({});
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+            onLoad({ data: {} });
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+            onLoad({ data: { results: [] } });
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+          });
+          it('redirects and set isRedirected if results are returned', () => {
+            delete window.location;
+            window.location = { replace: jest.fn(), href: 'test-old-href' };
+            hooks.useNoticesWrapperData();
+            const [cb, prereqs] = React.useEffect.mock.calls[0];
+            expect(prereqs).toEqual([state.setState.isRedirected, formatMessage]);
+            cb();
+            expect(getNotices).toHaveBeenCalled();
+            const { onLoad } = getNotices.mock.calls[0][0];
+            const target = 'url-target';
+            onLoad({ data: { results: [target] } });
+            expect(state.setState.isRedirected).toHaveBeenCalledWith(true);
+            expect(window.location.replace).toHaveBeenCalledWith(
+              `${target}?next=${window.location.href}`,
+            );
+          });
+        });
+      });
+    });
+    describe('output', () => {
+      it('forwards isRedirected from state call', () => {
+        hook = hooks.useNoticesWrapperData();
+        expect(hook.isRedirected).toEqual(state.stateVals.isRedirected);
+      });
+    });
+  });
+});

src/components/NoticesWrapper/index.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useNoticesWrapperData from './hooks';
+
+/**
+ * This component uses the platform-plugin-notices plugin to function.
+ * If the user has an unacknowledged notice, they will be rerouted off
+ * course home and onto a full-screen notice page. If the plugin is not
+ * installed, or there are no notices, we just passthrough this component.
+ */
+const NoticesWrapper = ({ children }) => {
+  const { isRedirected } = useNoticesWrapperData();
+  return (
+    <div>
+      {isRedirected === true ? null : children}
+    </div>
+  );
+};
+
+NoticesWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default NoticesWrapper;

src/components/NoticesWrapper/index.test.jsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react';
+
+import useNoticesWrapperData from './hooks';
+import NoticesWrapper from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = { isRedirected: false };
+
+const children = [<b key={1}>some</b>, <i key={2}>children</i>];
+describe('NoticesWrapper component', () => {
+  beforeEach(() => {
+    useNoticesWrapperData.mockClear();
+  });
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      useNoticesWrapperData.mockReturnValue(hookProps);
+      render(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(useNoticesWrapperData).toHaveBeenCalledWith();
+    });
+  });
+  describe('output', () => {
+    it('does not show children if redirected', () => {
+      useNoticesWrapperData.mockReturnValueOnce({ isRedirected: true });
+      render(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(screen.queryByText('some')).not.toBeInTheDocument();
+      expect(screen.queryByText('children')).not.toBeInTheDocument();
+    });
+    it('shows children if not redirected', () => {
+      useNoticesWrapperData.mockReturnValue(hookProps);
+      render(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(screen.getByText('some')).toBeInTheDocument();
+      expect(screen.getByText('children')).toBeInTheDocument();
+    });
+  });
+});

src/components/NoticesWrapper/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  error404Message: {
+    id: 'learner-dash.notices.error404Message',
+    defaultMessage: 'This probably happened because the notices plugin is not installed on platform.',
+    description: 'Error message when notices API returns 404',
+  },
+});
+
+export default messages;

src/components/__snapshots__/Banner.test.jsx.snap

@@ -1,21 +0,0 @@
-// 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 variants 1`] = `
-<Alert
-  className="mb-0"
-  icon={[MockFunction icons.Info]}
-  variant="success"
->
-  Hello, world!
-</Alert>
-`;

src/config/index.js

@@ -1,15 +1,26 @@
 const configuration = {
   // BASE_URL: process.env.BASE_URL,
   LMS_BASE_URL: process.env.LMS_BASE_URL,
+  ECOMMERCE_BASE_URL: process.env.ECOMMERCE_BASE_URL,
+  CREDIT_PURCHASE_URL: process.env.CREDIT_PURCHASE_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,
+  SEGMENT_KEY: process.env.SEGMENT_KEY,
   // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
-  LEARNING_MICROFRONTEND_URL: process.env.LEARNING_MICROFRONTEND_URL,
+  LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN || '',
+  SUPPORT_URL: process.env.SUPPORT_URL || null,
+  ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
+  CAREER_LINK_URL: process.env.CAREER_LINK_URL || null,
+  LOGO_URL: process.env.LOGO_URL,
+  ENABLE_EDX_PERSONAL_DASHBOARD: process.env.ENABLE_EDX_PERSONAL_DASHBOARD === 'true',
+  SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
+  ENABLE_PROGRAMS: process.env.ENABLE_PROGRAMS === 'true',
+  NON_BROWSABLE_COURSES: process.env.NON_BROWSABLE_COURSES === 'true',
 };
 
 const features = {};

src/containers/AppWrapper/index.jsx

@@ -0,0 +1,13 @@
+import PropTypes from 'prop-types';
+
+export const AppWrapper = ({
+  children,
+}) => children;
+AppWrapper.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.node,
+    PropTypes.arrayOf(PropTypes.node),
+  ]).isRequired,
+};
+
+export default AppWrapper;

src/containers/CourseCard/CourseCard.scss

@@ -1,21 +1,73 @@
-@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);
+    }
     .pgn__card-image-cap {
       border-bottom-left-radius: 0 !important;
     }
+    .overflow-visible {
+      overflow: visible;
+    }
     .pgn__card-header-content {
       margin-top: 1.5rem;
     }
+    .pgn__card-footer {
+      flex-wrap: nowrap;
+
+      &.vertical {
+        flex-direction: column;
+      }
+
+      .pgn__action-row {
+        align-self: flex-end;
+        white-space: nowrap;
+      }
+    }
+
+    .course-card-verify-ribbon-container {
+      width: 100%;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      text-align: center;
+
+      .badge {
+        border-radius: 0;
+      }
+
+      > img {
+        width: 40px;
+        z-index: 1000;
+        position: absolute;
+        top: 0;
+        right: 0;
+      }
+    }
   }
 
   .course-card-banners {
     > .alert {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
+      border-radius: 0;
       box-shadow: none;
-      padding: map-get($spacers, 3) map-get($spacers, 4);
+      padding: var(--pgn-spacing-spacer-3) var(--pgn-spacing-spacer-4);
+
+      &:last-of-type {
+        border-bottom-left-radius: var(--pgn-size-alert-border-radius);
+        border-bottom-right-radius: var(--pgn-size-alert-border-radius);
+      }
+    }
+
+    .related-programs-banner {
+      .related-programs-list-container {
+        list-style: none;
+        display: inline;
+
+        > li {
+          line-height: 1rem;
+        }
+      }
     }
   }
 }

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

@@ -1,65 +0,0 @@
-// 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>
-        <CourseCardContent
-          cardId="test-card-id"
-          orientation="vertical"
-        />
-      </div>
-      <div
-        className="course-card-banners"
-        data-testid="CourseCardBanners"
-      >
-        <CourseCardBanners
-          cardId="test-card-id"
-        />
-      </div>
-    </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"
-      >
-        <CourseCardContent
-          cardId="test-card-id"
-          orientation="horizontal"
-        />
-      </div>
-      <div
-        className="course-card-banners"
-        data-testid="CourseCardBanners"
-      >
-        <CourseCardBanners
-          cardId="test-card-id"
-        />
-      </div>
-    </div>
-  </Card>
-</div>
-`;

src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js

@@ -0,0 +1,8 @@
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+
+export const useIsCollapsed = () => {
+  const { width } = useWindowSize();
+  return width < breakpoints.medium.maxWidth && width > breakpoints.small.maxWidth;
+};
+
+export default useIsCollapsed;

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

@@ -0,0 +1,48 @@
+import { useWindowSize, breakpoints } from '@openedx/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
+    expect(
+      (breakpoints.large.maxWidth - 1)
+      > (breakpoints.medium.maxWidth - 1)
+      && (breakpoints.medium.maxWidth - 1)
+      > (breakpoints.small.maxWidth - 1),
+    ).toBe(true);
+
+    useWindowSize.mockReturnValue({ width: breakpoints.large.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(false);
+    useWindowSize.mockReturnValue({ width: breakpoints.medium.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(true);
+    useWindowSize.mockReturnValue({ width: breakpoints.small.maxWidth - 1 });
+    expect(useIsCollapsed()).toEqual(false);
+  });
+});

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Button } from '@openedx/paragon';
+
+import useIsCollapsed from './hooks';
+
+export const ActionButton = (props) => {
+  const isSmall = useIsCollapsed();
+  return (
+    <Button
+      {...props}
+      {...isSmall && { size: 'sm' }}
+    />
+  );
+};
+
+export default ActionButton;

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

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import ActionButton from '.';
+
+import useIsCollapsed from './hooks';
+
+jest.mock('./hooks', () => jest.fn());
+
+describe('ActionButton', () => {
+  const props = {
+    className: 'custom-class',
+    children: 'Test',
+  };
+
+  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');
+  });
+});

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

@@ -1,25 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { hooks } from 'data/redux';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const BeginCourseButton = ({ cardId }) => {
-  const { homeUrl } = hooks.useCardCourseRunData(cardId);
-  const { hasAccess } = hooks.useCardEnrollmentData(cardId);
-  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
+  const { disableBeginCourse } = useActionDisabledState(cardId);
+
+  const handleClick = reduxHooks.useTrackCourseEvent(
+    track.course.enterCourseClicked,
+    cardId,
+    homeUrl + execEdTrackingParam,
+  );
   return (
-    <Button
-      disabled={isMasquerading || !hasAccess}
+    <ActionButton
+      disabled={disableBeginCourse}
       as="a"
-      href={homeUrl}
+      href="#"
+      onClick={handleClick}
     >
       {formatMessage(messages.beginCourse)}
-    </Button>
+    </ActionButton>
   );
 };
 BeginCourseButton.propTypes = {

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

@@ -1,54 +1,88 @@
-import { shallow } from 'enzyme';
-
-import { htmlProps } from 'data/constants/htmlKeys';
-import { hooks } from 'data/redux';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+import useActionDisabledState from '../hooks';
 import BeginCourseButton from './BeginCourseButton';
 
-jest.mock('data/redux', () => ({
-  hooks: {
-    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'home-url' })),
-    useCardEnrollmentData: jest.fn(() => ({ hasAccess: true })),
-    useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-let wrapper;
-const { homeUrl } = hooks.useCardCourseRunData();
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
+
+jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
+
+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>);
 
 describe('BeginCourseButton', () => {
-  const props = {
-    cardId: 'cardId',
-  };
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  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.href)).toEqual(homeUrl);
+  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('behavior', () => {
-    it('initializes course run data with cardId', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(hooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    });
-    it('initializes enrollment data with cardId', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(hooks.useCardEnrollmentData).toHaveBeenCalledWith(props.cardId);
-    });
-    describe('disabled states', () => {
-      test('learner does not have access', () => {
-        hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess: false });
-        wrapper = shallow(<BeginCourseButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    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');
       });
-      test('masquerading', () => {
-        hooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
-        wrapper = shallow(<BeginCourseButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    });
+    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('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),
+        );
       });
     });
   });

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

@@ -1,25 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { hooks } from 'data/redux';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const ResumeButton = ({ cardId }) => {
-  const { resumeUrl } = hooks.useCardCourseRunData(cardId);
-  const { hasAccess, isAudit, isAuditAccessExpired } = hooks.useCardEnrollmentData(cardId);
-  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
+  const { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
+  const { disableResumeCourse } = useActionDisabledState(cardId);
+
+  const handleClick = reduxHooks.useTrackCourseEvent(
+    track.course.enterCourseClicked,
+    cardId,
+    resumeUrl + execEdTrackingParam,
+  );
   return (
-    <Button
-      disabled={isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired)}
+    <ActionButton
+      disabled={disableResumeCourse}
       as="a"
-      href={resumeUrl}
+      href="#"
+      onClick={handleClick}
     >
       {formatMessage(messages.resume)}
-    </Button>
+    </ActionButton>
   );
 };
 ResumeButton.propTypes = {

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

@@ -1,67 +1,83 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { htmlProps } from 'data/constants/htmlKeys';
-import { hooks } from 'data/redux';
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+import useActionDisabledState from '../hooks';
 import ResumeButton from './ResumeButton';
 
-jest.mock('data/redux', () => ({
-  hooks: {
-    useCardCourseRunData: jest.fn(() => ({ resumeUrl: 'resumeUrl' })),
-    useCardEnrollmentData: jest.fn(() => ({
-      hasAccess: true,
-      isAudit: true,
-      isAuditAccessExpired: false,
-    })),
-    useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-const { resumeUrl } = hooks.useCardCourseRunData();
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
+jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
+
+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 } }),
+);
 
 describe('ResumeButton', () => {
   const props = {
     cardId: '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.href)).toEqual(resumeUrl);
+  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('behavior', () => {
-    it('initializes course run data based on cardId', () => {
-      shallow(<ResumeButton {...props} />);
-      expect(hooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    });
-    it('initializes course enrollment data based on cardId', () => {
-      shallow(<ResumeButton {...props} />);
-      expect(hooks.useCardEnrollmentData).toHaveBeenCalledWith(props.cardId);
-    });
-    describe('disabled states', () => {
-      test('masquerading', () => {
-        hooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
-        const wrapper = shallow(<ResumeButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    describe('disabled', () => {
+      beforeEach(() => {
+        useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
       });
-      test('learner does not have access', () => {
-        hooks.useCardEnrollmentData.mockReturnValueOnce({
-          hasAccess: false,
-          isAudit: true,
-          isAuditAccessExpired: false,
-        });
-        const wrapper = shallow(<ResumeButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(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');
       });
-      test('audit access expired', () => {
-        hooks.useCardEnrollmentData.mockReturnValueOnce({
-          hasAccess: true,
-          isAudit: true,
-          isAuditAccessExpired: true,
-        });
-        const wrapper = shallow(<ResumeButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    });
+    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('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),
+        );
       });
     });
   });

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

@@ -1,27 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useDispatch } from 'react-redux';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { hooks } from 'data/redux';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const SelectSessionButton = ({ cardId }) => {
-  const { hasAccess } = hooks.useCardEnrollmentData(cardId);
-  const { canChange, hasSessions } = hooks.useCardEntitlementData(cardId);
-  const { isMasquerading } = hooks.useMasqueradeData();
   const { formatMessage } = useIntl();
-  const dispatch = useDispatch();
-  const openSessionModal = hooks.useUpdateSelectSessionModalCallback(dispatch, cardId);
+  const { disableSelectSession } = useActionDisabledState(cardId);
+  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
   return (
-    <Button
-      disabled={isMasquerading || !hasAccess || (!canChange || !hasSessions)}
+    <ActionButton
+      disabled={disableSelectSession}
       onClick={openSessionModal}
     >
-      {formatMessage(messages.resume)}
-    </Button>
+      {formatMessage(messages.selectSession)}
+    </ActionButton>
   );
 };
 SelectSessionButton.propTypes = {

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

@@ -1,66 +1,43 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
 
-import { hooks } from 'data/redux';
-import { htmlProps } from 'data/constants/htmlKeys';
 import SelectSessionButton from './SelectSessionButton';
 
-jest.mock('data/redux', () => ({
-  hooks: {
-    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', () => ({
+  reduxHooks: {
+    useUpdateSelectSessionModalCallback: jest.fn(),
   },
 }));
+jest.mock('../hooks', () => jest.fn(() => ({ disableSelectSession: false })));
 
-let wrapper;
+jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 describe('SelectSessionButton', () => {
   const props = { cardId: 'cardId' };
-  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', () => {
-      hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess: false });
-      wrapper = shallow(<SelectSessionButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
-    });
-    it('renders disabled button if masquerading', () => {
-      hooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
-      wrapper = shallow(<SelectSessionButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
+  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('behavior', () => {
-    it('default render', () => {
-      wrapper = shallow(<SelectSessionButton {...props} />);
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
-      expect(wrapper.prop(htmlProps.onClick).getMockName())
-        .toEqual(hooks.useUpdateSelectSessionModalCallback().getMockName());
-    });
-    describe('disabled states', () => {
-      test('learner does not have access', () => {
-        hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess: false });
-        wrapper = shallow(<SelectSessionButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-      });
-      test('learner cannot change sessions', () => {
-        hooks.useCardEntitlementData.mockReturnValueOnce({ canChange: false, hasSessions: true });
-        wrapper = shallow(<SelectSessionButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-      });
-      test('entitlement does not have available sessions', () => {
-        hooks.useCardEntitlementData.mockReturnValueOnce({ canChange: true, hasSessions: false });
-        wrapper = shallow(<SelectSessionButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-      });
-      test('user is masquerading', () => {
-        hooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
-        wrapper = shallow(<SelectSessionButton {...props} />);
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-      });
+  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);
     });
   });
 });

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

@@ -1,31 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Button } from '@edx/paragon';
-import { Locked } from '@edx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import { hooks } from 'data/redux';
-import messages from './messages';
-
-export const UpgradeButton = ({ cardId }) => {
-  const { upgradeUrl } = hooks.useCardCourseRunData(cardId);
-  const { canUpgrade } = hooks.useCardEnrollmentData(cardId);
-  const { isMasquerading } = hooks.useMasqueradeData();
-  const { formatMessage } = useIntl();
-  const isEnabled = (!isMasquerading && canUpgrade);
-  return (
-    <Button
-      iconBefore={Locked}
-      variant="outline-primary"
-      disabled={!isEnabled}
-      {...isEnabled && { as: 'a', href: upgradeUrl }}
-    >
-      {formatMessage(messages.upgrade)}
-    </Button>
-  );
-};
-UpgradeButton.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-export default UpgradeButton;

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

@@ -1,40 +0,0 @@
-import { shallow } from 'enzyme';
-
-import { htmlProps } from 'data/constants/htmlKeys';
-import { hooks } from 'data/redux';
-import UpgradeButton from './UpgradeButton';
-
-jest.mock('data/redux', () => ({
-  hooks: {
-    useMasqueradeData: jest.fn(() => ({ isMasquerading: false })),
-    useCardCourseRunData: jest.fn(),
-    useCardEnrollmentData: jest.fn(() => ({ canUpgrade: true })),
-  },
-}));
-
-describe('UpgradeButton', () => {
-  const props = {
-    cardId: 'cardId',
-  };
-  const upgradeUrl = 'upgradeUrl';
-  hooks.useCardCourseRunData.mockReturnValue({ upgradeUrl });
-  describe('snapshot', () => {
-    test('can upgrade', () => {
-      const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
-    });
-    test('cannot upgrade', () => {
-      hooks.useCardEnrollmentData.mockReturnValueOnce({ canUpgrade: false });
-      const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-    });
-    test('masquerading', () => {
-      hooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading: true });
-      const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-    });
-  });
-});

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

@@ -1,25 +1,33 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { hooks } from 'data/redux';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const ViewCourseButton = ({ cardId }) => {
-  const { homeUrl } = hooks.useCardCourseRunData(cardId);
-  const { hasAccess } = hooks.useCardEnrollmentData(cardId);
-  const { isEntitlement, isExpired } = hooks.useCardEntitlementData(cardId);
   const { formatMessage } = useIntl();
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { disableViewCourse } = useActionDisabledState(cardId);
+
+  const handleClick = reduxHooks.useTrackCourseEvent(
+    track.course.enterCourseClicked,
+    cardId,
+    homeUrl,
+  );
   return (
-    <Button
-      disabled={!hasAccess || (isEntitlement && isExpired)}
+    <ActionButton
+      disabled={disableViewCourse}
       as="a"
-      href={homeUrl}
+      href="#"
+      onClick={handleClick}
     >
       {formatMessage(messages.viewCourse)}
-    </Button>
+    </ActionButton>
   );
 };
 ViewCourseButton.propTypes = {

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

@@ -1,58 +1,55 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { htmlProps } from 'data/constants/htmlKeys';
-import { hooks } from 'data/redux';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
 import ViewCourseButton from './ViewCourseButton';
 
-jest.mock('data/redux', () => ({
-  hooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-    useCardEntitlementData: jest.fn(),
+jest.mock('tracking', () => ({
+  course: {
+    enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
+jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
+
+jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
+
+const defaultProps = { cardId: 'cardId' };
+const homeUrl = 'homeUrl';
+
 describe('ViewCourseButton', () => {
-  const props = {
-    cardId: 'cardId',
-  };
-  const homeUrl = 'homeUrl';
-  hooks.useCardCourseRunData.mockReturnValue({ homeUrl });
-  const createWrapper = ({
-    hasAccess = false,
-    isEntitlement = false,
-    isExpired = false,
-  }) => {
-    hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess });
-    hooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isExpired });
-    return shallow(<ViewCourseButton {...props} />);
-  };
-  describe('snapshot', () => {
-    test('default button', () => {
-      const wrapper = createWrapper({ hasAccess: true });
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
-      expect(wrapper.prop(htmlProps.href)).toEqual(homeUrl);
-    });
-    test('disabled button', () => {
-      const wrapper = createWrapper({});
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-      expect(wrapper.prop(htmlProps.href)).toEqual(homeUrl);
-    });
+  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('behavior', () => {
-    it('disabled button without access', () => {
-      const wrapper = createWrapper({ hasAccess: false, isEntitlement: false, isExpired: false });
-      expect(wrapper.prop('disabled')).toEqual(true);
-    });
-    it('disabled button with access', () => {
-      const wrapper = createWrapper({ hasAccess: true, isEntitlement: true, isExpired: true });
-      expect(wrapper.prop('disabled')).toEqual(true);
-    });
-    it('enabled button', () => {
-      const wrapper = createWrapper({ hasAccess: true, isEntitlement: false, isExpired: false });
-      expect(wrapper.prop('disabled')).toEqual(false);
-    });
+  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');
   });
 });

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BeginCourseButton snapshot renders default button when learner has access to the course 1`] = `
-<Button
-  as="a"
-  disabled={false}
-  href="home-url"
->
-  Begin Course
-</Button>
-`;

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResumeButton snapshot renders default button when learner has access to the course 1`] = `
-<Button
-  as="a"
-  disabled={false}
-  href="resumeUrl"
->
-  Resume
-</Button>
-`;

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

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectSessionButton snapshot renders default button 1`] = `
-<Button
-  disabled={false}
-  onClick={[MockFunction mockOpenSessionModal]}
->
-  Resume
-</Button>
-`;
-
-exports[`SelectSessionButton snapshot renders disabled button if masquerading 1`] = `
-<Button
-  disabled={true}
-  onClick={[MockFunction mockOpenSessionModal]}
->
-  Resume
-</Button>
-`;
-
-exports[`SelectSessionButton snapshot renders disabled button when user does not have access to the course 1`] = `
-<Button
-  disabled={true}
-  onClick={[MockFunction mockOpenSessionModal]}
->
-  Resume
-</Button>
-`;

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

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

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

@@ -1,21 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ViewCourseButton snapshot default button 1`] = `
-<Button
-  as="a"
-  disabled={false}
-  href="homeUrl"
->
-  View Course
-</Button>
-`;
-
-exports[`ViewCourseButton snapshot disabled button 1`] = `
-<Button
-  as="a"
-  disabled={true}
-  href="homeUrl"
->
-  View Course
-</Button>
-`;

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

@@ -1,54 +0,0 @@
-// 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>
-`;

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

@@ -1,33 +1,37 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { ActionRow } from '@edx/paragon';
+import { ActionRow } from '@openedx/paragon';
 
-import { hooks } from 'data/redux';
+import { reduxHooks } from 'hooks';
 
-import UpgradeButton from './UpgradeButton';
+import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
 import ViewCourseButton from './ViewCourseButton';
 
 export const CourseCardActions = ({ cardId }) => {
-  const { isEntitlement, isFulfilled } = hooks.useCardEntitlementData(cardId);
-  const { isVerified, hasStarted } = hooks.useCardEnrollmentData(cardId);
-  const { isArchived } = hooks.useCardCourseRunData(cardId);
-  let PrimaryButton;
-  if (isEntitlement) {
-    PrimaryButton = isFulfilled ? ViewCourseButton : SelectSessionButton;
-  } else if (isArchived) {
-    PrimaryButton = ViewCourseButton;
-  } else {
-    PrimaryButton = hasStarted ? ResumeButton : BeginCourseButton;
-  }
+  const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
+  const {
+    hasStarted,
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
 
   return (
     <ActionRow data-test-id="CourseCardActions">
-      {!(isEntitlement || isVerified) && <UpgradeButton cardId={cardId} />}
-      <PrimaryButton cardId={cardId} />
+      <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} />
+      )}
     </ActionRow>
   );
 };

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

@@ -1,103 +1,95 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import { reduxHooks } from 'hooks';
 
-import { hooks } from 'data/redux';
 import CourseCardActions from '.';
 
-jest.mock('data/redux', () => ({
-  hooks: {
+jest.mock('hooks', () => ({
+  reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
     useCardEntitlementData: jest.fn(),
+    useMasqueradeData: jest.fn(),
   },
 }));
 
-jest.mock('./UpgradeButton', () => 'UpgradeButton');
-jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
-jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
-jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
-jest.mock('./ResumeButton', () => 'ResumeButton');
+jest.mock('plugin-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 };
 
 describe('CourseCardActions', () => {
-  const props = {
-    cardId: 'cardId',
+  const mockHooks = ({
+    isEntitlement = false,
+    isExecEd2UCourse = false,
+    isFulfilled = false,
+    isArchived = false,
+    isVerified = false,
+    hasStarted = false,
+    isMasquerading = false,
+  } = {}) => {
+    reduxHooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isFulfilled });
+    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ isArchived });
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isExecEd2UCourse, isVerified, hasStarted });
+    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
   };
-  const createWrapper = ({
-    isEntitlement, isFulfilled, isArchived, isVerified, hasStarted,
-  }) => {
-    hooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isFulfilled });
-    hooks.useCardCourseRunData.mockReturnValueOnce({ isArchived });
-    hooks.useCardEnrollmentData.mockReturnValueOnce({ isVerified, hasStarted });
-    return shallow(<CourseCardActions {...props} />);
-  };
-  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();
+  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('behavior', () => {
-    it('show upgrade button when not verified and not entitlement', () => {
-      const wrapper = createWrapper({
-        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+  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();
       });
-      expect(wrapper.find('UpgradeButton')).toHaveLength(1);
     });
-    it('show select session button when not verified and entitlement', () => {
-      const wrapper = createWrapper({
-        isEntitlement: true, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+    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();
       });
-      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('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('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,
+      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('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);
     });
   });
 });

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

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

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

@@ -2,37 +2,52 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { MailtoLink, Hyperlink } from '@edx/paragon';
-import { CheckCircle } from '@edx/paragon/icons';
+import { MailtoLink, Hyperlink } from '@openedx/paragon';
+import { CheckCircle } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { hooks as appHooks } from 'data/redux';
+import { utilHooks, reduxHooks } from 'hooks';
 import Banner from 'components/Banner';
 
 import messages from './messages';
 
+const { useFormatDate } = utilHooks;
+
 export const CertificateBanner = ({ cardId }) => {
-  const certificate = appHooks.useCardCertificateData(cardId);
+  const certificate = reduxHooks.useCardCertificateData(cardId);
   const {
     isAudit,
     isVerified,
-    hasFinished,
-  } = appHooks.useCardEnrollmentData(cardId);
-  const { isPassing } = appHooks.useCardGradeData(cardId);
-  const { minPassingGrade, progressUrl } = appHooks.useCardCourseRunData(cardId);
-  const { supportEmail, billingEmail } = appHooks.usePlatformSettingsData();
-  const { formatMessage, formatDate } = useIntl();
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const { isPassing } = reduxHooks.useCardGradeData(cardId);
+  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
+  const { minPassingGrade, progressUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { supportEmail, billingEmail } = reduxHooks.usePlatformSettingsData();
+  const { formatMessage } = useIntl();
+  const formatDate = useFormatDate();
 
-  const emailLink = address => address && <MailtoLink to={address}>{address}</MailtoLink>;
+  const emailLink = address => <MailtoLink to={address}>{address}</MailtoLink>;
 
   if (certificate.isRestricted) {
     return (
       <Banner variant="danger">
-        {formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) })}
+        { supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
         {isVerified && '  '}
-        {isVerified && formatMessage(
-          messages.certRefundContactBilling,
-          { billingEmail: emailLink(billingEmail) },
+        {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>
+          </>
         )}
       </Banner>
     );
@@ -45,12 +60,12 @@ export const CertificateBanner = ({ cardId }) => {
         </Banner>
       );
     }
-    if (hasFinished) {
+    if (isArchived) {
       return (
         <Banner variant="warning">
-          {formatMessage(messages.notEligibleForCert)}.
+          {formatMessage(messages.notEligibleForCert)}
           {'  '}
-          <Hyperlink destination={progressUrl}>{formatMessage(messages.viewGrades)}</Hyperlink>
+          <Hyperlink isInline destination={progressUrl}>{formatMessage(messages.viewGrades)}</Hyperlink>
         </Banner>
       );
     }
@@ -60,17 +75,6 @@ export const CertificateBanner = ({ cardId }) => {
       </Banner>
     );
   }
-  if (certificate.isDownloadable) {
-    return (
-      <Banner variant="success" icon={CheckCircle}>
-        {formatMessage(messages.certReady)}
-        {'  '}
-        <Hyperlink destination={certificate.certPreviewUrl}>
-          {formatMessage(messages.viewCertificate)}
-        </Hyperlink>
-      </Banner>
-    );
-  }
   if (certificate.isEarnedButUnavailable) {
     return (
       <Banner>

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

@@ -1,151 +1,242 @@
-import { shallow } from 'enzyme';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { hooks } from 'data/redux';
+import { reduxHooks } from 'hooks';
 import CertificateBanner from './CertificateBanner';
-import messages from './messages';
 
-jest.mock('data/redux', () => ({
-  hooks: {
+jest.mock('hooks', () => ({
+  utilHooks: {
+    useFormatDate: jest.fn(() => date => date),
+  },
+  reduxHooks: {
     useCardCertificateData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
     useCardGradeData: jest.fn(),
-    useCardCourseRunData: jest.fn(),
     usePlatformSettingsData: jest.fn(),
   },
 }));
 
-jest.mock('Components/Banner', () => 'Banner');
+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';
 
 describe('CertificateBanner', () => {
-  const props = {
-    cardId: 'cardId',
-  };
-  hooks.usePlatformSettingsData.mockReturnValue({
-    supportEmail: 'suport@email',
-    billingEmail: 'billing@email',
-  });
-  hooks.useCardCourseRunData.mockReturnValue({
+  reduxHooks.useCardCourseRunData.mockReturnValue({
     minPassingGrade: 0.8,
     progressUrl: 'progressUrl',
   });
-
-  const defaultCertificate = {
-    isRestricted: false,
-    isDownloadable: false,
-    isEarnedButUnavailable: false,
-  };
-  const defaultEnrollment = {
-    isAudit: false,
-    isVerified: false,
-    hasFinished: false,
-  };
-  const defaultGrade = {
-    isPassing: false,
-  };
   const createWrapper = ({
     certificate = {},
     enrollment = {},
     grade = {},
+    courseRun = {},
+    platformSettings = {},
   }) => {
-    hooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
-    hooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
-    hooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
-    return shallow(<CertificateBanner {...props} />);
+    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>);
   };
-  describe('snapshot', () => {
-    test('is restricted', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('is restricted and verified', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('not passing and audit', () => {
-      const wrapper = createWrapper({
-        enrollment: {
-          isAudit: true,
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('not passing and has finished', () => {
-      const wrapper = createWrapper({
-        enrollment: {
-          hasFinished: true,
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('not passing and not audit and not finished', () => {
-      const wrapper = createWrapper({});
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('is passing and is downloadable', () => {
-      const wrapper = createWrapper({
-        grade: {
-          isPassing: true,
-        },
-        certificate: {
-          isDownloadable: true,
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('is passing and is earned but unavailable', () => {
-      const wrapper = createWrapper({
-        grade: {
-          isPassing: true,
-        },
-        certificate: {
-          isEarnedButUnavailable: true,
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('is passing and not downloadable render empty', () => {
-      const wrapper = createWrapper({
-        grade: {
-          isPassing: true,
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-  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);
+  it('is restricted', () => {
+    createWrapper({
+      certificate: {
+        isRestricted: 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).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,
+      },
     });
+    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,
+      },
+    });
+    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,
+      },
+    });
+    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,
+      },
+    });
+    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,
+      },
+    });
+    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,
+      },
+    });
+    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 },
+    });
+    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 },
+    });
+    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,
+      },
+    });
+    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();
   });
 });

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

@@ -1,10 +1,10 @@
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { hooks as appHooks } from 'data/redux';
+import { utilHooks, reduxHooks } from 'hooks';
 import Banner from 'components/Banner';
 import messages from './messages';
 
@@ -12,12 +12,11 @@ export const CourseBanner = ({ cardId }) => {
   const {
     isVerified,
     isAuditAccessExpired,
-    canUpgrade,
     coursewareAccess = {},
-  } = appHooks.useCardEnrollmentData(cardId);
-  const courseRun = appHooks.useCardCourseRunData(cardId);
-  const course = appHooks.useCardCourseData(cardId);
-  const { formatMessage, formatDate } = useIntl();
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const courseRun = reduxHooks.useCardCourseRunData(cardId);
+  const { formatMessage } = useIntl();
+  const formatDate = utilHooks.useFormatDate();
 
   const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess;
 
@@ -26,33 +25,15 @@ export const CourseBanner = ({ cardId }) => {
   return (
     <>
       {isAuditAccessExpired
-        && (canUpgrade ? (
+        && (
           <Banner>
             {formatMessage(messages.auditAccessExpired)}
             {'  '}
-            {formatMessage(messages.upgradeToAccess)}
+            <Hyperlink isInline destination="">
+              {formatMessage(messages.findAnotherCourse)}
+            </Hyperlink>
           </Banner>
-        ) : (
-          <Banner>
-            {formatMessage(messages.auditAccessExpired)}
-            {'  '}
-            {
-              <Hyperlink destination="">
-                {formatMessage(messages.findAnotherCourse)}
-              </Hyperlink>
-            }
-          </Banner>
-        ))}
-
-      {courseRun.isActive && !canUpgrade && (
-        <Banner>
-          {formatMessage(messages.upgradeDeadlinePassed)}
-          {'  '}
-          <Hyperlink destination={course.website || ''}>
-            {formatMessage(messages.exploreCourseDetails)}
-          </Hyperlink>
-        </Banner>
-      )}
+        )}
 
       {(!isStaff && isTooEarly && courseRun.startDate) && (
         <Banner>
@@ -61,6 +42,7 @@ export const CourseBanner = ({ cardId }) => {
           })}
         </Banner>
       )}
+
       {(!isStaff && hasUnmetPrerequisites) && (
         <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
       )}

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

@@ -1,29 +1,26 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-import { Hyperlink } from '@edx/paragon';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { hooks as appHooks } from 'data/redux';
+import { reduxHooks } from 'hooks';
 import { formatMessage } from 'testUtils';
 import { CourseBanner } from './CourseBanner';
 
 import messages from './messages';
 
-jest.mock('components/Banner', () => 'Banner');
-jest.mock('data/redux', () => ({
-  hooks: {
-    useCardCourseData: jest.fn(),
+jest.mock('hooks', () => ({
+  utilHooks: {
+    useFormatDate: () => date => date,
+  },
+  reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
   },
 }));
 
-const cardId = 'my-test-course-number';
-
-let el;
+const cardId = 'test-card-id';
 
 const enrollmentData = {
   isVerified: false,
-  canUpgrade: false,
   isAuditAccessExpired: false,
   coursewareAccess: {
     hasUnmetPrerequisites: false,
@@ -34,138 +31,74 @@ const enrollmentData = {
 const courseRunData = {
   isActive: false,
   startDate: '11/11/3030',
-};
-const courseData = {
-  website: 'test-course-website',
+  marketingUrl: 'marketing-url',
 };
 
-const render = (overrides = {}) => {
+const renderCourseBanner = (overrides = {}) => {
   const {
-    course = {},
     courseRun = {},
     enrollment = {},
   } = overrides;
-  appHooks.useCardCourseData.mockReturnValueOnce({
-    ...courseData,
-    ...course,
-  });
-  appHooks.useCardCourseRunData.mockReturnValueOnce({
+  reduxHooks.useCardCourseRunData.mockReturnValueOnce({
     ...courseRunData,
     ...courseRun,
   });
-  appHooks.useCardEnrollmentData.mockReturnValueOnce({
+  reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
     ...enrollmentData,
     ...enrollment,
   });
-  el = shallow(<CourseBanner cardId={cardId} />);
+  return render(<IntlProvider locale="en"><CourseBanner cardId={cardId} /></IntlProvider>);
 };
 
 describe('CourseBanner', () => {
-  test('initializes data with course number from enrollment, course and course run data', () => {
-    render();
-    expect(appHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
-    expect(appHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
-    expect(appHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
+  it('initializes data with course number from enrollment, course and course run data', () => {
+    renderCourseBanner();
+    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
   });
-  test('no display if learner is verified', () => {
-    render({ enrollment: { isVerified: true } });
-    expect(el.isEmptyRender()).toEqual(true);
+  it('no display if learner is verified', () => {
+    renderCourseBanner({ enrollment: { isVerified: true } });
+    expect(screen.queryByRole('alert')).toBeNull();
   });
-  describe('audit access expired, can upgrade', () => {
-    beforeEach(() => {
-      render({ enrollment: { isAuditAccessExpired: true, canUpgrade: 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();
     });
-    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(courseData.website);
-    });
-  });
-  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', () => {
-    beforeEach(() => {
-      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
-    });
-    test('snapshot: unmetPrerequisites', () => {
-      expect(el).toMatchSnapshot();
-    });
-    test('messages: prerequisitesNotMet', () => {
-      expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage);
+    it('should display correct message', () => {
+      renderCourseBanner({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
+      const preReqText = screen.getByText(formatMessage(messages.prerequisitesNotMet));
+      expect(preReqText).toBeInTheDocument();
     });
   });
   describe('too early', () => {
     describe('no start date', () => {
-      beforeEach(() => {
-        render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
+      it('should not display banner', () => {
+        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
+        const banner = screen.queryByRole('alert');
+        expect(banner).toBeNull();
       });
-      test('snapshot', () => expect(el).toMatchSnapshot());
-      test('messages', () => expect(el.text()).toEqual(''));
     });
     describe('has start date', () => {
-      beforeEach(() => {
-        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
-      });
-      test('snapshot', () => expect(el).toMatchSnapshot());
-
-      test('messages: courseHasNotStarted', () => {
-        expect(el.text()).toContain(
+      it('should display messages courseHasNotStarted', () => {
+        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } } });
+        const earlyMsg = screen.getByText(
           formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
         );
+        expect(earlyMsg).toBeInTheDocument();
       });
     });
   });
   describe('staff', () => {
-    beforeEach(() => {
-      render({ enrollment: { coursewareAccess: { isStaff: true } } });
+    it('should not display banner', () => {
+      renderCourseBanner({ enrollment: { coursewareAccess: { isStaff: true } } });
+      const banner = screen.queryByRole('alert');
+      expect(banner).toBeNull();
     });
-    test('snapshot: isStaff', () => {
-      expect(el).toMatchSnapshot();
-    });
-  });
-  test('snapshot: stacking banners', () => {
-    render({
-      enrollment: {
-        coursewareAccess: {
-          isStaff: true,
-          isTooEarly: true,
-          hasUnmetPrerequisites: true,
-        },
-      },
-    });
-    expect(el).toMatchSnapshot();
   });
 });

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/hooks.js

@@ -0,0 +1,41 @@
+import { StrictDict } from 'utils';
+
+import { reduxHooks } from 'hooks';
+
+import ApprovedContent from './views/ApprovedContent';
+import EligibleContent from './views/EligibleContent';
+import MustRequestContent from './views/MustRequestContent';
+import PendingContent from './views/PendingContent';
+import RejectedContent from './views/RejectedContent';
+
+export const statusComponents = StrictDict({
+  pending: PendingContent,
+  approved: ApprovedContent,
+  rejected: RejectedContent,
+});
+
+export const useCreditBannerData = (cardId) => {
+  const credit = reduxHooks.useCardCreditData(cardId);
+  const { supportEmail } = reduxHooks.usePlatformSettingsData();
+  if (!credit.isEligible) { return null; }
+
+  const { error, purchased, requestStatus } = credit;
+  let ContentComponent = EligibleContent;
+  if (purchased) {
+    if (requestStatus == null) {
+      ContentComponent = MustRequestContent;
+    } else if (Object.keys(statusComponents).includes(requestStatus)) {
+      ContentComponent = statusComponents[requestStatus];
+    }
+    // Current behavior is to show Elligible State if unknown request status is returned
+  }
+  return {
+    ContentComponent,
+    error,
+    supportEmail,
+  };
+};
+
+export default {
+  useCreditBannerData,
+};

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

@@ -0,0 +1,90 @@
+import { keyStore } from 'utils';
+import { reduxHooks } from 'hooks';
+
+import ApprovedContent from './views/ApprovedContent';
+import EligibleContent from './views/EligibleContent';
+import MustRequestContent from './views/MustRequestContent';
+import PendingContent from './views/PendingContent';
+import RejectedContent from './views/RejectedContent';
+
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+  },
+}));
+jest.mock('./views/ApprovedContent', () => 'ApprovedContent');
+jest.mock('./views/EligibleContent', () => 'EligibleContent');
+jest.mock('./views/MustRequestContent', () => 'MustRequestContent');
+jest.mock('./views/PendingContent', () => 'PendingContent');
+jest.mock('./views/RejectedContent', () => 'RejectedContent');
+
+const cardId = 'test-card-id';
+const statuses = keyStore(hooks.statusComponents);
+const supportEmail = 'test-support-email';
+let out;
+
+const defaultProps = {
+  isEligible: true,
+  error: false,
+  isPurchased: false,
+  requestStatus: null,
+};
+
+const loadHook = (creditData = {}) => {
+  reduxHooks.useCardCreditData.mockReturnValue({ ...defaultProps, ...creditData });
+  out = hooks.useCreditBannerData(cardId);
+};
+
+describe('useCreditBannerData hook', () => {
+  beforeEach(() => {
+    reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+  });
+  it('loads card credit data with cardID and loads platform settings data', () => {
+    loadHook({ isEligible: false });
+    expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.usePlatformSettingsData).toHaveBeenCalledWith();
+  });
+  describe('non-credit-eligible learner', () => {
+    it('returns null if the learner is not credit eligible', () => {
+      loadHook({ isEligible: false });
+      expect(out).toEqual(null);
+    });
+  });
+  describe('credit-eligible learner', () => {
+    it('returns error object from credit', () => {
+      loadHook();
+      expect(out.error).toEqual(defaultProps.error);
+      loadHook({ error: true });
+      expect(out.error).toEqual(true);
+    });
+    describe('ContentComponent', () => {
+      it('returns EligibleContent if not purchased', () => {
+        loadHook();
+        expect(out.ContentComponent).toEqual(EligibleContent);
+      });
+      it('returns MustRequestContent if purchased but not requested', () => {
+        loadHook({ purchased: true });
+        expect(out.ContentComponent).toEqual(MustRequestContent);
+      });
+      it('returns PendingContent if purchased and request is pending', () => {
+        loadHook({ purchased: true, requestStatus: statuses.pending });
+        expect(out.ContentComponent).toEqual(PendingContent);
+      });
+      it('returns ApprovedContent if purchased and request is approved', () => {
+        loadHook({ purchased: true, requestStatus: statuses.approved });
+        expect(out.ContentComponent).toEqual(ApprovedContent);
+      });
+      it('returns RejectedContent if purchased and request is rejected', () => {
+        loadHook({ purchased: true, requestStatus: statuses.rejected });
+        expect(out.ContentComponent).toEqual(RejectedContent);
+      });
+      it('returns EligibleContent if purchased and request status is invalid', () => {
+        loadHook({ purchased: true, requestStatus: 'fake-status' });
+        expect(out.ContentComponent).toEqual(EligibleContent);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import Banner from 'components/Banner';
+
+import { MailtoLink } from '@openedx/paragon';
+import hooks from './hooks';
+import messages from './messages';
+
+export const CreditBanner = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const hookData = hooks.useCreditBannerData(cardId);
+  if (hookData === null) {
+    return null;
+  }
+
+  const { ContentComponent, error, supportEmail } = hookData;
+  const supportEmailLink = (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>);
+  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>
+      )}
+      <ContentComponent cardId={cardId} />
+    </Banner>
+  );
+};
+CreditBanner.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CreditBanner;

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

@@ -0,0 +1,65 @@
+import { screen, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import hooks from './hooks';
+import { CreditBanner } from '.';
+
+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';
+
+  const renderCreditBanner = () => render(
+    <IntlProvider locale="en">
+      <CreditBanner cardId={mockCardId} />
+    </IntlProvider>,
+  );
+
+  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,
+    });
+    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,
+    });
+    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,
+    });
+    renderCreditBanner();
+
+    expect(screen.getByTestId('credit-error-msg')).toBeInTheDocument();
+    expect(screen.queryByText(mockSupportEmail)).not.toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  error: {
+    id: 'learner-dash.courseCard.banners.credit.error',
+    description: '',
+    defaultMessage: 'An error occurred with this transaction.  For help, contact {supportEmailLink}.',
+  },
+  errorNoEmail: {
+    id: 'learner-dash.courseCard.banners.credit.errorNoEmail',
+    description: '',
+    defaultMessage: 'An error occurred with this transaction.',
+  },
+});
+
+export default messages;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+import CreditContent from './components/CreditContent';
+import ProviderLink from './components/ProviderLink';
+
+import messages from './messages';
+
+export const ApprovedContent = ({ cardId }) => {
+  const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
+  const { formatMessage } = useIntl();
+  return (
+    <CreditContent
+      action={{ href, message: formatMessage(messages.viewCredit), disabled: isMasquerading }}
+      message={formatMessage(
+        messages.approved,
+        {
+          congratulations: <b>{formatMessage(messages.congratulations)}</b>,
+          linkToProviderSite: <ProviderLink cardId={cardId} />,
+          providerName,
+        },
+      )}
+    />
+  );
+};
+ApprovedContent.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default ApprovedContent;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/ApprovedContent.test.jsx

@@ -0,0 +1,75 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { formatMessage } from 'testUtils';
+import { reduxHooks } from 'hooks';
+import messages from './messages';
+import ApprovedContent from './ApprovedContent';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+    useMasqueradeData: jest.fn(),
+  },
+}));
+
+const cardId = 'test-card-id';
+const credit = {
+  providerStatusUrl: 'test-credit-provider-status-url',
+  providerName: 'test-credit-provider-name',
+};
+reduxHooks.useCardCreditData.mockReturnValue(credit);
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
+
+describe('ApprovedContent component', () => {
+  describe('hooks', () => {
+    it('initializes credit data with cardId', () => {
+      render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    });
+  });
+  describe('render', () => {
+    describe('rendered CreditContent component', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+      });
+      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));
+      });
+      it('action.href from credit.providerStatusUrl', () => {
+        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
+        expect(actionButton).toHaveAttribute('href', credit.providerStatusUrl);
+      });
+      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(() => {
+        reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true });
+        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+      });
+
+      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);
+      });
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+
+import CreditContent from './components/CreditContent';
+import messages from './messages';
+
+export const EligibleContent = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { providerName } = reduxHooks.useCardCreditData(cardId);
+  const { courseId } = reduxHooks.useCardCourseRunData(cardId);
+
+  const onClick = track.credit.purchase(courseId);
+  const getCredit = formatMessage(messages.getCredit);
+  const message = providerName
+    ? formatMessage(messages.eligibleFromProvider, { providerName })
+    : formatMessage(messages.eligible, { getCredit: (<b>{getCredit}</b>) });
+
+  return (
+    <CreditContent
+      action={{ onClick, message: getCredit }}
+      message={message}
+    />
+  );
+};
+EligibleContent.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default EligibleContent;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/EligibleContent.test.jsx

@@ -0,0 +1,74 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+
+import messages from './messages';
+import EligibleContent from './EligibleContent';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+  },
+}));
+
+jest.mock('tracking', () => ({
+  credit: {
+    purchase: jest.fn(),
+  },
+}));
+
+const cardId = 'test-card-id';
+const courseId = 'test-course-id';
+const credit = {
+  providerName: 'test-credit-provider-name',
+};
+reduxHooks.useCardCreditData.mockReturnValue(credit);
+reduxHooks.useCardCourseRunData.mockReturnValue({ courseId });
+
+const renderEligibleContent = () => render(<IntlProvider locale="en" messages={{}}><EligibleContent cardId={cardId} /></IntlProvider>);
+
+describe('EligibleContent component', () => {
+  describe('hooks', () => {
+    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('rendered CreditContent component', () => {
+      it('action message is formatted getCredit message', () => {
+        renderEligibleContent();
+        const button = screen.getByRole('button', { name: messages.getCredit.defaultMessage });
+        expect(button).toBeInTheDocument();
+      });
+      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);
+      });
+      it('message is formatted eligible message if provider', () => {
+        renderEligibleContent();
+        const eligibleMessage = screen.getByTestId('credit-msg');
+        expect(eligibleMessage).toBeInTheDocument();
+        expect(eligibleMessage).toHaveTextContent(credit.providerName);
+      });
+      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);
+      });
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+import CreditContent from './components/CreditContent';
+import ProviderLink from './components/ProviderLink';
+import hooks from './hooks';
+
+import messages from './messages';
+
+export const MustRequestContent = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+  const { requestData, createCreditRequest } = hooks.useCreditRequestData(cardId);
+  const { isMasquerading } = reduxHooks.useMasqueradeData();
+  return (
+    <CreditContent
+      action={{
+        message: formatMessage(messages.requestCredit),
+        onClick: createCreditRequest,
+        disabled: isMasquerading,
+      }}
+      message={formatMessage(messages.mustRequest, {
+        linkToProviderSite: (<ProviderLink cardId={cardId} />),
+        requestCredit: (<b>{formatMessage(messages.requestCredit)}</b>),
+      })}
+      requestData={requestData}
+    />
+  );
+};
+MustRequestContent.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default MustRequestContent;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/MustRequestContent.test.jsx

@@ -0,0 +1,104 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+
+import { reduxHooks } from 'hooks';
+import messages from './messages';
+import hooks from './hooks';
+import MustRequestContent from './MustRequestContent';
+
+jest.mock('./hooks', () => ({
+  useCreditRequestData: jest.fn(),
+}));
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useMasqueradeData: jest.fn(),
+    useCardCreditData: jest.fn(),
+  },
+}));
+
+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 createCreditRequest = jest.fn().mockName('createCreditRequest');
+
+const renderMustRequestContent = () => render(
+  <IntlProvider locale="en" messages={messages}>
+    <MustRequestContent cardId={cardId} />
+  </IntlProvider>,
+);
+
+describe('MustRequestContent component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    hooks.useCreditRequestData.mockReturnValue({
+      requestData,
+      createCreditRequest,
+    });
+    reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
+    reduxHooks.useCardCreditData.mockReturnValue({
+      providerName,
+      providerStatusUrl,
+    });
+  });
+
+  describe('hooks', () => {
+    it('initializes credit request data with cardId', () => {
+      renderMustRequestContent();
+      expect(hooks.useCreditRequestData).toHaveBeenCalledWith(cardId);
+    });
+  });
+
+  describe('behavior', () => {
+    describe('rendered content', () => {
+      beforeEach(() => {
+        renderMustRequestContent();
+      });
+
+      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();
+      });
+
+      it('shows request credit button that is enabled', () => {
+        const button = screen.getByRole('button', { name: /request credit/i });
+        expect(button).toBeEnabled();
+      });
+
+      it('displays must request message with provider link', () => {
+        expect(screen.getByTestId('credit-msg')).toHaveTextContent(/request credit/i);
+      });
+
+      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(() => {
+        reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true });
+        renderMustRequestContent();
+      });
+
+      it('disables the request credit button', () => {
+        const button = screen.getByRole('button', { name: /request credit/i });
+        expect(button).toHaveClass('disabled');
+        expect(button).toHaveAttribute('aria-disabled', 'true');
+      });
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+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 } = reduxHooks.useMasqueradeData();
+  const { formatMessage } = useIntl();
+  return (
+    <CreditContent
+      action={{
+        href,
+        message: formatMessage(messages.viewDetails),
+        disabled: isMasquerading,
+      }}
+      message={formatMessage(messages.received, { providerName })}
+    />
+  );
+};
+PendingContent.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default PendingContent;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/PendingContent.test.jsx

@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+
+import messages from './messages';
+import PendingContent from './PendingContent';
+
+jest.mock('hooks', () => ({
+  reduxHooks: { useCardCreditData: jest.fn(), useMasqueradeData: jest.fn() },
+}));
+
+const cardId = 'test-card-id';
+const providerName = 'test-credit-provider-name';
+const providerStatusUrl = 'test-credit-provider-status-url';
+reduxHooks.useCardCreditData.mockReturnValue({
+  providerName,
+  providerStatusUrl,
+});
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
+
+const renderPendingContent = () => render(
+  <IntlProvider messages={{}} locale="en">
+    <PendingContent cardId={cardId} />
+  </IntlProvider>,
+);
+describe('PendingContent component', () => {
+  describe('hooks', () => {
+    it('initializes card credit data with cardId', () => {
+      renderPendingContent();
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    });
+  });
+  describe('behavior', () => {
+    describe('rendered CreditContent component', () => {
+      it('action message is formatted requestCredit message', () => {
+        renderPendingContent();
+        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+        expect(button).toBeInTheDocument();
+      });
+      it('action href will go to provider status site', () => {
+        renderPendingContent();
+        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+        expect(button).toHaveAttribute('href', providerStatusUrl);
+      });
+      it('action.disabled is false', () => {
+        renderPendingContent();
+        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+        expect(button).not.toHaveClass('disabled');
+      });
+      it('message is formatted pending message with provider name', () => {
+        renderPendingContent();
+        const component = screen.getByTestId('credit-msg');
+        expect(component).toBeInTheDocument();
+        expect(component).toHaveTextContent(`${providerName} has received`);
+      });
+      describe('when masqueradeData is true', () => {
+        it('disables the view details button', () => {
+          reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: true });
+          renderPendingContent();
+          const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+          expect(button).toHaveClass('disabled');
+        });
+      });
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+import CreditContent from './components/CreditContent';
+import ProviderLink from './components/ProviderLink';
+import messages from './messages';
+
+export const RejectedContent = ({ cardId }) => {
+  const credit = reduxHooks.useCardCreditData(cardId);
+  const { formatMessage } = useIntl();
+  return (
+    <CreditContent
+      message={formatMessage(messages.rejected, {
+        providerName: credit.providerName,
+        linkToProviderSite: (<ProviderLink cardId={cardId} />),
+      })}
+    />
+  );
+};
+RejectedContent.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default RejectedContent;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/RejectedContent.test.jsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import { reduxHooks } from 'hooks';
+import RejectedContent from './RejectedContent';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+  },
+}));
+
+const cardId = 'test-card-id';
+const credit = {
+  providerStatusUrl: 'test-credit-provider-status-url',
+  providerName: 'test-credit-provider-name',
+};
+reduxHooks.useCardCreditData.mockReturnValue(credit);
+
+const renderRejectedContent = () => render(<IntlProvider><RejectedContent cardId={cardId} /></IntlProvider>);
+
+describe('RejectedContent component', () => {
+  describe('hooks', () => {
+    it('initializes credit data with cardId', () => {
+      renderRejectedContent();
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    });
+  });
+  describe('render', () => {
+    describe('rendered CreditContent component', () => {
+      it('no action is passed', () => {
+        renderRejectedContent();
+        const action = screen.queryByTestId('action-row-btn');
+        expect(action).not.toBeInTheDocument();
+      });
+      it('message is formatted rejected message', () => {
+        renderRejectedContent();
+        const message = screen.getByTestId('credit-msg');
+        expect(message).toBeInTheDocument();
+        expect(message).toHaveTextContent(`${credit.providerName} did not approve your request for course credit.`);
+      });
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ActionRow, Button } from '@openedx/paragon';
+import CreditRequestForm from './CreditRequestForm';
+
+export const CreditContent = ({ action, message, requestData }) => (
+  <>
+    <div className="message-copy credit-msg" data-testid="credit-msg">
+      {message}
+    </div>
+    {action && (
+      <ActionRow className="mt-4">
+        <Button
+          as="a"
+          disabled={!!action.disabled}
+          // make sure href is not undefined. Paragon won't disable the button if href is undefined.
+          href={action.href || '#'}
+          rel="noopener"
+          target="_blank"
+          variant="outline-primary"
+          className="border-gray-400"
+          onClick={action.onClick}
+          data-testid="action-row-btn"
+        >
+          {action.message}
+        </Button>
+      </ActionRow>
+    )}
+    <CreditRequestForm requestData={requestData} />
+  </>
+);
+CreditContent.defaultProps = {
+  action: null,
+  requestData: null,
+};
+CreditContent.propTypes = {
+  action: PropTypes.shape({
+    href: PropTypes.string,
+    onClick: PropTypes.func,
+    message: PropTypes.string,
+    disabled: PropTypes.bool,
+  }),
+  message: PropTypes.node.isRequired,
+  requestData: PropTypes.shape({
+    url: PropTypes.string,
+    parameters: PropTypes.objectOf(PropTypes.string),
+  }),
+};
+
+export default CreditContent;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditContent.test.jsx

@@ -0,0 +1,70 @@
+import { render, screen } from '@testing-library/react';
+
+import CreditContent from './CreditContent';
+
+const action = {
+  href: 'test-action-href',
+  onClick: jest.fn().mockName('test-action-onClick'),
+  message: 'test-action-message',
+  disabled: false,
+};
+
+const message = 'test-message';
+const requestData = { url: 'test-request-data-url', parameters: { key1: 'val1' } };
+const props = { action, message, requestData };
+
+const renderCreditContent = (data) => render(
+  <CreditContent {...data} />,
+);
+
+describe('CreditContent component', () => {
+  describe('render', () => {
+    describe('with action', () => {
+      it('loads href and message into action row button', () => {
+        renderCreditContent(props);
+        const button = screen.getByRole('link', { name: action.message });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveAttribute('href', action.href);
+        expect(button).not.toHaveAttribute('disabled');
+      });
+      it('loads message into credit-msg div', () => {
+        renderCreditContent(props);
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg).toBeInTheDocument();
+        expect(creditMsg.innerHTML).toEqual(message);
+      });
+      it('loads CreditRequestForm with passed requestData', () => {
+        const { container } = renderCreditContent(props);
+        const creditForm = container.querySelector('form');
+        expect(creditForm).toBeInTheDocument();
+        expect(creditForm).toHaveAttribute('action', requestData.url);
+      });
+      it('disables action button when action.disabled is true', () => {
+        renderCreditContent({ ...props, action: { ...action, disabled: true } });
+        const button = screen.getByRole('link', { name: action.message });
+        expect(button).toBeInTheDocument();
+        expect(button).toHaveClass('disabled');
+        expect(button).toHaveAttribute('aria-disabled', 'true');
+      });
+    });
+    describe('without action', () => {
+      it('loads message into credit-msg div', () => {
+        renderCreditContent({ message, requestData });
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg).toBeInTheDocument();
+        expect(creditMsg.innerHTML).toEqual(message);
+      });
+      it('loads CreditRequestForm with passed requestData', () => {
+        const { container } = renderCreditContent({ message, requestData });
+        const creditForm = container.querySelector('form');
+        expect(creditForm).toBeInTheDocument();
+        expect(creditForm).toHaveAttribute('action', requestData.url);
+      });
+      it('does not render action row button', () => {
+        renderCreditContent({ message, requestData });
+        const button = screen.queryByRole('link', { name: action.message });
+        expect(button).not.toBeInTheDocument();
+      });
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/hooks.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+export const useCreditRequestFormData = (requestData) => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (requestData !== null) {
+      ref.current.click();
+    }
+  }, [requestData]);
+  return { ref };
+};
+
+export default useCreditRequestFormData;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/hooks.test.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import useCreditRequestFormData from './hooks';
+
+const requestData = 'test-request-data';
+
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useRef: jest.fn((val) => ({ current: val, useRef: true })),
+  useEffect: jest.fn((cb, prereqs) => ({ useEffect: { cb, prereqs } })),
+}));
+
+let out;
+const ref = {
+  current: { click: jest.fn() },
+};
+React.useRef.mockReturnValue(ref);
+
+describe('useCreditRequestFormData hook', () => {
+  describe('behavior', () => {
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+    it('initializes ref with null', () => {
+      useCreditRequestFormData(requestData);
+      expect(React.useRef).toHaveBeenCalledWith(null);
+    });
+    let cb;
+    let prereqs;
+    it('does not click current ref when request data changes and is null', () => {
+      useCreditRequestFormData(null);
+      ([[cb, prereqs]] = React.useEffect.mock.calls);
+      expect(prereqs).toEqual([null]);
+      cb();
+      expect(ref.current.click).not.toHaveBeenCalled();
+    });
+    it('clicks current ref when request data changes and is not null', () => {
+      useCreditRequestFormData(requestData);
+      ([[cb, prereqs]] = React.useEffect.mock.calls);
+      expect(prereqs).toEqual([requestData]);
+      cb();
+      expect(ref.current.click).toHaveBeenCalled();
+    });
+  });
+  describe('output', () => {
+    it('returns ref for submit button', () => {
+      out = useCreditRequestFormData(requestData);
+      expect(out.ref).toEqual(ref);
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button, Form, FormControl } from '@openedx/paragon';
+
+import useCreditRequestFormData from './hooks';
+
+export const CreditRequestForm = ({ requestData }) => {
+  const { ref } = useCreditRequestFormData(requestData);
+  if (requestData === null) {
+    return null;
+  }
+  const { parameters, url } = requestData;
+  return (
+    <Form
+      accept-method="UTF-8"
+      action={url}
+      className="hidden"
+      method="POST"
+    >
+      {Object.keys(parameters).map((key) => (
+        <FormControl
+          as="textarea"
+          key={key}
+          name={key}
+          value={parameters[key]}
+        />
+      ))}
+      <Button type="submit" ref={ref} />
+    </Form>
+  );
+};
+CreditRequestForm.defaultProps = {
+  requestData: null,
+};
+CreditRequestForm.propTypes = {
+  requestData: PropTypes.shape({
+    parameters: PropTypes.objectOf(PropTypes.string),
+    url: PropTypes.string,
+  }),
+};
+
+export default CreditRequestForm;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/index.test.jsx

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/react';
+
+import { keyStore } from 'utils';
+
+import useCreditRequestFormData from './hooks';
+import CreditRequestForm from '.';
+
+jest.mock('./hooks', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const ref = { current: { click: jest.fn() }, useRef: jest.fn() };
+
+const requestData = {
+  url: 'test-request-data-url',
+  parameters: {
+    key1: 'val1',
+    key2: 'val2',
+    key3: 'val3',
+  },
+};
+
+const paramKeys = keyStore(requestData.parameters);
+
+useCreditRequestFormData.mockReturnValue({ ref });
+
+const renderForm = (data) => render(<CreditRequestForm requestData={data} />);
+describe('CreditRequestForm component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('hooks', () => {
+    it('initializes ref from hook with requestData', () => {
+      renderForm(requestData);
+      expect(useCreditRequestFormData).toHaveBeenCalledWith(requestData);
+    });
+  });
+  describe('render output', () => {
+    describe('null requestData', () => {
+      it('returns null', () => {
+        const { container } = renderForm(null);
+        expect(container.firstChild).toBeNull();
+      });
+    });
+    describe('valid requestData', () => {
+      it('loads Form with requestData url', () => {
+        const { container } = renderForm(requestData);
+        const creditForm = container.querySelector('form');
+        expect(creditForm).toBeInTheDocument();
+        expect(creditForm).toHaveAttribute('action', requestData.url);
+      });
+      it('loads a textarea form control for each requestData parameter', () => {
+        const { container } = renderForm(requestData);
+        const controls = container.querySelectorAll('textarea');
+        expect(controls.length).toEqual(Object.keys(requestData.parameters).length);
+        expect(controls[0]).toHaveAttribute('name', paramKeys.key1);
+        expect(controls[0]).toHaveValue(requestData.parameters.key1);
+        expect(controls[1]).toHaveAttribute('name', paramKeys.key2);
+        expect(controls[1]).toHaveValue(requestData.parameters.key2);
+        expect(controls[2]).toHaveAttribute('name', paramKeys.key3);
+        expect(controls[2]).toHaveValue(requestData.parameters.key3);
+      });
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/CreditRequestForm/ref.test.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import useCreditRequestFormData from './hooks';
+import CreditRequestForm from '.';
+
+jest.mock('./hooks', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const ref = { current: { click: jest.fn() }, useRef: jest.fn() };
+const requestData = {
+  url: 'test-request-data-url',
+  parameters: {
+    key1: 'val1',
+    key2: 'val2',
+    key3: 'val3',
+  },
+};
+
+useCreditRequestFormData.mockReturnValue({ ref });
+
+let el;
+describe('CreditRequestForm component ref behavior', () => {
+  it('loads submit button with ref from hook', () => {
+    el = render(<CreditRequestForm requestData={requestData} />);
+    const button = el.getByRole('button');
+    expect(ref.current).toEqual(button);
+  });
+});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.jsx

@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { reduxHooks } from 'hooks';
+import { Hyperlink } from '@openedx/paragon';
+
+export const ProviderLink = ({ cardId }) => {
+  const credit = reduxHooks.useCardCreditData(cardId);
+  return (
+    <Hyperlink
+      href={credit.providerStatusUrl}
+      rel="noopener"
+      target="_blank"
+    >
+      {credit.providerName}
+    </Hyperlink>
+  );
+};
+ProviderLink.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default ProviderLink;

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/components/ProviderLink.test.jsx

@@ -0,0 +1,44 @@
+import { render, screen } from '@testing-library/react';
+import { reduxHooks } from 'hooks';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+
+import ProviderLink from './ProviderLink';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+  },
+}));
+
+const cardId = 'test-card-id';
+const credit = {
+  providerStatusUrl: 'test-credit-provider-status-url',
+  providerName: 'test-credit-provider-name',
+};
+
+const renderProviderLink = () => render(
+  <IntlProvider locale="en"><ProviderLink cardId={cardId} /></IntlProvider>,
+);
+
+describe('ProviderLink component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    reduxHooks.useCardCreditData.mockReturnValue(credit);
+    renderProviderLink();
+  });
+  describe('hooks', () => {
+    it('initializes credit hook with cardId', () => {
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    });
+  });
+  describe('render', () => {
+    it('passes credit.providerStatusUrl to the hyperlink href', () => {
+      const providerLink = screen.getByRole('link', { href: credit.providerStatusUrl });
+      expect(providerLink).toBeInTheDocument();
+    });
+    it('passes providerName for the link message', () => {
+      const providerLink = screen.getByRole('link', { href: credit.providerStatusUrl });
+      expect(providerLink).toHaveTextContent(credit.providerName);
+    });
+  });
+});