chore(deps): update dependency copy-webpack-plugin to v14

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>

.dockerignore

@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+README.md
+LICENSE
+.babelrc
+.eslintignore
+.eslintrc.json
+.gitignore
+.npmignore
+commitlint.config.js

.env

@@ -0,0 +1,47 @@
+NODE_ENV='production'
+APP_ID='learner-dashboard'
+NODE_PATH=./src
+BASE_URL=''
+LMS_BASE_URL=''
+ECOMMERCE_BASE_URL=''
+LOGIN_URL=''
+LOGOUT_URL=''
+CSRF_TOKEN_API_PATH=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+DATA_API_BASE_URL=''
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+ACCESS_TOKEN_COOKIE_NAME=''
+NEW_RELIC_APP_ID=''
+NEW_RELIC_LICENSE_KEY=''
+SITE_NAME=''
+MARKETING_SITE_BASE_URL=''
+SUPPORT_URL=''
+CONTACT_URL=''
+OPEN_SOURCE_URL=''
+TERMS_OF_SERVICE_URL=''
+PRIVACY_POLICY_URL=''
+FACEBOOK_URL=''
+TWITTER_URL=''
+YOU_TUBE_URL=''
+LINKED_IN_URL=''
+REDDIT_URL=''
+APPLE_APP_STORE_URL=''
+GOOGLE_PLAY_URL=''
+ENTERPRISE_MARKETING_URL=''
+ENTERPRISE_MARKETING_UTM_SOURCE=''
+ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
+LEARNING_BASE_URL=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL=''
+ACCOUNT_PROFILE_URL=''
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.development

@@ -0,0 +1,53 @@
+NODE_ENV='development'
+APP_ID='learner-dashboard'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME=localhost
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+SUPPORT_URL=''
+CONTACT_URL='http://localhost:18000/contact'
+OPEN_SOURCE_URL='http://localhost:18000/openedx'
+TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+FACEBOOK_URL='https://www.facebook.com'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'
+LINKED_IN_URL='https://www.linkedin.com'
+REDDIT_URL='https://www.reddit.com'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+ENTERPRISE_MARKETING_URL='http://example.com'
+ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
+ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+LEARNING_BASE_URL='http://localhost:2000'
+SESSION_COOKIE_DOMAIN='localhost'
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL='http://localhost:1997'
+ACCOUNT_PROFILE_URL='http://localhost:1995'
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
+# Fallback in local style files
+PARAGON_THEME_URLS={}

.env.test

@@ -0,0 +1,51 @@
+NODE_ENV='test'
+APP_ID='learner-dashboard'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME=localhost
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+SUPPORT_URL=''
+CONTACT_URL='http://localhost:18000/contact'
+OPEN_SOURCE_URL='http://localhost:18000/openedx'
+TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+FACEBOOK_URL='https://www.facebook.com'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'
+LINKED_IN_URL='https://www.linkedin.com'
+REDDIT_URL='https://www.reddit.com'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+ENTERPRISE_MARKETING_URL='http://example.com'
+ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
+ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+LEARNING_BASE_URL='http://localhost:2000'
+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'
+CAREER_LINK_URL=''
+ENABLE_EDX_PERSONAL_DASHBOARD=true
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false
+SHOW_UNENROLL_SURVEY=true
+PARAGON_THEME_URLS={}

.eslintignore

@@ -0,0 +1,5 @@
+coverage/*
+dist/
+node_modules/
+src/postcss.config.js
+src/segment.js

.eslintrc.js

@@ -0,0 +1,22 @@
+const { createConfig } = require('@openedx/frontend-build');
+
+const config = createConfig('eslint', {
+  rules: {
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-self-import': 'off',
+    'import/no-import-module-exports': 'off',
+    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+  },
+});
+
+config.settings = {
+  "import/resolver": {
+    node: {
+      paths: ["src", "node_modules"],
+      extensions: [".js", ".jsx"],
+    },
+  },
+};
+
+module.exports = config;

.gitattributes

@@ -0,0 +1 @@
+*.snap linguist-generated=false

.github/CODEOWNERS

@@ -1 +0,0 @@
-*   @openedx/2U-aperture

.github/workflows/ci.yml

@@ -14,10 +14,10 @@ jobs:
 
     steps:
     - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v6
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v6
       with:
         node-version-file: '.nvmrc'
 
@@ -29,6 +29,9 @@ jobs:
 
     - name: Lint
       run: npm run lint
+    
+    - name: Type check
+      run: npm run types
 
     - name: Test
       run: npm run test

.gitignore

@@ -1,15 +1,29 @@
+.DS_Store
+.eslintcache
+env.config.*
 node_modules
 npm-debug.log
 coverage
-module.config.js
+
 dist/
-/*.tgz
+public/samples/
 
-### i18n ###
-src/i18n/transifex_input.json
+### pyenv ###
+.python-version
 
-### Editors ###
-.DS_Store
+### Emacs ###
 *~
-/temp
-/.vscode
+*.swo
+*.swp
+
+### Development environments ###
+.idea
+.vscode
+
+# Local package dependencies
+module.config.js
+
+### transifex ###
+src/i18n/transifex_input.json
+temp
+src/i18n/messages

.npmignore

@@ -1,6 +1,12 @@
-__mocks__
+.eslintignore
+.eslintrc.json
+.gitignore
+docker-compose.yml
+Dockerfile
+Makefile
+npm-debug.log
+
+config
+coverage
 node_modules
-*.test.js
-*.test.jsx
-*.test.ts
-*.test.tsx
+public

.nvmrc

@@ -1 +1 @@
-20
+24

Makefile

@@ -12,6 +12,11 @@ transifex_temp = ./temp/babel-plugin-formatjs
 
 NPM_TESTS=build i18n_extract lint test
 
+# Variables for additional translation sources and imports (define in edx-internal if needed)
+ATLAS_EXTRA_SOURCES ?=
+ATLAS_EXTRA_INTL_IMPORTS ?=
+ATLAS_OPTIONS ?=
+
 .PHONY: test
 test: $(addprefix test.npm.,$(NPM_TESTS))  ## validate ci suite
 
@@ -45,11 +50,14 @@ pull_translations:
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
       && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-base/src/i18n/messages:frontend-base \
+               translations/frontend-platform/src/i18n/messages:frontend-platform \
                translations/paragon/src/i18n/messages:paragon \
-               translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard
+               translations/frontend-component-header/src/i18n/messages:frontend-component-header \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
+               translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard \
+               $(ATLAS_EXTRA_SOURCES)
 
-	$(intl_imports) frontend-base paragon frontend-app-learner-dashboard
+	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-learner-dashboard $(ATLAS_EXTRA_INTL_IMPORTS)
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -18,7 +18,7 @@ frontend-app-learner-dashboard
 The Learner Home app is a microfrontend (MFE) course listing experience for the Open edX Learning Management System
 (LMS).  This experience was designed to provide a clean and functional interface to allow learners to view all of their
 open enrollments, as well as take relevant actions on those enrollments.  It also serves as host to a number of exposed
-"widget" containers to provide upsell and discovery widgets as sidebar components.
+"widget" containers to provide upsell and discovery widgets as sidebar/footer components.
 
 Quickstart
 ----------
@@ -30,10 +30,21 @@ To start the MFE and enable the feature in LMS:
 From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not
 already, and then redirected to your home page.
 
-Widgets
+Plugins
 -------
-This MFE can be customized with widgets.  The parts of this MFE that can be customized in that manner are documented
-`here </src/slots>`_.
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
+Contributing
+------------
+
+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
 -------

app.d.ts

@@ -1,10 +0,0 @@
-/// <reference types="@openedx/frontend-base" />
-
-declare module 'site.config' {
-  export default SiteConfig;
-}
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}

babel.config.js

@@ -1,3 +0,0 @@
-const { createConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createConfig('babel');

eslint.config.js

@@ -1,22 +0,0 @@
-// @ts-check
-
-const { createLintConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createLintConfig(
-  {
-    files: [
-      'src/**/*',
-      'site.config.*',
-    ],
-  },
-  {
-    ignores: [
-      'coverage/*',
-      'dist/*',
-      'documentation/*',
-      'node_modules/*',
-      '**/__mocks__/*',
-      '**/__snapshots__/*',
-    ],
-  },
-);

example.env.config.js

@@ -0,0 +1,74 @@
+/*
+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',
+  APP_ID: 'learner-dashboard',
+  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',
+  CAREER_LINK_URL: '',
+  EXPERIMENT_08_23_VAN_PAINTED_DOOR: true,
+  SHOW_UNENROLL_SURVEY: true
+};

jest.config.js

@@ -1,21 +1,18 @@
-const { createConfig } = require('@openedx/frontend-base/config');
+const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('test', {
+module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
     'jest-expect-message',
     '<rootDir>/src/setupTest.jsx',
   ],
+  modulePaths: ['<rootDir>/src/'],
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',
     'testUtils', // don't unit test jest mocking tools
     'src/data/services/lms/fakeData', // don't unit test mock data
     'src/test', // don't unit test integration test utils
-    'src/__mocks__',
   ],
-  moduleNameMapper: {
-    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
-  },
   testTimeout: 120000,
+  testEnvironment: 'jsdom',
 });

package.json

@@ -1,84 +1,77 @@
 {
-  "name": "@openedx/frontend-app-learner-dashboard",
-  "version": "1.0.0-alpha.3",
+  "name": "@edx/frontend-app-learner-dashboard",
+  "version": "0.0.1",
   "description": "",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
   },
-  "main": "src/index.ts",
-  "files": [
-    "/src"
-  ],
   "browserslist": [
     "extends @edx/browserslist-config"
   ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
   "scripts": {
-    "dev": "PORT=1996 PUBLIC_PATH=/learner-dashboard openedx dev",
-    "i18n_extract": "openedx formatjs extract",
-    "lint": "openedx lint .",
-    "lint:fix": "openedx lint --fix .",
-    "snapshot": "openedx test --updateSnapshot",
-    "test": "openedx test --coverage --passWithNoTests"
+    "build": "fedx-scripts webpack",
+    "i18n_extract": "fedx-scripts formatjs extract",
+    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
+    "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
+    "semantic-release": "semantic-release",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "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",
+    "types": "tsc --noEmit"
   },
-  "author": "Open edX",
+  "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-learner-dashboard#readme",
+  "homepage": "",
   "publishConfig": {
     "access": "public"
   },
-  "bugs": {
-    "url": "https://github.com/openedx/frontend-app-learner-dashboard/issues"
-  },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^8.0.0",
+    "@edx/frontend-enterprise-hotjar": "7.2.0",
+    "@edx/frontend-platform": "^8.3.1",
     "@edx/openedx-atlas": "^0.7.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^2.0.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.5",
+    "@tanstack/react-query": "^5.90.16",
     "classnames": "^2.3.1",
-    "filesize": "^10.0.0",
+    "core-js": "3.48.0",
     "font-awesome": "4.7.0",
+    "history": "5.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "prop-types": "15.8.1",
-    "react-share": "^4.4.0",
-    "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.2",
-    "reselect": "^4.0.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-helmet": "^6.1.0",
+    "react-intl": "6.8.9",
+    "react-router-dom": "6.30.3",
+    "react-share": "^5.2.2",
+    "regenerator-runtime": "^0.14.0",
+    "util": "^0.12.4"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.5.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.3.0",
+    "@testing-library/react": "^16.2.0",
+    "@testing-library/user-event": "^14.6.1",
+    "copy-webpack-plugin": "^14.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-expect-message": "^1.1.3",
     "jest-when": "^3.6.0",
     "react-dev-utils": "^12.0.0",
-    "react-test-renderer": "^18.3.1",
-    "redux-mock-store": "^1.5.4"
-  },
-  "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.2",
-    "@openedx/paragon": "^22",
-    "@tanstack/react-query": "^5",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-redux": "^8",
-    "react-router": "^6",
-    "react-router-dom": "^6",
-    "redux": "^4"
+    "react-test-renderer": "^18.3.1"
   }
 }

public/index.html

@@ -1,7 +1,6 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
   <head>
-      <title>Learner Dashboard Development Site></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>

public/robots.txt

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

site.config.dev.tsx

@@ -1,41 +0,0 @@
-import { EnvironmentTypes, SiteConfig, footerApp, headerApp, shellApp } from '@openedx/frontend-base';
-
-import { learnerDashboardApp } from './src';
-
-import './src/app.scss';
-
-const siteConfig: SiteConfig = {
-  siteId: 'learner-dashboard-dev',
-  siteName: 'Learner Dashboard Dev',
-  baseUrl: 'http://apps.local.openedx.io:1996',
-  lmsBaseUrl: 'http://local.openedx.io:8000',
-  loginUrl: 'http://local.openedx.io:8000/login',
-  logoutUrl: 'http://local.openedx.io:8000/logout',
-
-  environment: EnvironmentTypes.DEVELOPMENT,
-  basename: '/learner-dashboard',
-  apps: [
-    shellApp,
-    headerApp,
-    footerApp,
-    learnerDashboardApp
-  ],
-  externalRoutes: [
-    {
-      role: 'profile',
-      url: 'http://apps.local.openedx.io:1995/profile/'
-    },
-    {
-      role: 'account',
-      url: 'http://apps.local.openedx.io:1997/account/'
-    },
-    {
-      role: 'logout',
-      url: 'http://local.openedx.io:8000/logout'
-    },
-  ],
-
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-};
-
-export default siteConfig;

site.config.test.tsx

@@ -1,28 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '@openedx/frontend-base';
-
-import { appId } from './src/constants';
-
-const siteConfig: SiteConfig = {
-  siteId: 'learner-dashboard-test-site',
-  siteName: 'Learner Dashboard Test Site',
-  baseUrl: 'http://localhost:1996',
-  lmsBaseUrl: 'http://localhost:8000',
-  loginUrl: 'http://localhost:8000/login',
-  logoutUrl: 'http://localhost:8000/logout',
-
-  environment: EnvironmentTypes.TEST,
-  basename: '/learner-dashboard',
-  apps: [{
-    appId,
-    config: {
-      ECOMMERCE_BASE_URL: 'http://localhost:18130',
-      FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
-      LEARNING_BASE_URL: 'http://localhost:2000',
-    },
-  }],
-
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-  segmentKey: '',
-};
-
-export default siteConfig;

src/App.jsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
+import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
+
+import { ErrorPage } from '@edx/frontend-platform/react';
+import { FooterSlot } from '@edx/frontend-component-footer';
+import { Alert } from '@openedx/paragon';
+
+import Dashboard from 'containers/Dashboard';
+
+import AppWrapper from 'containers/AppWrapper';
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useInitializeLearnerHome } from 'data/hooks';
+import { useMasquerade } from 'data/context';
+import messages from './messages';
+import './App.scss';
+
+export const App = () => {
+  const { formatMessage } = useIntl();
+  const { masqueradeUser } = useMasquerade();
+  const { data, isError } = useInitializeLearnerHome();
+  const hasNetworkFailure = !masqueradeUser && isError;
+  const supportEmail = data?.platformSettings?.supportEmail || undefined;
+
+  /* istanbul ignore next */
+  React.useEffect(() => {
+    if (getConfig().HOTJAR_APP_ID) {
+      try {
+        initializeHotjar({
+          hotjarId: getConfig().HOTJAR_APP_ID,
+          hotjarVersion: getConfig().HOTJAR_VERSION,
+          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
+        });
+      } catch (error) {
+        logError(error);
+      }
+    }
+  }, []);
+  return (
+    <>
+      <Helmet>
+        <title>{formatMessage(messages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+      </Helmet>
+      <div>
+        <AppWrapper>
+          <LearnerDashboardHeader />
+          <main id="main">
+            {hasNetworkFailure
+              ? (
+                <Alert variant="danger">
+                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+                </Alert>
+              ) : (
+                <Dashboard />
+              )}
+          </main>
+        </AppWrapper>
+        <FooterSlot />
+      </div>
+    </>
+  );
+};
+
+export default App;

src/App.scss

@@ -0,0 +1,66 @@
+// frontend-app-*/src/index.scss
+@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: 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";
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.alert.alert-info .alert-icon {
+  color: black;
+}
+
+#root {
+  // Removing a odd 1.5 scaling on checkboxes.:
+  input[type=checkbox] {
+    transform: none;
+  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+  }
+
+  header {
+    flex: 0 0 auto;
+
+    .logo {
+      display: block;
+      box-sizing: content-box;
+      position: relative;
+      top: 0.1em;
+      height: 1.75rem;
+      margin-right: 1rem;
+      img {
+        display: block;
+        height: 100%;
+      }
+    }
+  }
+
+  footer {
+    flex: 0;
+  }
+}
+
+#paragon-portal-root {
+  .pgn__modal-layer {
+    .pgn__modal-close-container {
+      right: 1rem !important;
+    }
+  }
+  .confirm-modal .pgn__modal-body {
+    overflow: hidden;
+  }
+}

src/App.test.jsx

@@ -0,0 +1,132 @@
+import { render, screen, waitFor } from '@testing-library/react';
+
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import { useInitializeLearnerHome } from 'data/hooks';
+import { App } from './App';
+import messages from './messages';
+
+jest.mock('data/hooks', () => ({
+  useInitializeLearnerHome: jest.fn(),
+}));
+
+jest.mock('data/context', () => ({
+  useMasquerade: jest.fn(() => ({ masqueradeUser: null })),
+}));
+
+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('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({})),
+}));
+
+jest.mock('@edx/frontend-platform/react', () => ({
+  ...jest.requireActual('@edx/frontend-platform/react'),
+  ErrorPage: () => 'ErrorPage',
+}));
+
+const supportEmail = 'test@support.com';
+useInitializeLearnerHome.mockReturnValue({
+  data: {
+    platformSettings: {
+      supportEmail,
+    },
+  },
+  isError: false,
+});
+
+describe('App router component', () => {
+  describe('component', () => {
+    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();
+        getConfig.mockReturnValue({});
+        render(<IntlProvider locale="en"><App /></IntlProvider>);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const dashboard = screen.getByText('Dashboard');
+        expect(dashboard).toBeInTheDocument();
+      });
+    });
+    describe('no network failure with optimizely url', () => {
+      beforeEach(() => {
+        jest.clearAllMocks();
+        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();
+        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();
+        useInitializeLearnerHome.mockReturnValue({
+          data: null,
+          isError: true,
+        });
+        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(() => {
+        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/Main.jsx

@@ -1,20 +0,0 @@
-import { Provider as ReduxProvider } from 'react-redux';
-import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-import store from './data/store';
-import Dashboard from './containers/Dashboard';
-
-import './app.scss';
-
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <ReduxProvider store={store}>
-      <PageWrap>
-        <Dashboard />
-      </PageWrap>
-    </ReduxProvider>
-  </CurrentAppProvider>
-);
-
-export default Main;

src/__mocks__/file.js

@@ -1 +0,0 @@
-module.exports = 'FileMock';

src/__mocks__/svg.js

@@ -1 +0,0 @@
-module.exports = 'SvgURL';

src/__snapshots__/App.test.jsx.snap

@@ -1,83 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`App router component component initialize failure snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Alert
-          variant="danger"
-        >
-          <ErrorPage
-            message="If you experience repeated failures, please email support at test-support-url"
-          />
-        </Alert>
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely url snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component refresh failure snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Alert
-          variant="danger"
-        >
-          <ErrorPage
-            message="If you experience repeated failures, please email support at test-support-url"
-          />
-        </Alert>
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;

src/__snapshots__/index.test.jsx.snap

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

src/app.scss

@@ -1,41 +0,0 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
-
-#learnerDashboardRoot {
-  main {
-    flex-grow: 1;
-  }
-
-  // Removing a odd 1.5 scaling on checkboxes.:
-  input[type=checkbox] {
-    transform: none;
-  }
-
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .alert.alert-info .alert-icon {
-    color: black;
-  }
-
-  #paragon-portal-root {
-    .pgn__modal-layer {
-      .pgn__modal-close-container {
-        right: 1rem !important;
-      }
-    }
-    .confirm-modal .pgn__modal-body {
-      overflow: hidden;
-    }
-  }
-}

src/app.ts

@@ -1,23 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import providers from './providers';
-import messages from './i18n';
-import slots from './slots';
-
-const app: App = {
-  appId,
-  routes,
-  providers,
-  messages,
-  slots,
-  config: {
-    LEARNING_BASE_URL: 'http://apps.local.openedx.io:2000',
-    ENABLE_PROGRAMS: false,
-    ECOMMERCE_BASE_URL: '',
-    ORDER_HISTORY_URL: '',
-    SUPPORT_URL: '',
-  }
-};
-
-export default app;

src/assets/top_stripe.svg

@@ -0,0 +1,15 @@
+<svg width="1350" height="7" viewBox="0 0 1350 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3302_26079)">
+<rect width="1350" height="6.75" transform="translate(0 -0.375)" fill="#03C7E8"/>
+<rect y="-0.375" width="585.562" height="6.75" fill="#D23228"/>
+<path d="M549.281 -0.375H933.188L929.491 6.375H549.281V-0.375Z" fill="#002121"/>
+<path d="M550.129 13.125L545.062 -10.5L555.188 -10.5L550.129 13.125Z" fill="#D23228"/>
+<path d="M931.082 13.125L925.594 -6.28125L936.563 -6.28125L931.082 13.125Z" fill="#002121"/>
+<path d="M0 -0.375H106.312L105.289 6.375H0V-0.375Z" fill="#921108"/>
+</g>
+<defs>
+<clipPath id="clip0_3302_26079">
+<rect width="1350" height="6.75" fill="white" transform="translate(0 -0.375)"/>
+</clipPath>
+</defs>
+</svg>

src/components/Banner.test.jsx

@@ -1,27 +1,27 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Alert } from '@openedx/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.snapshot).toMatchSnapshot();
-    });
-    test('renders with variants', () => {
-      const wrapper = shallow(<Banner {...props} variant="success" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+describe('Banner component', () => {
+  it('renders children content', () => {
+    render(<Banner>Test content</Banner>);
+    expect(screen.getByText('Test content')).toBeInTheDocument();
+  });
 
-      expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success');
-    });
-    test('renders with custom class', () => {
-      const wrapper = shallow(<Banner {...props} className="custom-class" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
+  it('uses default props correctly', () => {
+    render(<Banner>Test content</Banner>);
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveClass('mb-0');
+  });
+
+  it('accepts custom variant prop', () => {
+    render(<Banner variant="success">Test content</Banner>);
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveClass('alert-success');
+  });
+
+  it('accepts custom className prop', () => {
+    render(<Banner className="custom-class">Test content</Banner>);
+    const banner = screen.getByRole('alert');
+    expect(banner).toHaveClass('custom-class');
   });
 });

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

@@ -1,31 +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 custom class 1`] = `
-<Alert
-  className="custom-class"
-  icon={[MockFunction icons.Info]}
-  variant="info"
->
-  Hello, world!
-</Alert>
-`;
-
-exports[`Banner snapshot renders with variants 1`] = `
-<Alert
-  className="mb-0"
-  icon={[MockFunction icons.Info]}
-  variant="success"
->
-  Hello, world!
-</Alert>
-`;

src/config/index.js

@@ -0,0 +1,29 @@
+const configuration = {
+  // BASE_URL: process.env.BASE_URL,
+  APP_ID: process.env.APP_ID,
+  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,
+  // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+  LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN || '',
+  SUPPORT_URL: process.env.SUPPORT_URL || 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',
+  SHOW_UNENROLL_SURVEY: process.env.SHOW_UNENROLL_SURVEY === 'true',
+};
+
+const features = {};
+
+export { configuration, features };

src/constants.ts

@@ -1 +0,0 @@
-export const appId = 'org.openedx.frontend.app.learnerDashboard';

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/AppWrapper/index.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import AppWrapper from './index';
+
+describe('AppWrapper', () => {
+  it('should render children without modification', () => {
+    render(
+      <AppWrapper>
+        <div>Test Child</div>
+      </AppWrapper>,
+    );
+
+    expect(screen.getByText('Test Child')).toBeInTheDocument();
+  });
+});

src/containers/CourseCard/CourseCard.scss

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

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

@@ -1,111 +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>
-        <CourseCardImage
-          cardId="test-card-id"
-          orientation="horizontal"
-        />
-        <Card.Body>
-          <Card.Header
-            actions={
-              <CourseCardMenu
-                cardId="test-card-id"
-              />
-            }
-            title={
-              <CourseCardTitle
-                cardId="test-card-id"
-              />
-            }
-          />
-          <Card.Section
-            className="pt-0"
-          >
-            <CourseCardDetails
-              cardId="test-card-id"
-            />
-          </Card.Section>
-          <Card.Footer
-            orientation="vertical"
-          >
-            <CourseCardActions
-              cardId="test-card-id"
-            />
-          </Card.Footer>
-        </Card.Body>
-      </div>
-      <CourseCardBanners
-        cardId="test-card-id"
-      />
-    </div>
-  </Card>
-</div>
-`;
-
-exports[`CourseCard component snapshot: not collapsed 1`] = `
-<div
-  className="mb-4.5 course-card"
-  data-testid="CourseCard"
-  id="test-card-id"
->
-  <Card
-    orientation="horizontal"
-  >
-    <div
-      className="d-flex flex-column w-100"
-    >
-      <div
-        className="d-flex"
-      >
-        <CourseCardImage
-          cardId="test-card-id"
-          orientation="horizontal"
-        />
-        <Card.Body>
-          <Card.Header
-            actions={
-              <CourseCardMenu
-                cardId="test-card-id"
-              />
-            }
-            title={
-              <CourseCardTitle
-                cardId="test-card-id"
-              />
-            }
-          />
-          <Card.Section
-            className="pt-0"
-          >
-            <CourseCardDetails
-              cardId="test-card-id"
-            />
-          </Card.Section>
-          <Card.Footer
-            orientation="horizontal"
-          >
-            <CourseCardActions
-              cardId="test-card-id"
-            />
-          </Card.Footer>
-        </Card.Body>
-      </div>
-      <CourseCardBanners
-        cardId="test-card-id"
-      />
-    </div>
-  </Card>
-</div>
-`;

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

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ActionButton snapshot is collapsed 1`] = `
-<Button
-  arbitary="props"
-  size="sm"
-/>
-`;
-
-exports[`ActionButton snapshot is not collapsed 1`] = `
-<Button
-  arbitary="props"
-/>
-`;

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

@@ -1,6 +1,33 @@
 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

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

@@ -1,5 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
 import ActionButton from '.';
 
 import useIsCollapsed from './hooks';
@@ -8,18 +7,22 @@ jest.mock('./hooks', () => jest.fn());
 
 describe('ActionButton', () => {
   const props = {
-    arbitary: 'props',
+    className: 'custom-class',
+    children: 'Test',
   };
-  describe('snapshot', () => {
-    test('is collapsed', () => {
-      useIsCollapsed.mockReturnValueOnce(true);
-      const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is not collapsed', () => {
-      useIsCollapsed.mockReturnValueOnce(false);
-      const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
+
+  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,22 +1,29 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { EXECUTIVE_EDUCATION_COURSE_MODES } from 'data/constants/course';
 
+import track from 'tracking';
+import { useCourseData, useCourseTrackingEvent } from 'hooks';
+import { useInitializeLearnerHome } from 'data/hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const BeginCourseButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
-  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
+  const { data: learnerData } = useInitializeLearnerHome();
+  const courseData = useCourseData(cardId);
+  const homeUrl = courseData?.courseRun?.homeUrl;
+  const execEdTrackingParam = useMemo(() => {
+    const isExecEd2UCourse = EXECUTIVE_EDUCATION_COURSE_MODES.includes(courseData.enrollment.mode);
+    const { authOrgId } = learnerData.enterpriseDashboard || {};
+    return isExecEd2UCourse ? `?org_id=${authOrgId}` : '';
+  }, [courseData.enrollment.mode, learnerData.enterpriseDashboard]);
   const { disableBeginCourse } = useActionDisabledState(cardId);
 
-  const handleClick = reduxHooks.useTrackCourseEvent(
+  const handleClick = useCourseTrackingEvent(
     track.course.enterCourseClicked,
     cardId,
     homeUrl + execEdTrackingParam,

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

@@ -1,85 +1,90 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import track from 'tracking';
+import { useCourseData, useCourseTrackingEvent } from 'hooks';
 import useActionDisabledState from '../hooks';
 import BeginCourseButton from './BeginCourseButton';
 
+jest.mock('hooks', () => ({
+  useCourseData: jest.fn().mockReturnValue({
+    enrollment: { mode: 'executive-education' },
+    courseRun: { homeUrl: 'home-url' },
+  }),
+  useCourseTrackingEvent: jest.fn().mockReturnValue({
+    trackCourseEvent: jest.fn(),
+  }),
+}));
+
+jest.mock('data/hooks', () => ({
+  useInitializeLearnerHome: jest.fn().mockReturnValue({
+    data: {
+      enterpriseDashboard: {
+        authOrgId: 'test-org-id',
+      },
+    },
+  }),
+}));
+
 jest.mock('tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardExecEdTrackingParam: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
-  },
-}));
 jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
 
-let wrapper;
+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('behavior', () => {
+  describe('initiliaze hooks', () => {
     it('initializes course run data with cardId', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads exec education path param', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
-      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
+      renderComponent();
+      expect(useCourseData).toHaveBeenCalledWith(props.cardId);
     });
     it('loads disabled states for begin action from action hooks', () => {
-      wrapper = shallow(<BeginCourseButton {...props} />);
+      renderComponent();
       expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
     });
   });
-  describe('snapshot', () => {
+  describe('behavior', () => {
     describe('disabled', () => {
-      beforeEach(() => {
-        useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
-        wrapper = shallow(<BeginCourseButton {...props} />);
-      });
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
       it('should be disabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(true);
+        useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
+        renderComponent();
+        const button = screen.getByRole('button', { name: 'Begin Course' });
+        expect(button).toHaveClass('disabled');
+        expect(button).toHaveAttribute('aria-disabled', 'true');
       });
     });
     describe('enabled', () => {
-      beforeEach(() => {
-        wrapper = shallow(<BeginCourseButton {...props} />);
-      });
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
       it('should be enabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(false);
+        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', () => {
-        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+        renderComponent();
+        const user = userEvent.setup();
+        const button = screen.getByRole('button', { name: 'Begin Course' });
+        user.click(button);
+        expect(useCourseTrackingEvent).toHaveBeenCalledWith(
           track.course.enterCourseClicked,
           props.cardId,
-          homeUrl + execEdPath(props.cardId),
-        ));
+          `${homeUrl}?org_id=test-org-id`,
+        );
       });
     });
   });

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

@@ -1,22 +1,29 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { EXECUTIVE_EDUCATION_COURSE_MODES } from 'data/constants/course';
+import track from 'tracking';
+import { useCourseTrackingEvent, useCourseData } from 'hooks';
+import { useInitializeLearnerHome } from 'data/hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const ResumeButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
-  const { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
+  const { data: learnerData } = useInitializeLearnerHome();
+  const courseData = useCourseData(cardId);
+  const resumeUrl = courseData?.courseRun?.resumeUrl;
+  const execEdTrackingParam = useMemo(() => {
+    const isExecEd2UCourse = EXECUTIVE_EDUCATION_COURSE_MODES.includes(courseData.enrollment.mode);
+    const { authOrgId } = learnerData.enterpriseDashboard || {};
+    return isExecEd2UCourse ? `?org_id=${authOrgId}` : '';
+  }, [courseData.enrollment.mode, learnerData.enterpriseDashboard]);
   const { disableResumeCourse } = useActionDisabledState(cardId);
 
-  const handleClick = reduxHooks.useTrackCourseEvent(
+  const handleClick = useCourseTrackingEvent(
     track.course.enterCourseClicked,
     cardId,
     resumeUrl + execEdTrackingParam,

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

@@ -1,83 +1,91 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useCourseTrackingEvent, useCourseData } from 'hooks';
 
-import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
 import ResumeButton from './ResumeButton';
 
+const authOrgId = 'auth-org-id';
+jest.mock('data/hooks', () => ({
+  useInitializeLearnerHome: jest.fn().mockReturnValue({
+    data: {
+      enterpriseDashboard: {
+        authOrgId,
+      },
+    },
+  }),
+}));
+
+jest.mock('hooks', () => ({
+  useCourseData: jest.fn().mockReturnValue({
+    enrollment: { mode: 'executive-education' },
+    courseRun: { homeUrl: 'home-url' },
+  }),
+  useCourseTrackingEvent: jest.fn().mockReturnValue({
+    trackCourseEvent: jest.fn(),
+  }),
+}));
+
 jest.mock('tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardExecEdTrackingParam: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
-  },
-}));
 jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
 
-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 } }),
-);
+jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
-let wrapper;
+useCourseData.mockReturnValue({
+  enrollment: { mode: 'executive-education' },
+  courseRun: { resumeUrl: 'home-url' },
+});
 
 describe('ResumeButton', () => {
   const props = {
     cardId: 'cardId',
   };
-  describe('behavior', () => {
+  describe('initialize hooks', () => {
+    beforeEach(() => render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>));
     it('initializes course run data with cardId', () => {
-      wrapper = shallow(<ResumeButton {...props} />);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    });
-    it('loads exec education path param', () => {
-      wrapper = shallow(<ResumeButton {...props} />);
-      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
+      expect(useCourseData).toHaveBeenCalledWith(props.cardId);
     });
     it('loads disabled states for resume action from action hooks', () => {
-      wrapper = shallow(<ResumeButton {...props} />);
       expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
     });
   });
-  describe('snapshot', () => {
+  describe('behavior', () => {
     describe('disabled', () => {
       beforeEach(() => {
         useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
-        wrapper = shallow(<ResumeButton {...props} />);
-      });
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be disabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(true);
+        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
+        const button = screen.getByRole('button', { name: 'Resume' });
+        expect(button).toHaveClass('disabled');
+        expect(button).toHaveAttribute('aria-disabled', 'true');
       });
     });
     describe('enabled', () => {
-      beforeEach(() => {
-        wrapper = shallow(<ResumeButton {...props} />);
-      });
-      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
-      });
       it('should be enabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(false);
+        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', () => {
-        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+      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(useCourseTrackingEvent).toHaveBeenCalledWith(
           track.course.enterCourseClicked,
           props.cardId,
-          resumeUrl + execEdPath(props.cardId),
-        ));
+          `home-url?org_id=${authOrgId}`,
+        );
       });
     });
   });

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { useSelectSessionModal } from 'data/context';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
@@ -12,11 +11,11 @@ import messages from './messages';
 export const SelectSessionButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const { disableSelectSession } = useActionDisabledState(cardId);
-  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
+  const { updateSelectSessionModal } = useSelectSessionModal();
   return (
     <ActionButton
       disabled={disableSelectSession}
-      onClick={openSessionModal}
+      onClick={() => updateSelectSessionModal(cardId)}
     >
       {formatMessage(messages.selectSession)}
     </ActionButton>

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

@@ -1,34 +1,47 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useSelectSessionModal } from 'data/context';
 
-import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 
 import SelectSessionButton from './SelectSessionButton';
 
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useUpdateSelectSessionModalCallback: () => jest.fn().mockName('mockOpenSessionModal'),
-  },
+jest.mock('data/context', () => ({
+  useSelectSessionModal: jest.fn().mockReturnValue({
+    updateSelectSessionModal: jest.fn(),
+  }),
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableSelectSession: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
 
-let wrapper;
+jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 describe('SelectSessionButton', () => {
   const props = { cardId: 'cardId' };
   it('default render', () => {
-    wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(false);
-    expect(wrapper.instance.props.onClick.getMockName()).toEqual(
-      reduxHooks.useUpdateSelectSessionModalCallback().getMockName(),
-    );
+    render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
+    const button = screen.getByRole('button', { name: 'Select Session' });
+    expect(button).toBeInTheDocument();
   });
-  test('disabled states', () => {
-    useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
-    wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(true);
+  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('on click', () => {
+    it('should call openSessionModal', async () => {
+      const mockedUpdateSelectSessionModal = jest.fn();
+      useSelectSessionModal.mockReturnValue({
+        updateSelectSessionModal: mockedUpdateSelectSessionModal,
+      });
+      render(<IntlProvider locale="en"><SelectSessionButton {...props} /></IntlProvider>);
+      const user = userEvent.setup();
+      const button = screen.getByRole('button', { name: 'Select Session' });
+      await user.click(button);
+      expect(mockedUpdateSelectSessionModal).toHaveBeenCalledWith(props.cardId);
+    });
   });
 });

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

@@ -1,21 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import track from 'tracking';
+import { useCourseTrackingEvent, useCourseData } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
 
 export const ViewCourseButton = ({ cardId }) => {
   const { formatMessage } = useIntl();
-  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const courseData = useCourseData(cardId);
+  const homeUrl = courseData?.courseRun?.homeUrl;
   const { disableViewCourse } = useActionDisabledState(cardId);
 
-  const handleClick = reduxHooks.useTrackCourseEvent(
+  const handleClick = useCourseTrackingEvent(
     track.course.enterCourseClicked,
     cardId,
     homeUrl,

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

@@ -1,45 +1,61 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useCourseTrackingEvent } from 'hooks';
 
 import track from 'tracking';
-import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ViewCourseButton from './ViewCourseButton';
 
+jest.mock('hooks', () => ({
+  useCourseData: jest.fn().mockReturnValue({
+    courseRun: { homeUrl: 'homeUrl' },
+  }),
+  useCourseTrackingEvent: jest.fn().mockReturnValue({
+    trackCourseEvent: jest.fn(),
+  }),
+}));
+
 jest.mock('tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
-    useTrackCourseEvent: jest.fn(
-      (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
-    ),
-  },
-}));
 jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
-jest.mock('./ActionButton', () => 'ActionButton');
+
+jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 const defaultProps = { cardId: 'cardId' };
 const homeUrl = 'homeUrl';
 
 describe('ViewCourseButton', () => {
-  test('learner can view course', () => {
-    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+  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');
+  });
+  it('calls trackCourseEvent on click', async () => {
+    const mockedTrackCourseEvent = jest.fn();
+    useCourseTrackingEvent.mockReturnValue(mockedTrackCourseEvent);
+    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
+    const user = userEvent.setup();
+    const button = screen.getByRole('button', { name: 'View Course' });
+    await user.click(button);
+    expect(useCourseTrackingEvent).toHaveBeenCalledWith(
       track.course.enterCourseClicked,
       defaultProps.cardId,
       homeUrl,
-    ));
-    expect(wrapper.instance.props.disabled).toEqual(false);
+    );
+    expect(mockedTrackCourseEvent).toHaveBeenCalled();
   });
-  test('learner cannot view course', () => {
+  it('learner cannot view course', () => {
     useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
-    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(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,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BeginCourseButton snapshot disabled snapshot 1`] = `
-<ActionButton
-  as="a"
-  disabled={true}
-  href="#"
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "home-urlexec-ed-tracking-path=cardId",
-      },
-    }
-  }
->
-  Begin Course
-</ActionButton>
-`;
-
-exports[`BeginCourseButton snapshot enabled snapshot 1`] = `
-<ActionButton
-  as="a"
-  disabled={false}
-  href="#"
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "home-urlexec-ed-tracking-path=cardId",
-      },
-    }
-  }
->
-  Begin Course
-</ActionButton>
-`;

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

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ResumeButton snapshot disabled snapshot 1`] = `
-<ActionButton
-  as="a"
-  disabled={true}
-  href="#"
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "resume-urlexec-ed-tracking-path=cardId",
-      },
-    }
-  }
->
-  Resume
-</ActionButton>
-`;
-
-exports[`ResumeButton snapshot enabled snapshot 1`] = `
-<ActionButton
-  as="a"
-  disabled={false}
-  href="#"
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "resume-urlexec-ed-tracking-path=cardId",
-      },
-    }
-  }
->
-  Resume
-</ActionButton>
-`;

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

@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SelectSessionButton default render 1`] = `
-<ActionButton
-  disabled={false}
-  onClick={[MockFunction mockOpenSessionModal]}
->
-  Select Session
-</ActionButton>
-`;
-
-exports[`SelectSessionButton disabled states 1`] = `
-<ActionButton
-  disabled={true}
-  onClick={[MockFunction mockOpenSessionModal]}
->
-  Select Session
-</ActionButton>
-`;

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

@@ -1,39 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ViewCourseButton learner can view course 1`] = `
-<ActionButton
-  as="a"
-  disabled={false}
-  href="#"
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "homeUrl",
-      },
-    }
-  }
->
-  View Course
-</ActionButton>
-`;
-
-exports[`ViewCourseButton learner cannot view course 1`] = `
-<ActionButton
-  as="a"
-  disabled={true}
-  href="#"
-  onClick={
-    {
-      "trackCourseEvent": {
-        "cardId": "cardId",
-        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "homeUrl",
-      },
-    }
-  }
->
-  View Course
-</ActionButton>
-`;

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

@@ -3,20 +3,19 @@ import PropTypes from 'prop-types';
 
 import { ActionRow } from '@openedx/paragon';
 
-import { reduxHooks } from '../../../../hooks';
-import CourseCardActionSlot from '../../../../slots/CourseCardActionSlot';
+import { useCourseData, useEntitlementInfo } from 'hooks';
 
+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 } = reduxHooks.useCardEntitlementData(cardId);
-  const {
-    hasStarted,
-  } = reduxHooks.useCardEnrollmentData(cardId);
-  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
+  const cardData = useCourseData(cardId);
+  const hasStarted = cardData.enrollment.hasStarted || false;
+  const { isEntitlement, isFulfilled } = useEntitlementInfo(cardData);
+  const isArchived = cardData.courseRun.isArchived || false;
 
   return (
     <ActionRow data-test-id="CourseCardActions">

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

@@ -1,95 +1,84 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-
-import CourseCardActionSlot from 'slots/CourseCardActionSlot';
-import SelectSessionButton from './SelectSessionButton';
-import BeginCourseButton from './BeginCourseButton';
-import ResumeButton from './ResumeButton';
-import ViewCourseButton from './ViewCourseButton';
-
+import { render, screen } from '@testing-library/react';
+import { useCourseData } from 'hooks';
 import CourseCardActions from '.';
 
 jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-    useCardEntitlementData: jest.fn(),
-    useMasqueradeData: jest.fn(),
-  },
+  ...jest.requireActual('hooks'),
+  useCourseData: jest.fn(),
 }));
 
-jest.mock('slots/CourseCardActionSlot', () => 'CustomActionButton');
-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 };
 
-let el;
 describe('CourseCardActions', () => {
   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 });
+    useCourseData.mockReturnValueOnce({
+      enrollment: { hasStarted },
+      courseRun: { isArchived },
+      entitlement: isEntitlement !== null ? { isEntitlement, isFulfilled } : null,
+    });
   };
-  const render = () => {
-    el = shallow(<CourseCardActions {...props} />);
-  };
-  describe('behavior', () => {
-    it('initializes redux hooks', () => {
+  const renderComponent = () => render(<CourseCardActions {...props} />);
+  describe('hooks', () => {
+    it('initializes hooks', () => {
       mockHooks();
-      render();
-      expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
-      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+      renderComponent();
+      expect(useCourseData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('output', () => {
     describe('entitlement course', () => {
       it('renders ViewCourseButton if fulfilled', () => {
         mockHooks({ isEntitlement: true, isFulfilled: true });
-        render();
-        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
+        renderComponent();
+        const ViewCourseButton = screen.getByText('ViewCourseButton');
+        expect(ViewCourseButton).toBeInTheDocument();
       });
       it('renders SelectSessionButton if not fulfilled', () => {
         mockHooks({ isEntitlement: true });
-        render();
-        expect(el.instance.findByType(SelectSessionButton)[0].props.cardId).toEqual(cardId);
+        renderComponent();
+        const SelectSessionButton = screen.getByText('SelectSessionButton');
+        expect(SelectSessionButton).toBeInTheDocument();
       });
     });
     describe('not entitlement, verified, or exec ed', () => {
       it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
-        mockHooks({ isArchived: true });
-        render();
-        expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
-        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
+        mockHooks({ isArchived: true, isEntitlement: null });
+        renderComponent();
+        const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
+        expect(CourseCardActionSlot).toBeInTheDocument();
+        const ViewCourseButton = screen.getByText('ViewCourseButton');
+        expect(ViewCourseButton).toBeInTheDocument();
       });
       describe('unstarted courses', () => {
         it('renders CourseCardActionSlot and BeginCourseButton', () => {
-          mockHooks();
-          render();
-          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
-          expect(el.instance.findByType(BeginCourseButton)[0].props.cardId).toEqual(cardId);
+          mockHooks({ isEntitlement: null });
+          renderComponent();
+          const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
+          expect(CourseCardActionSlot).toBeInTheDocument();
+          const BeginCourseButton = screen.getByText('BeginCourseButton');
+          expect(BeginCourseButton).toBeInTheDocument();
         });
       });
       describe('active courses (started, and not archived)', () => {
         it('renders CourseCardActionSlot and ResumeButton', () => {
-          mockHooks({ hasStarted: true });
-          render();
-          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
-          expect(el.instance.findByType(ResumeButton)[0].props.cardId).toEqual(cardId);
+          mockHooks({ hasStarted: true, isEntitlement: null });
+          renderComponent();
+          const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
+          expect(CourseCardActionSlot).toBeInTheDocument();
+          const ResumeButton = screen.getByText('ResumeButton');
+          expect(ResumeButton).toBeInTheDocument();
         });
       });
     });

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

@@ -1,4 +1,4 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   beginCourse: {

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

@@ -1,28 +1,47 @@
 /* eslint-disable max-len */
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
 import { MailtoLink, Hyperlink } from '@openedx/paragon';
 import { CheckCircle } from '@openedx/paragon/icons';
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { baseAppUrl } from 'data/services/lms/urls';
 
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { useInitializeLearnerHome } from 'data/hooks';
+import { utilHooks, useCourseData } from 'hooks';
+import Banner from 'components/Banner';
 
 import messages from './messages';
 
 const { useFormatDate } = utilHooks;
 
 export const CertificateBanner = ({ cardId }) => {
-  const certificate = reduxHooks.useCardCertificateData(cardId);
+  const { data: learnerHomeData } = useInitializeLearnerHome();
+  const courseData = useCourseData(cardId);
   const {
-    isAudit,
-    isVerified,
-  } = reduxHooks.useCardEnrollmentData(cardId);
-  const { isPassing } = reduxHooks.useCardGradeData(cardId);
-  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
-  const { minPassingGrade, progressUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const { supportEmail, billingEmail } = reduxHooks.usePlatformSettingsData();
+    certificate = {},
+    isVerified = false,
+    isAudit = false,
+    isPassing = false,
+    isArchived = false,
+    minPassingGrade = 0,
+    progressUrl = '',
+  } = useMemo(() => ({
+    isVerified: courseData?.enrollment?.isVerified,
+    isAudit: courseData?.enrollment?.isAudit,
+    certificate: courseData?.certificate || {},
+    isPassing: courseData?.gradeData?.isPassing,
+    isArchived: courseData?.courseRun?.isArchived,
+    minPassingGrade: Math.floor((courseData?.courseRun?.minPassingGrade ?? 0) * 100),
+    progressUrl: baseAppUrl(courseData?.courseRun?.progressUrl || ''),
+  }), [courseData]);
+  const { supportEmail, billingEmail } = useMemo(
+    () => ({
+      supportEmail: learnerHomeData?.platformSettings?.supportEmail,
+      billingEmail: learnerHomeData?.platformSettings?.billingEmail,
+    }),
+    [learnerHomeData],
+  );
   const { formatMessage } = useIntl();
   const formatDate = useFormatDate();
 
@@ -31,7 +50,7 @@ export const CertificateBanner = ({ cardId }) => {
   if (certificate.isRestricted) {
     return (
       <Banner variant="danger">
-        {supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
+        { supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
         {isVerified && '  '}
         {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
       </Banner>
@@ -75,7 +94,7 @@ export const CertificateBanner = ({ cardId }) => {
       </Banner>
     );
   }
-  if (certificate.isEarnedButUnavailable) {
+  if (certificate.isEarned && new Date(certificate.availableDate) > new Date()) {
     return (
       <Banner>
         {formatMessage(

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

@@ -1,44 +1,49 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { reduxHooks } from 'hooks';
+import { useCourseData } from 'hooks';
+import { useInitializeLearnerHome } from 'data/hooks';
 import CertificateBanner from './CertificateBanner';
-import messages from './messages';
 
 jest.mock('hooks', () => ({
   utilHooks: {
     useFormatDate: jest.fn(() => date => date),
   },
-  reduxHooks: {
-    useCardCertificateData: jest.fn(),
-    useCardCourseRunData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-    useCardGradeData: jest.fn(),
-    usePlatformSettingsData: jest.fn(),
-  },
+  useCourseData: jest.fn(),
 }));
 
-jest.mock('components/Banner', () => 'Banner');
+jest.mock('data/hooks', () => ({
+  useInitializeLearnerHome: jest.fn(),
+}));
+
+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' };
-  reduxHooks.useCardCourseRunData.mockReturnValue({
-    minPassingGrade: 0.8,
-    progressUrl: 'progressUrl',
+  useCourseData.mockReturnValue({
+    enrollment: {},
+    certificate: {},
+    gradeData: {},
+    courseRun: {
+      minPassingGrade: 0.8,
+      progressUrl: 'progressUrl',
+    },
   });
-
-  const defaultCertificate = {
-    availableDate: '10/20/3030',
-    isRestricted: false,
-    isDownloadable: false,
-    isEarnedButUnavailable: false,
-  };
-  const defaultEnrollment = {
-    isAudit: false,
-    isVerified: false,
-  };
-  const defaultCourseRun = { isArchived: false };
-  const defaultGrade = { isPassing: false };
-  const defaultPlatformSettings = {};
   const createWrapper = ({
     certificate = {},
     enrollment = {},
@@ -46,182 +51,227 @@ describe('CertificateBanner', () => {
     courseRun = {},
     platformSettings = {},
   }) => {
-    reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
-    reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
-    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
-    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
-    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
-    return shallow(<CertificateBanner {...props} />);
+    useCourseData.mockReturnValue({
+      enrollment: { ...defaultEnrollment, ...enrollment },
+      certificate: { ...defaultCertificate, ...certificate },
+      gradeData: { ...defaultGrade, ...grade },
+      courseRun: {
+        ...defaultCourseRun,
+        ...courseRun,
+      },
+    });
+    const lernearData = { data: { platformSettings: { ...defaultPlatformSettings, ...platformSettings } } };
+    useInitializeLearnerHome.mockReturnValue(lernearData);
+    return render(<IntlProvider locale="en"><CertificateBanner {...props} /></IntlProvider>);
   };
-  /** TODO: Update tests to validate snapshots **/
-  describe('snapshot', () => {
-    test('is restricted', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with support and billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is passing and is downloadable', () => {
-      const wrapper = createWrapper({
-        grade: { isPassing: true },
-        certificate: { isDownloadable: true },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and is downloadable', () => {
-      const wrapper = createWrapper({
-        grade: { isPassing: false },
-        certificate: { isDownloadable: true },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and audit', () => {
-      const wrapper = createWrapper({
-        enrollment: {
-          isAudit: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and has finished', () => {
-      const wrapper = createWrapper({
-        courseRun: { isArchived: true },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and not audit and not finished', () => {
-      const wrapper = createWrapper({});
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is passing and is earned but unavailable', () => {
-      const wrapper = createWrapper({
-        grade: {
-          isPassing: true,
-        },
-        certificate: {
-          isEarnedButUnavailable: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is passing and not downloadable render empty', () => {
-      const wrapper = createWrapper({
-        grade: {
-          isPassing: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-  describe('behavior', () => {
-    it('is restricted', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.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,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.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: {
+        isEarned: true,
+        availableDate: '10/20/3030',
+      },
+    });
+    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();
+  });
+  it('should use default values when courseData is empty or undefined', () => {
+    useCourseData.mockReturnValue({});
+    const lernearData = { data: { platformSettings: { supportEmail } } };
+    useInitializeLearnerHome.mockReturnValue(lernearData);
+    render(<IntlProvider locale="en"><CertificateBanner cardId="test-card" /></IntlProvider>);
+
+    const mockedUseMemo = jest.spyOn(React, 'useMemo');
+    const useMemoCall = mockedUseMemo.mock.calls.find(call => call[1].some(dep => dep === undefined || dep === null));
+
+    if (useMemoCall) {
+      const result = useMemoCall[0]();
+
+      expect(result.certificate).toEqual({});
+      expect(result.isVerified).toBe(false);
+      expect(result.isAudit).toBe(false);
+      expect(result.isPassing).toBe(false);
+      expect(result.isArchived).toBe(false);
+      expect(result.minPassingGrade).toBe(0);
+      expect(result.progressUrl).toBeDefined();
+    }
+
+    mockedUseMemo.mockRestore();
   });
 });

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

@@ -1,22 +1,26 @@
 /* eslint-disable max-len */
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink } from '@openedx/paragon';
-import { useIntl } from '@openedx/frontend-base';
-
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { utilHooks, useCourseData } from 'hooks';
+import Banner from 'components/Banner';
 import messages from './messages';
 
 export const CourseBanner = ({ cardId }) => {
-  const {
-    isVerified,
-    isAuditAccessExpired,
-    coursewareAccess = {},
-  } = reduxHooks.useCardEnrollmentData(cardId);
-  const courseRun = reduxHooks.useCardCourseRunData(cardId);
   const { formatMessage } = useIntl();
+  const courseData = useCourseData(cardId);
+  const {
+    isVerified = false,
+    isAuditAccessExpired = false,
+    coursewareAccess = {},
+  } = useMemo(() => ({
+    isVerified: courseData.enrollment?.isVerified,
+    isAuditAccessExpired: courseData.enrollment?.isAuditAccessExpired,
+    coursewareAccess: courseData.enrollment?.coursewareAccess || {},
+  }), [courseData]);
+  const courseRun = courseData?.courseRun || {};
   const formatDate = utilHooks.useFormatDate();
 
   const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess;

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

@@ -1,27 +1,20 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { Hyperlink } from '@openedx/paragon';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
-import { reduxHooks } from 'hooks';
+import { useCourseData } from 'hooks';
 import { formatMessage } from 'testUtils';
 import { CourseBanner } from './CourseBanner';
 
 import messages from './messages';
 
-jest.mock('components/Banner', () => 'Banner');
 jest.mock('hooks', () => ({
+  useCourseData: jest.fn(),
   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,
@@ -38,94 +31,80 @@ const courseRunData = {
   marketingUrl: 'marketing-url',
 };
 
-const render = (overrides = {}) => {
+const renderCourseBanner = (overrides = {}) => {
   const {
     courseRun = {},
     enrollment = {},
   } = overrides;
-  reduxHooks.useCardCourseRunData.mockReturnValueOnce({
-    ...courseRunData,
-    ...courseRun,
+  useCourseData.mockReturnValue({
+    courseRun: {
+      ...courseRunData,
+      ...courseRun,
+    },
+    enrollment: {
+      ...enrollmentData,
+      ...enrollment,
+    },
   });
-  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(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
-    expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
+  it('initializes data with course number from enrollment, course and course run data', () => {
+    renderCourseBanner();
+    expect(useCourseData).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();
+  });
+  it('should use default values when enrollment data is undefined', () => {
+    renderCourseBanner({
+      enrollment: undefined,
+      courseRun: {},
+    });
+
+    expect(useCourseData).toHaveBeenCalledWith('test-card-id');
   });
   describe('audit access expired', () => {
-    beforeEach(() => {
-      render({ enrollment: { isAuditAccessExpired: true } });
-    });
-    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: auditAccessExpired', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
+    it('should display correct message and link', () => {
+      renderCourseBanner({ enrollment: { isAuditAccessExpired: true } });
+      const auditAccessText = screen.getByText(formatMessage(messages.auditAccessExpired));
+      expect(auditAccessText).toBeInTheDocument();
+      const auditAccessLink = screen.getByText(formatMessage(messages.findAnotherCourse));
+      expect(auditAccessLink).toBeInTheDocument();
     });
   });
   describe('unmet prerequisites', () => {
-    beforeEach(() => {
-      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
-    });
-    test('snapshot: unmetPrerequisites', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: prerequisitesNotMet', () => {
-      expect(el.instance.children[0].children[0].el).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.snapshot).toMatchSnapshot());
-      test('messages', () => expect(el.instance.children).toEqual([]));
     });
     describe('has start date', () => {
-      beforeEach(() => {
-        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
-      });
-      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-
-      test('messages: courseHasNotStarted', () => {
-        expect(el.instance.children[0].children[0].el).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.snapshot).toMatchSnapshot();
-    });
-  });
-  test('snapshot: stacking banners', () => {
-    render({
-      enrollment: {
-        coursewareAccess: {
-          isStaff: true,
-          isTooEarly: true,
-          hasUnmetPrerequisites: true,
-        },
-      },
-    });
-    expect(el.snapshot).toMatchSnapshot();
   });
 });

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

@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreditBanner component render with error state snapshot 1`] = `
-<Banner
-  variant="danger"
->
-  <p
-    className="credit-error-msg"
-    data-testid="credit-error-msg"
-  >
-    <format-message-function
-      message={
-        {
-          "defaultMessage": "An error occurred with this transaction.  For help, contact {supportEmailLink}.",
-          "description": "",
-          "id": "learner-dash.courseCard.banners.credit.error",
-        }
-      }
-      values={
-        {
-          "supportEmailLink": <MailtoLink
-            to="test-support-email"
-          >
-            test-support-email
-          </MailtoLink>,
-        }
-      }
-    />
-  </p>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;
-
-exports[`CreditBanner component render with error state with no email snapshot 1`] = `
-<Banner
-  variant="danger"
->
-  <p
-    className="credit-error-msg"
-    data-testid="credit-error-msg"
-  >
-    An error occurred with this transaction.
-  </p>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;
-
-exports[`CreditBanner component render with no error state snapshot 1`] = `
-<Banner>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;

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

@@ -1,5 +1,8 @@
-import { StrictDict } from '../../../../../utils';
-import { reduxHooks } from '../../../../../hooks';
+import { useMemo } from 'react';
+import { useInitializeLearnerHome } from 'data/hooks';
+import { StrictDict } from 'utils';
+
+import { useCourseData } from 'hooks';
 
 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -14,11 +17,29 @@ export const statusComponents = StrictDict({
 });
 
 export const useCreditBannerData = (cardId) => {
-  const credit = reduxHooks.useCardCreditData(cardId);
-  const { supportEmail } = reduxHooks.usePlatformSettingsData();
-  if (!credit.isEligible) {
-    return null;
-  }
+  const courseData = useCourseData(cardId);
+  const { data: learnerHomeData } = useInitializeLearnerHome();
+  const supportEmail = useMemo(
+    () => (learnerHomeData?.platformSettings?.supportEmail),
+    [learnerHomeData],
+  );
+
+  const credit = useMemo(() => {
+    const creditData = courseData?.credit;
+    if (!creditData || Object.keys(creditData).length === 0) {
+      return { isEligible: false };
+    }
+    return {
+      isEligible: true,
+      providerStatusUrl: creditData.providerStatusUrl,
+      providerName: creditData.providerName,
+      providerId: creditData.providerId,
+      error: creditData.error,
+      purchased: creditData.purchased,
+      requestStatus: creditData.requestStatus,
+    };
+  }, [courseData]);
+  if (!credit.isEligible || !courseData?.credit?.isEligible) { return null; }
 
   const { error, purchased, requestStatus } = credit;
   let ContentComponent = EligibleContent;

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

@@ -1,5 +1,6 @@
 import { keyStore } from 'utils';
-import { reduxHooks } from 'hooks';
+import { useCourseData } from 'hooks';
+import { useInitializeLearnerHome } from 'data/hooks';
 
 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -9,12 +10,19 @@ import RejectedContent from './views/RejectedContent';
 
 import * as hooks from './hooks';
 
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-    usePlatformSettingsData: jest.fn(),
-  },
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useMemo: (fn) => fn(),
 }));
+
+jest.mock('hooks', () => ({
+  useCourseData: jest.fn(),
+}));
+
+jest.mock('data/hooks', () => ({
+  useInitializeLearnerHome: jest.fn(),
+}));
+
 jest.mock('./views/ApprovedContent', () => 'ApprovedContent');
 jest.mock('./views/EligibleContent', () => 'EligibleContent');
 jest.mock('./views/MustRequestContent', () => 'MustRequestContent');
@@ -34,18 +42,18 @@ const defaultProps = {
 };
 
 const loadHook = (creditData = {}) => {
-  reduxHooks.useCardCreditData.mockReturnValue({ ...defaultProps, ...creditData });
+  useCourseData.mockReturnValue({ credit: { ...defaultProps, ...creditData } });
   out = hooks.useCreditBannerData(cardId);
 };
 
 describe('useCreditBannerData hook', () => {
   beforeEach(() => {
-    reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+    useInitializeLearnerHome.mockReturnValue({ data: { platformSettings: { 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();
+    expect(useCourseData).toHaveBeenCalledWith(cardId);
+    expect(useInitializeLearnerHome).toHaveBeenCalledWith();
   });
   describe('non-credit-eligible learner', () => {
     it('returns null if the learner is not credit eligible', () => {

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import Banner from '../../../../../components/Banner';
+import Banner from 'components/Banner';
 
 import { MailtoLink } from '@openedx/paragon';
 import hooks from './hooks';

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

@@ -1,95 +1,65 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
-import { MailtoLink } from '@openedx/paragon';
-
+import { screen, render } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import hooks from './hooks';
-import messages from './messages';
-import CreditBanner from '.';
-
-jest.mock('components/Banner', () => 'Banner');
+import { CreditBanner } from '.';
 
 jest.mock('./hooks', () => ({
   useCreditBannerData: jest.fn(),
 }));
 
-let el;
-const cardId = 'test-card-id';
+describe('CreditBanner', () => {
+  const mockCardId = 'test-card-id';
+  const mockContentComponent = () => <div data-testid="mock-content">Test Content</div>;
+  const mockSupportEmail = 'support@test.com';
 
-const ContentComponent = () => 'ContentComponent';
-const supportEmail = 'test-support-email';
+  const renderCreditBanner = () => render(
+    <IntlProvider locale="en">
+      <CreditBanner cardId={mockCardId} />
+    </IntlProvider>,
+  );
 
-describe('CreditBanner component', () => {
-  describe('behavior', () => {
-    beforeEach(() => {
-      hooks.useCreditBannerData.mockReturnValue(null);
-      el = shallow(<CreditBanner cardId={cardId} />);
-    });
-    it('initializes hooks with cardId', () => {
-      expect(hooks.useCreditBannerData).toHaveBeenCalledWith(cardId);
-    });
-    it('returns null if hookData is null', () => {
-      expect(el.isEmptyRender()).toEqual(true);
-    });
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-  describe('render', () => {
-    describe('with error state', () => {
-      beforeEach(() => {
-        hooks.useCreditBannerData.mockReturnValue({
-          error: true,
-          ContentComponent,
-          supportEmail,
-        });
-        el = shallow(<CreditBanner cardId={cardId} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('passes danger variant to Banner parent', () => {
-        expect(el.instance.findByType('Banner')[0].props.variant).toEqual('danger');
-      });
-      it('includes credit-error-msg with support email link', () => {
-        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(shallow(formatMessage(messages.error, {
-          supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
-        })));
-      });
-      it('loads ContentComponent with cardId', () => {
-        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
-      });
-    });
 
-    describe('with error state with no email', () => {
-      beforeEach(() => {
-        hooks.useCreditBannerData.mockReturnValue({
-          error: true,
-          ContentComponent,
-        });
-        el = shallow(<CreditBanner cardId={cardId} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('includes credit-error-msg without support email link', () => {
-        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(formatMessage(messages.errorNoEmail));
-      });
-    });
+  it('should return null if hook returns null', () => {
+    hooks.useCreditBannerData.mockReturnValue(null);
+    renderCreditBanner();
+    const banner = screen.queryByRole('alert');
+    expect(banner).toBeNull();
+  });
 
-    describe('with no error state', () => {
-      beforeEach(() => {
-        hooks.useCreditBannerData.mockReturnValue({
-          error: false,
-          ContentComponent,
-          supportEmail,
-        });
-        el = shallow(<CreditBanner cardId={cardId} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('loads ContentComponent with cardId', () => {
-        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
-      });
+  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

@@ -1,14 +1,14 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
   error: {
     id: 'learner-dash.courseCard.banners.credit.error',
-    description: 'Error message for credit transaction with support email link',
+    description: '',
     defaultMessage: 'An error occurred with this transaction.  For help, contact {supportEmailLink}.',
   },
   errorNoEmail: {
     id: 'learner-dash.courseCard.banners.credit.errorNoEmail',
-    description: 'Error message for credit transaction without support email',
+    description: '',
     defaultMessage: 'An error occurred with this transaction.',
   },
 });

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

@@ -1,18 +1,24 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
-import { reduxHooks } from '../../../../../../hooks';
+import { useCourseData, useIsMasquerading } 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 } = useContext(MasqueradeUserContext);
+  const courseData = useCourseData(cardId);
+  const { providerStatusUrl: href, providerName } = useMemo(() => {
+    const creditData = courseData?.credit;
+    return {
+      providerStatusUrl: creditData.providerStatusUrl,
+      providerName: creditData.providerName,
+    };
+  }, [courseData]);
+  const isMasquerading = useIsMasquerading();
   const { formatMessage } = useIntl();
   return (
     <CreditContent

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

@@ -1,63 +1,72 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 import { formatMessage } from 'testUtils';
-import { reduxHooks } from 'hooks';
+import { useCourseData, useIsMasquerading } from 'hooks';
 import messages from './messages';
-import ProviderLink from './components/ProviderLink';
 import ApprovedContent from './ApprovedContent';
 
 jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-    useMasqueradeData: jest.fn(),
-  },
+  useCourseData: jest.fn(),
+  useIsMasquerading: jest.fn(),
 }));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
 
-let el;
 const cardId = 'test-card-id';
 const credit = {
   providerStatusUrl: 'test-credit-provider-status-url',
   providerName: 'test-credit-provider-name',
 };
-reduxHooks.useCardCreditData.mockReturnValue(credit);
-reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
+useCourseData.mockReturnValue({ credit });
+useIsMasquerading.mockReturnValue(false);
 
 describe('ApprovedContent component', () => {
-  beforeEach(() => {
-    el = shallow(<ApprovedContent cardId={cardId} />);
-  });
-  describe('behavior', () => {
+  describe('hooks', () => {
     it('initializes credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+      render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+      expect(useCourseData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {
     describe('rendered CreditContent component', () => {
-      let component;
-      beforeAll(() => {
-        component = el.instance.findByType('CreditContent');
+      beforeEach(() => {
+        jest.clearAllMocks();
+        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
       });
-      test('action.href from credit.providerStatusUrl', () => {
-        expect(component[0].props.action.href).toEqual(credit.providerStatusUrl);
+      it('action.message is formatted viewCredit message', () => {
+        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
+        expect(actionButton).toBeInTheDocument();
+        expect(actionButton).toHaveTextContent(formatMessage(messages.viewCredit));
       });
-      test('action.message is formatted viewCredit message', () => {
-        expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit));
+      it('action.href from credit.providerStatusUrl', () => {
+        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
+        expect(actionButton).toHaveAttribute('href', credit.providerStatusUrl);
       });
-      test('action.disabled is false', () => {
-        expect(component[0].props.action.disabled).toEqual(false);
+      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();
       });
-      test('message is formatted approved message', () => {
-        expect(component[0].props.message).toEqual(formatMessage(
-          messages.approved,
-          {
-            congratulations: (<b>{formatMessage(messages.congratulations)}</b>),
-            linkToProviderSite: <ProviderLink cardId={cardId} />,
-            providerName: credit.providerName,
-          },
-        ));
+      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(() => {
+        useIsMasquerading.mockReturnValue(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

@@ -1,18 +1,19 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { reduxHooks } from '../../../../../../hooks';
-import track from '../../../../../../tracking';
+import { useCourseData } 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 courseData = useCourseData(cardId);
+  const providerName = courseData?.credit?.providerName;
+  const courseId = courseData?.courseRun?.courseId;
 
   const onClick = track.credit.purchase(courseId);
   const getCredit = formatMessage(messages.getCredit);

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

@@ -1,81 +1,65 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+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 { formatMessage } from 'testUtils';
+import { useCourseData } 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('./components/CreditContent', () => 'CreditContent');
-jest.mock('tracking', () => ({
-  credit: {
-    purchase: (...args) => ({ trackCredit: args }),
-  },
+  useCourseData: jest.fn(),
 }));
 
-let el;
-let component;
+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 });
+useCourseData.mockReturnValue({ credit, courseRun: { courseId } });
+
+const renderEligibleContent = () => render(<IntlProvider locale="en" messages={{}}><EligibleContent cardId={cardId} /></IntlProvider>);
 
-const render = () => {
-  el = shallow(<EligibleContent cardId={cardId} />);
-};
-const loadComponent = () => {
-  component = el.instance.findByType('CreditContent');
-};
 describe('EligibleContent component', () => {
-  beforeEach(() => {
-    render();
+  describe('hooks', () => {
+    it('initializes credit data with cardId', () => {
+      renderEligibleContent();
+      expect(useCourseData).toHaveBeenCalledWith(cardId);
+    });
   });
   describe('behavior', () => {
-    it('initializes credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-    it('initializes course run data with cardId', () => {
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
     describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        loadComponent();
+      it('action message is formatted getCredit message', () => {
+        renderEligibleContent();
+        const button = screen.getByRole('button', { name: messages.getCredit.defaultMessage });
+        expect(button).toBeInTheDocument();
       });
-      test('action.onClick sends credit purchase track event', () => {
-        expect(component[0].props.action.onClick).toEqual(
-          track.credit.purchase(courseId),
-        );
+      it('onClick sends credit purchase track event', async () => {
+        const user = userEvent.setup();
+        renderEligibleContent();
+        const button = screen.getByRole('button', { name: messages.getCredit.defaultMessage });
+        await user.click(button);
+        expect(track.credit.purchase).toHaveBeenCalledWith(courseId);
       });
-      test('action.message is formatted getCredit message', () => {
-        expect(component[0].props.action.message).toEqual(formatMessage(messages.getCredit));
+      it('message is formatted eligible message if provider', () => {
+        renderEligibleContent();
+        const eligibleMessage = screen.getByTestId('credit-msg');
+        expect(eligibleMessage).toBeInTheDocument();
+        expect(eligibleMessage).toHaveTextContent(credit.providerName);
       });
-      test('message is formatted eligible message if no provider', () => {
-        reduxHooks.useCardCreditData.mockReturnValueOnce({});
-        render();
-        loadComponent();
-        expect(component[0].props.message).toEqual(formatMessage(
-          messages.eligible,
-          { getCredit: (<b>{formatMessage(messages.getCredit)}</b>) },
-        ));
-      });
-      test('message is formatted eligible message if provider', () => {
-        expect(component[0].props.message).toEqual(
-          formatMessage(messages.eligibleFromProvider, { providerName: credit.providerName }),
-        );
+      it('message is formatted eligible message if no provider', () => {
+        useCourseData.mockReturnValue({ credit: {}, courseRun: { courseId } });
+        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

@@ -1,9 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
+import { useIsMasquerading } from 'hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';
 import hooks from './hooks';
@@ -13,7 +13,7 @@ import messages from './messages';
 export const MustRequestContent = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const { requestData, createCreditRequest } = hooks.useCreditRequestData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const isMasquerading = useIsMasquerading();
   return (
     <CreditContent
       action={{

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

@@ -1,73 +1,102 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
-
-import { reduxHooks } from 'hooks';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
+import { useCourseData, useIsMasquerading } from 'hooks';
 import messages from './messages';
 import hooks from './hooks';
-import ProviderLink from './components/ProviderLink';
 import MustRequestContent from './MustRequestContent';
 
 jest.mock('./hooks', () => ({
   useCreditRequestData: jest.fn(),
 }));
-jest.mock('hooks', () => ({
-  reduxHooks: { useMasqueradeData: jest.fn() },
-}));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
 
-let el;
-let component;
+jest.mock('hooks', () => ({
+  useCourseData: jest.fn(),
+  useIsMasquerading: jest.fn(),
+}));
 
 const cardId = 'test-card-id';
-const requestData = { test: 'requestData' };
-const createCreditRequest = jest.fn().mockName('createCreditRequest');
-hooks.useCreditRequestData.mockReturnValue({
-  requestData,
-  createCreditRequest,
-});
-reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
-
-const render = () => {
-  el = shallow(<MustRequestContent cardId={cardId} />);
+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(() => {
-    render();
+    jest.clearAllMocks();
+    hooks.useCreditRequestData.mockReturnValue({
+      requestData,
+      createCreditRequest,
+    });
+    useIsMasquerading.mockReturnValue(false);
+    useCourseData.mockReturnValue({
+      credit: {
+        providerName,
+        providerStatusUrl,
+      },
+    });
   });
-  describe('behavior', () => {
+
+  describe('hooks', () => {
     it('initializes credit request data with cardId', () => {
+      renderMustRequestContent();
       expect(hooks.useCreditRequestData).toHaveBeenCalledWith(cardId);
     });
   });
-  describe('render', () => {
-    describe('rendered CreditContent component', () => {
+
+  describe('behavior', () => {
+    describe('rendered content', () => {
       beforeEach(() => {
-        component = el.instance.findByType('CreditContent');
+        renderMustRequestContent();
       });
-      test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => {
-        expect(component[0].props.action.onClick).toEqual(createCreditRequest);
+
+      it('calls createCreditRequest when request credit button is clicked', async () => {
+        const user = userEvent.setup();
+        const button = screen.getByRole('button', { name: /request credit/i });
+        await user.click(button);
+        expect(createCreditRequest).toHaveBeenCalled();
       });
-      test('action.message is formatted requestCredit message', () => {
-        expect(component[0].props.action.message).toEqual(
-          formatMessage(messages.requestCredit),
-        );
+
+      it('shows request credit button that is enabled', () => {
+        const button = screen.getByRole('button', { name: /request credit/i });
+        expect(button).toBeEnabled();
       });
-      test('action.disabled is false', () => {
-        expect(component[0].props.action.disabled).toEqual(false);
+
+      it('displays must request message with provider link', () => {
+        expect(screen.getByTestId('credit-msg')).toHaveTextContent(/request credit/i);
       });
-      test('message is formatted mustRequest message', () => {
-        expect(component[0].props.message).toEqual(
-          formatMessage(messages.mustRequest, {
-            linkToProviderSite: <ProviderLink cardId={cardId} />,
-            requestCredit: <b>{formatMessage(messages.requestCredit)}</b>,
-          }),
-        );
+
+      it('renders credit request form with correct data', () => {
+        const { container } = renderMustRequestContent();
+        const form = container.querySelector('form');
+        expect(form).toBeInTheDocument();
+        expect(form).toHaveAttribute('action', requestData.url);
       });
-      test('requestData drawn from useCreditRequestData hook', () => {
-        expect(component[0].props.requestData).toEqual(requestData);
+    });
+
+    describe('when masquerading', () => {
+      beforeEach(() => {
+        useIsMasquerading.mockReturnValue(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

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
-import { reduxHooks } from '../../../../../../hooks';
+import { useCourseData, useIsMasquerading } from 'hooks';
 import CreditContent from './components/CreditContent';
 import messages from './messages';
 
 export const PendingContent = ({ cardId }) => {
-  const { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
-  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const courseData = useCourseData(cardId);
+  const { providerStatusUrl: href, providerName } = courseData?.credit || {};
+  const isMasquerading = useIsMasquerading();
   const { formatMessage } = useIntl();
   return (
     <CreditContent

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

@@ -1,62 +1,68 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { formatMessage } from 'testUtils';
-import { reduxHooks } from 'hooks';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useCourseData, useIsMasquerading } from 'hooks';
 
 import messages from './messages';
 import PendingContent from './PendingContent';
 
 jest.mock('hooks', () => ({
-  reduxHooks: { useCardCreditData: jest.fn(), useMasqueradeData: jest.fn() },
+  useCourseData: jest.fn(),
+  useIsMasquerading: jest.fn(),
 }));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
-
-let el;
-let component;
 
 const cardId = 'test-card-id';
 const providerName = 'test-credit-provider-name';
 const providerStatusUrl = 'test-credit-provider-status-url';
-reduxHooks.useCardCreditData.mockReturnValue({
-  providerName,
-  providerStatusUrl,
+useIsMasquerading.mockReturnValue(false);
+useCourseData.mockReturnValue({
+  credit: {
+    providerName,
+    providerStatusUrl,
+  },
 });
-reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
-const render = () => {
-  el = shallow(<PendingContent cardId={cardId} />);
-};
+const renderPendingContent = () => render(
+  <IntlProvider messages={{}} locale="en">
+    <PendingContent cardId={cardId} />
+  </IntlProvider>,
+);
 describe('PendingContent component', () => {
-  beforeEach(() => {
-    render();
+  describe('hooks', () => {
+    it('initializes card credit data with cardId', () => {
+      renderPendingContent();
+      expect(useCourseData).toHaveBeenCalledWith(cardId);
+    });
   });
   describe('behavior', () => {
-    it('initializes card credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('render', () => {
     describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        component = el.instance.findByType('CreditContent');
+      it('action message is formatted requestCredit message', () => {
+        renderPendingContent();
+        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+        expect(button).toBeInTheDocument();
       });
-      test('action.href will go to provider status site', () => {
-        expect(component[0].props.action.href).toEqual(providerStatusUrl);
+      it('action href will go to provider status site', () => {
+        renderPendingContent();
+        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+        expect(button).toHaveAttribute('href', providerStatusUrl);
       });
-      test('action.message is formatted requestCredit message', () => {
-        expect(component[0].props.action.message).toEqual(
-          formatMessage(messages.viewDetails),
-        );
+      it('action.disabled is false', () => {
+        renderPendingContent();
+        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+        expect(button).not.toHaveClass('disabled');
       });
-      test('action.disabled is false', () => {
-        expect(component[0].props.action.disabled).toEqual(false);
+      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`);
       });
-      test('message is formatted pending message', () => {
-        expect(component[0].props.message).toEqual(
-          formatMessage(messages.received, { providerName }),
-        );
+      describe('when masqueradeData is true', () => {
+        it('disables the view details button', () => {
+          useIsMasquerading.mockReturnValue(true);
+          renderPendingContent();
+          const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+          expect(button).toHaveClass('disabled');
+        });
       });
     });
   });

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

@@ -1,20 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { reduxHooks } from '../../../../../../hooks';
+import { useCourseData } 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 courseData = useCourseData(cardId);
+  const credit = courseData?.credit;
   const { formatMessage } = useIntl();
   return (
     <CreditContent
       message={formatMessage(messages.rejected, {
-        providerName: credit.providerName,
+        providerName: credit?.providerName,
         linkToProviderSite: (<ProviderLink cardId={cardId} />),
       })}
     />

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

@@ -1,53 +1,43 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+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 ProviderLink from './components/ProviderLink';
+import { useCourseData } from 'hooks';
 import RejectedContent from './RejectedContent';
 
 jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
+  useCourseData: jest.fn(),
 }));
-jest.mock('./components/CreditContent', () => 'CreditContent');
-jest.mock('./components/ProviderLink', () => 'ProviderLink');
 
 const cardId = 'test-card-id';
 const credit = {
   providerStatusUrl: 'test-credit-provider-status-url',
   providerName: 'test-credit-provider-name',
 };
-reduxHooks.useCardCreditData.mockReturnValue(credit);
+useCourseData.mockReturnValue({
+  credit,
+});
 
-let el;
-let component;
-const render = () => { el = shallow(<RejectedContent cardId={cardId} />); };
-const loadComponent = () => { component = el.instance.findByType('CreditContent'); };
+const renderRejectedContent = () => render(<IntlProvider><RejectedContent cardId={cardId} /></IntlProvider>);
 
 describe('RejectedContent component', () => {
-  beforeEach(render);
-  describe('behavior', () => {
+  describe('hooks', () => {
     it('initializes credit data with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+      renderRejectedContent();
+      expect(useCourseData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {
     describe('rendered CreditContent component', () => {
-      beforeAll(loadComponent);
-      test('no action is passed', () => {
-        expect(component[0].props.action).toEqual(undefined);
+      it('no action is passed', () => {
+        renderRejectedContent();
+        const action = screen.queryByTestId('action-row-btn');
+        expect(action).not.toBeInTheDocument();
       });
-      test('message is formatted rejected message', () => {
-        expect(component[0].props.message).toEqual(formatMessage(
-          messages.rejected,
-          {
-            linkToProviderSite: <ProviderLink cardId={cardId} />,
-            providerName: credit.providerName,
-          },
-        ));
+      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.test.jsx

@@ -1,9 +1,7 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import CreditContent from './CreditContent';
 
-let el;
 const action = {
   href: 'test-action-href',
   onClick: jest.fn().mockName('test-action-onClick'),
@@ -15,45 +13,57 @@ 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', () => {
-      beforeEach(() => {
-        el = shallow(<CreditContent {...props} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('loads href, onClick, and message into action row button', () => {
-        const buttonEl = el.instance.findByTestId('action-row-btn')[0];
-        expect(buttonEl.props.href).toEqual(action.href);
-        expect(buttonEl.props.onClick).toEqual(action.onClick);
-        expect(buttonEl.props.disabled).toEqual(action.disabled);
-        expect(buttonEl.children[0].el).toEqual(action.message);
+      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', () => {
-        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
+        renderCreditContent(props);
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg).toBeInTheDocument();
+        expect(creditMsg.innerHTML).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
+        const { container } = renderCreditContent(props);
+        const creditForm = container.querySelector('form');
+        expect(creditForm).toBeInTheDocument();
+        expect(creditForm).toHaveAttribute('action', requestData.url);
       });
-      test('disables action button when action.disabled is true', () => {
-        el = shallow(<CreditContent {...props} action={{ ...action, disabled: true }} />);
-        expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true);
+      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', () => {
-      test('snapshot', () => {
-        el = shallow(<CreditContent {...{ message, requestData }} />);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
       it('loads message into credit-msg div', () => {
-        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
+        renderCreditContent({ message, requestData });
+        const creditMsg = screen.getByTestId('credit-msg');
+        expect(creditMsg).toBeInTheDocument();
+        expect(creditMsg.innerHTML).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(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/__snapshots__/index.test.jsx.snap

@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreditRequestForm component render output valid requestData snapshot 1`] = `
-<Form
-  accept-method="UTF-8"
-  action="test-request-data-url"
-  className="hidden"
-  method="POST"
->
-  <FormControl
-    as="textarea"
-    key="key1"
-    name="key1"
-    value="val1"
-  />
-  <FormControl
-    as="textarea"
-    key="key2"
-    name="key2"
-    value="val2"
-  />
-  <FormControl
-    as="textarea"
-    key="key3"
-    name="key3"
-    value="val3"
-  />
-  <Button
-    type="submit"
-  />
-</Form>
-`;

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

@@ -4,6 +4,12 @@ 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() },

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render } from '@testing-library/react';
 
 import { keyStore } from 'utils';
 
@@ -11,7 +10,8 @@ jest.mock('./hooks', () => ({
   default: jest.fn(),
 }));
 
-const ref = 'test-ref';
+const ref = { current: { click: jest.fn() }, useRef: jest.fn() };
+
 const requestData = {
   url: 'test-request-data-url',
   parameters: {
@@ -25,40 +25,41 @@ const paramKeys = keyStore(requestData.parameters);
 
 useCreditRequestFormData.mockReturnValue({ ref });
 
-let el;
-const shallowRender = (data) => { el = shallow(<CreditRequestForm requestData={data} />); };
+const renderForm = (data) => render(<CreditRequestForm requestData={data} />);
 describe('CreditRequestForm component', () => {
-  describe('behavior', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('hooks', () => {
     it('initializes ref from hook with requestData', () => {
-      shallowRender(requestData);
+      renderForm(requestData);
       expect(useCreditRequestFormData).toHaveBeenCalledWith(requestData);
     });
   });
   describe('render output', () => {
     describe('null requestData', () => {
       it('returns null', () => {
-        shallowRender(null);
-        expect(el.isEmptyRender()).toEqual(true);
+        const { container } = renderForm(null);
+        expect(container.firstChild).toBeNull();
       });
     });
     describe('valid requestData', () => {
-      beforeEach(() => {
-        shallowRender(requestData);
-      });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
       it('loads Form with requestData url', () => {
-        expect(el.instance.findByType('Form')[0].props.action).toEqual(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 controls = el.instance.findByType('FormControl');
-        expect(controls[0].props.name).toEqual(paramKeys.key1);
-        expect(controls[0].props.value).toEqual(requestData.parameters.key1);
-        expect(controls[1].props.name).toEqual(paramKeys.key2);
-        expect(controls[1].props.value).toEqual(requestData.parameters.key2);
-        expect(controls[2].props.name).toEqual(paramKeys.key3);
-        expect(controls[2].props.value).toEqual(requestData.parameters.key3);
+        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

@@ -4,9 +4,6 @@ import { render } from '@testing-library/react';
 import useCreditRequestFormData from './hooks';
 import CreditRequestForm from '.';
 
-jest.unmock('@openedx/paragon');
-jest.unmock('react');
-
 jest.mock('./hooks', () => ({
   __esModule: true,
   default: jest.fn(),

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

@@ -2,11 +2,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { reduxHooks } from '../../../../../../../hooks';
+import { useCourseData } from 'hooks';
 import { Hyperlink } from '@openedx/paragon';
 
 export const ProviderLink = ({ cardId }) => {
-  const credit = reduxHooks.useCardCreditData(cardId);
+  const courseData = useCourseData(cardId);
+  const credit = courseData?.credit || {};
   return (
     <Hyperlink
       href={credit.providerStatusUrl}

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

@@ -1,14 +1,11 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { useCourseData } from 'hooks';
 
 import ProviderLink from './ProviderLink';
 
 jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
+  useCourseData: jest.fn(),
 }));
 
 const cardId = 'test-card-id';
@@ -16,27 +13,30 @@ const credit = {
   providerStatusUrl: 'test-credit-provider-status-url',
   providerName: 'test-credit-provider-name',
 };
-let el;
+
+const renderProviderLink = () => render(
+  <IntlProvider locale="en"><ProviderLink cardId={cardId} /></IntlProvider>,
+);
 
 describe('ProviderLink component', () => {
   beforeEach(() => {
-    reduxHooks.useCardCreditData.mockReturnValue(credit);
-    el = shallow(<ProviderLink cardId={cardId} />);
+    jest.clearAllMocks();
+    useCourseData.mockReturnValue({ credit });
+    renderProviderLink();
   });
-  describe('behavior', () => {
+  describe('hooks', () => {
     it('initializes credit hook with cardId', () => {
-      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+      expect(useCourseData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {
-    test('snapshot', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
     it('passes credit.providerStatusUrl to the hyperlink href', () => {
-      expect(el.instance.findByType('Hyperlink')[0].props.href).toEqual(credit.providerStatusUrl);
+      const providerLink = screen.getByRole('link', { href: credit.providerStatusUrl });
+      expect(providerLink).toBeInTheDocument();
     });
     it('passes providerName for the link message', () => {
-      expect(el.instance.findByType('Hyperlink')[0].children[0].el).toEqual(credit.providerName);
+      const providerLink = screen.getByRole('link', { href: credit.providerStatusUrl });
+      expect(providerLink).toHaveTextContent(credit.providerName);
     });
   });
 });

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

@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreditContent component render with action snapshot 1`] = `
-<Fragment>
-  <div
-    className="message-copy credit-msg"
-    data-testid="credit-msg"
-  >
-    test-message
-  </div>
-  <ActionRow
-    className="mt-4"
-  >
-    <Button
-      as="a"
-      className="border-gray-400"
-      data-testid="action-row-btn"
-      disabled={false}
-      href="test-action-href"
-      onClick={[MockFunction test-action-onClick]}
-      rel="noopener"
-      target="_blank"
-      variant="outline-primary"
-    >
-      test-action-message
-    </Button>
-  </ActionRow>
-  <CreditRequestForm
-    requestData={
-      {
-        "parameters": {
-          "key1": "val1",
-        },
-        "url": "test-request-data-url",
-      }
-    }
-  />
-</Fragment>
-`;
-
-exports[`CreditContent component render without action snapshot 1`] = `
-<Fragment>
-  <div
-    className="message-copy credit-msg"
-    data-testid="credit-msg"
-  >
-    test-message
-  </div>
-  <CreditRequestForm
-    requestData={
-      {
-        "parameters": {
-          "key1": "val1",
-        },
-        "url": "test-request-data-url",
-      }
-    }
-  />
-</Fragment>
-`;

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProviderLink component render snapshot 1`] = `
-<Hyperlink
-  href="test-credit-provider-status-url"
-  rel="noopener"
-  target="_blank"
->
-  test-credit-provider-name
-</Hyperlink>
-`;

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

@@ -1,7 +1,8 @@
 import React from 'react';
-
-import { StrictDict } from '../../../../../../utils';
-import { apiHooks } from '../../../../../../hooks';
+import { AppContext } from '@edx/frontend-platform/react';
+import { StrictDict } from 'utils';
+import { useCourseData } from 'hooks';
+import { useCreateCreditRequest } from 'data/hooks';
 
 import * as module from './hooks';
 
@@ -11,13 +12,19 @@ export const state = StrictDict({
 
 export const useCreditRequestData = (cardId) => {
   const [requestData, setRequestData] = module.state.creditRequestData(null);
-  const createCreditApiRequest = apiHooks.useCreateCreditRequest(cardId);
+  const courseData = useCourseData(cardId);
+  const providerId = courseData?.credit?.providerId;
+  const { authenticatedUser: { username } } = React.useContext(AppContext);
+  const courseId = courseData?.courseRun?.courseId;
+  const { mutate: createCreditMutation } = useCreateCreditRequest();
+
   const createCreditRequest = (e) => {
     e.preventDefault();
-    createCreditApiRequest()
-      .then((request) => {
-        setRequestData(request.data);
-      });
+    createCreditMutation({ providerId, courseId, username }, {
+      onSuccess: (response) => {
+        setRequestData(response.data);
+      },
+    });
   };
   return { requestData, createCreditRequest };
 };

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

@@ -1,56 +0,0 @@
-import { MockUseState } from 'testUtils';
-import { apiHooks } from 'hooks';
-import * as hooks from './hooks';
-
-jest.mock('hooks', () => ({
-  apiHooks: {
-    useCreateCreditRequest: jest.fn(),
-  },
-}));
-
-const state = new MockUseState(hooks);
-
-const cardId = 'test-card-id';
-const requestData = { data: 'request data' };
-const creditRequest = jest.fn().mockReturnValue(Promise.resolve(requestData));
-apiHooks.useCreateCreditRequest.mockReturnValue(creditRequest);
-const event = { preventDefault: jest.fn() };
-
-let out;
-describe('Credit Banner view hooks', () => {
-  describe('state', () => {
-    state.testGetter(state.keys.creditRequestData);
-  });
-  describe('useCreditRequestData', () => {
-    beforeEach(() => {
-      state.mock();
-      out = hooks.useCreditRequestData(cardId);
-    });
-    describe('behavior', () => {
-      it('initializes creditRequestData state field with null value', () => {
-        state.expectInitializedWith(state.keys.creditRequestData, null);
-      });
-      it('calls useCreateCreditRequest with passed cardID', () => {
-        expect(apiHooks.useCreateCreditRequest).toHaveBeenCalledWith(cardId);
-      });
-    });
-    describe('output', () => {
-      it('returns requestData state value', () => {
-        state.mockVal(state.keys.creditRequestData, requestData);
-        out = hooks.useCreditRequestData(cardId);
-        expect(out.requestData).toEqual(requestData);
-      });
-      describe('createCreditRequest', () => {
-        it('returns an event handler that prevents default click behavior', () => {
-          out.createCreditRequest(event);
-          expect(event.preventDefault).toHaveBeenCalled();
-        });
-        it('calls api.createCreditRequest and sets requestData with the response', async () => {
-          await out.createCreditRequest(event);
-          expect(creditRequest).toHaveBeenCalledWith();
-          expect(state.setState.creditRequestData).toHaveBeenCalledWith(requestData.data);
-        });
-      });
-    });
-  });
-});

src/containers/CourseCard/components/CourseCardBanners/CreditBanner/views/hooks.test.tsx

@@ -0,0 +1,192 @@
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import React from 'react';
+import * as api from 'data/services/lms/api';
+import { useCourseData } from 'hooks';
+import { AppContext } from '@edx/frontend-platform/react';
+import * as hooks from './hooks';
+
+jest.mock('data/services/lms/api', () => ({
+  createCreditRequest: jest.fn(),
+}));
+
+jest.mock('hooks', () => ({
+  useCourseData: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  ...jest.requireActual('@edx/frontend-platform/logging'),
+  logError: jest.fn(),
+}));
+
+const createWrapper = () => {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+      mutations: { retry: false },
+    },
+  });
+
+  const wrapper = ({ children }: { children: React.ReactNode }) => (
+    <QueryClientProvider client={queryClient}>
+      <AppContext.Provider value={{
+        authenticatedUser: { username: 'test-user' },
+      }}
+      >
+        {children}
+      </AppContext.Provider>
+    </QueryClientProvider>
+  );
+  return wrapper;
+};
+
+describe('useCreditRequestData', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = createWrapper();
+    (useCourseData as jest.Mock).mockReturnValue({
+      credit: { providerId: 'provider-123' },
+      courseRun: { courseId: 'course-456' },
+    });
+    jest.clearAllMocks();
+  });
+
+  it('initializes requestData as null', () => {
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    expect(result.current.requestData).toBeNull();
+  });
+
+  it('returns createCreditRequest function', () => {
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    expect(typeof result.current.createCreditRequest).toBe('function');
+  });
+
+  it('prevents default event behavior', async () => {
+    const event = { preventDefault: jest.fn() };
+    (api.createCreditRequest as jest.Mock).mockResolvedValue({ data: 'success' });
+
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    await act(async () => {
+      result.current.createCreditRequest(event);
+    });
+
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
+
+  it('calls API with correct parameters', async () => {
+    const event = { preventDefault: jest.fn() };
+    (api.createCreditRequest as jest.Mock).mockResolvedValue({ data: 'success' });
+
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    await act(async () => {
+      result.current.createCreditRequest(event);
+    });
+
+    expect(api.createCreditRequest).toHaveBeenCalledWith({
+      providerId: 'provider-123',
+      courseId: 'course-456',
+      username: 'test-user',
+    });
+  });
+
+  it('sets requestData with response data on success', async () => {
+    const event = { preventDefault: jest.fn() };
+    const responseData = { data: { id: 'credit-123', status: 'pending' } };
+    (api.createCreditRequest as jest.Mock).mockResolvedValue(responseData);
+
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    await act(async () => {
+      result.current.createCreditRequest(event);
+    });
+
+    expect(api.createCreditRequest).toHaveBeenCalledWith({
+      providerId: 'provider-123',
+      courseId: 'course-456',
+      username: 'test-user',
+    });
+
+    await waitFor(() => {
+      expect(result.current.requestData).toEqual(responseData.data);
+    });
+  });
+
+  it('handles missing providerId gracefully', async () => {
+    const event = { preventDefault: jest.fn() };
+    (useCourseData as jest.Mock).mockReturnValue({
+      credit: null,
+      courseRun: { courseId: 'course-456' },
+    });
+
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    await act(async () => {
+      result.current.createCreditRequest(event);
+    });
+
+    expect(api.createCreditRequest).toHaveBeenCalledWith({
+      providerId: undefined,
+      courseId: 'course-456',
+      username: 'test-user',
+    });
+  });
+
+  it('handles missing courseId gracefully', async () => {
+    const event = { preventDefault: jest.fn() };
+    (useCourseData as jest.Mock).mockReturnValue({
+      credit: { providerId: 'provider-123' },
+      courseRun: null,
+    });
+
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    await act(async () => {
+      result.current.createCreditRequest(event);
+    });
+
+    expect(api.createCreditRequest).toHaveBeenCalledWith({
+      providerId: 'provider-123',
+      courseId: undefined,
+      username: 'test-user',
+    });
+  });
+
+  it('handles API errors without crashing', async () => {
+    const event = { preventDefault: jest.fn() };
+    (api.createCreditRequest as jest.Mock).mockRejectedValue(new Error('API Error'));
+
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    await act(async () => {
+      result.current.createCreditRequest(event);
+    });
+
+    expect(result.current.requestData).toBeNull();
+  });
+
+  it('uses cardId to fetch course data', () => {
+    renderHook(() => hooks.useCreditRequestData('different-card'), { wrapper });
+
+    expect(useCourseData).toHaveBeenCalledWith('different-card');
+  });
+
+  it('handles undefined response data', async () => {
+    const event = { preventDefault: jest.fn() };
+    (api.createCreditRequest as jest.Mock).mockResolvedValue({ status: 200 });
+
+    const { result } = renderHook(() => hooks.useCreditRequestData('card-123'), { wrapper });
+
+    await act(async () => {
+      result.current.createCreditRequest(event);
+    });
+
+    await waitFor(() => {
+      expect(result.current.requestData).toBeUndefined();
+    });
+  });
+});

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

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

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

@@ -1,16 +1,21 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button, MailtoLink } from '@openedx/paragon';
 
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { utilHooks, useCourseData, useEntitlementInfo } from 'hooks';
+import { useSelectSessionModal } from 'data/context';
+import Banner from 'components/Banner';
+import { useInitializeLearnerHome } from 'data/hooks';
 
 import messages from './messages';
 
 export const EntitlementBanner = ({ cardId }) => {
   const { formatMessage } = useIntl();
+  const { data: learnerHomeData } = useInitializeLearnerHome();
+  const courseData = useCourseData(cardId);
+
   const {
     isEntitlement,
     hasSessions,
@@ -18,9 +23,12 @@ export const EntitlementBanner = ({ cardId }) => {
     changeDeadline,
     showExpirationWarning,
     isExpired,
-  } = reduxHooks.useCardEntitlementData(cardId);
-  const { supportEmail } = reduxHooks.usePlatformSettingsData();
-  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
+  } = useEntitlementInfo(courseData);
+  const supportEmail = useMemo(
+    () => learnerHomeData?.platformSettings?.supportEmail,
+    [learnerHomeData],
+  );
+  const { updateSelectSessionModal } = useSelectSessionModal();
   const formatDate = utilHooks.useFormatDate();
 
   if (!isEntitlement) {
@@ -42,7 +50,7 @@ export const EntitlementBanner = ({ cardId }) => {
         {formatMessage(messages.entitlementExpiringSoon, {
           changeDeadline: formatDate(changeDeadline),
           selectSessionButton: (
-            <Button variant="link" size="inline" className="m-0 p-0" onClick={openSessionModal}>
+            <Button variant="link" size="inline" className="m-0 p-0" onClick={() => updateSelectSessionModal(cardId)}>
               {formatMessage(messages.selectSession)}
             </Button>
           ),

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

@@ -1,26 +1,43 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { formatMessage } from 'testUtils';
 
-import { reduxHooks } from 'hooks';
+import { useCourseData } from 'hooks';
 import EntitlementBanner from './EntitlementBanner';
+import messages from './messages';
 
-jest.mock('components/Banner', () => 'Banner');
-jest.mock('hooks', () => ({
-  utilHooks: {
-    useFormatDate: () => date => date,
-  },
-  reduxHooks: {
-    usePlatformSettingsData: jest.fn(),
-    useCardEntitlementData: jest.fn(),
-    useUpdateSelectSessionModalCallback: jest.fn(
-      (cardId) => jest.fn().mockName(`updateSelectSessionModalCallback(${cardId})`),
-    ),
-  },
+jest.mock('react', () => ({
+  ...jest.requireActual('react'),
+  useMemo: (fn) => fn(),
 }));
 
-const cardId = 'my-test-course-number';
+jest.mock('data/hooks', () => ({
+  useInitializeLearnerHome: jest.fn().mockReturnValue({
+    data: {
+      platformSettings: {
+        supportEmail: 'test-support-email',
+      },
+    },
+  }),
+}));
+const mockUpdateSelectSessionModal = jest.fn().mockName('updateSelectSessionModal');
+jest.mock('data/context/SelectSessionProvider', () => ({
+  useSelectSessionModal: () => ({
+    updateSelectSessionModal: mockUpdateSelectSessionModal,
+  }),
+}));
 
-let el;
+jest.mock('hooks', () => ({
+  ...jest.requireActual('hooks'),
+  useCourseData: jest.fn(),
+  utilHooks: {
+    useFormatDate: () => date => date?.toDateString(),
+  },
+
+}));
+
+const cardId = 'test-card-id';
 
 const entitlementData = {
   isEntitlement: true,
@@ -31,33 +48,78 @@ const entitlementData = {
 };
 const platformData = { supportEmail: 'test-support-email' };
 
-const render = (overrides = {}) => {
+const renderComponent = (overrides = {}) => {
   const { entitlement = {} } = overrides;
-  reduxHooks.useCardEntitlementData.mockReturnValueOnce({ ...entitlementData, ...entitlement });
-  reduxHooks.usePlatformSettingsData.mockReturnValueOnce(platformData);
-  el = shallow(<EntitlementBanner cardId={cardId} />);
+  useCourseData.mockReturnValue({
+    entitlement: { ...entitlementData, ...entitlement },
+    platformSettings: platformData,
+  });
+  return render(<IntlProvider locale="en"><EntitlementBanner cardId={cardId} /></IntlProvider>);
 };
 
 describe('EntitlementBanner', () => {
-  test('initializes data with course number from entitlement', () => {
-    render();
-    expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
-    expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(cardId);
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-  test('no display if not an entitlement', () => {
-    render({ entitlement: { isEntitlement: false } });
-    expect(el.isEmptyRender()).toEqual(true);
+  it('initializes data with course number from entitlement', () => {
+    renderComponent();
+    expect(useCourseData).toHaveBeenCalledWith(cardId);
   });
-  test('snapshot: no sessions available', () => {
-    render({ entitlement: { isFulfilled: false, hasSessions: false } });
-    expect(el.snapshot).toMatchSnapshot();
+  it('no display if not an entitlement', () => {
+    renderComponent({ entitlement: { isEntitlement: false } });
+    const banner = screen.queryByRole('alert');
+    expect(banner).toBeNull();
   });
-  test('snapshot: expiration warning', () => {
-    render({ entitlement: { showExpirationWarning: true } });
-    expect(el.snapshot).toMatchSnapshot();
+  it('renders when no sessions available', () => {
+    renderComponent({ entitlement: { isFulfilled: false, hasSessions: false } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('alert-warning');
+    expect(banner.innerHTML).toContain(platformData.supportEmail);
   });
-  test('no display if sessions available and not displaying warning', () => {
-    render();
-    expect(el.isEmptyRender()).toEqual(true);
+  it('renders when expiration warning', () => {
+    const deadline = new Date();
+    deadline.setDate(deadline.getDate() + 4);
+    const deadlineStr = `${deadline.getMonth() + 1}/${deadline.getDate()}/${deadline.getFullYear()}`;
+    renderComponent({ entitlement: { changeDeadline: deadlineStr, isFulfilled: false, availableSessions: [1, 2, 3] } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('alert-info');
+    const button = screen.getByRole('button', { name: formatMessage(messages.selectSession) });
+    expect(button).toBeInTheDocument();
+  });
+  it('renders expired banner', () => {
+    renderComponent({ entitlement: { isExpired: true, availableSessions: [1, 2, 3] } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner.innerHTML).toContain(formatMessage(messages.entitlementExpired));
+  });
+  it('should call updateSelectSessionModal with cardId when select session button is clicked', async () => {
+    const user = userEvent.setup();
+    const deadline = new Date();
+    deadline.setDate(deadline.getDate() + 4);
+    const deadlineStr = `${deadline.getMonth() + 1}/${deadline.getDate()}/${deadline.getFullYear()}`;
+    renderComponent({ entitlement: { changeDeadline: deadlineStr, isFulfilled: false, availableSessions: [1, 2, 3] } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('alert-info');
+    const button = screen.getByRole('button', { name: formatMessage(messages.selectSession) });
+    expect(button).toBeInTheDocument();
+    await user.click(button);
+
+    expect(mockUpdateSelectSessionModal).toHaveBeenCalledWith(cardId);
+  });
+  it('should return null when isExpired is false and showExpirationWarning is false', () => {
+    renderComponent({
+      entitlement: {
+        isEntitlement: true,
+        hasSessions: true,
+        isFulfilled: true,
+        showExpirationWarning: false,
+        isExpired: false,
+      },
+    });
+    const banner = screen.queryByRole('alert');
+    expect(banner).toBeNull();
   });
 });

src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/ProgramsList.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import { ProgramsList } from './ProgramsList';
 
@@ -9,15 +9,23 @@ describe('ProgramsList', () => {
       title: 'Example Program 1',
     },
     {
-      programUrl: 'http://example.com',
+      programUrl: 'http://example2.com',
       title: 'Example Program 2',
     },
   ];
 
   it('renders correctly', () => {
-    const wrapper = shallow(<ProgramsList programs={programs} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ProgramsList programs={programs} />);
+    const list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+    expect(list.children.length).toEqual(programs.length);
+  });
 
-    expect(wrapper.instance.findByType('li').length).toEqual(programs.length);
+  it('add the links correctly', () => {
+    render(<ProgramsList programs={programs} />);
+    programs.forEach(program => {
+      const link = screen.getByRole('link', { name: program.title });
+      expect(link).toHaveAttribute('href', program.url);
+    });
   });
 });

src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/__snapshots__/ProgramsList.test.jsx.snap

@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ProgramsList renders correctly 1`] = `
-<ul
-  className="related-programs-list-container"
->
-  <li
-    className="my-2"
-    key="http://example.com"
-  >
-    <a
-      href="http://example.com"
-    >
-      Example Program 1
-    </a>
-  </li>
-  <li
-    className="my-2"
-    key="http://example.com"
-  >
-    <a
-      href="http://example.com"
-    >
-      Example Program 2
-    </a>
-  </li>
-</ul>
-`;