chore: update base route path to match old paths (#797)

Configure the package to compile TypeScript and copy SCSS and image
assets (PNG, SVG) to dist/ before publishing, rather than publishing raw
source files. This allows us to use tsc-alias for @src imports.

Also use a more modern export map to decouple the internal file
structure from the package's API, and add a build step to CI.

BREAKING CHANGE: Consuming projects may need to update their imports or
SASS @use lines.

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

.dockerignore

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

.env

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

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

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

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

.eslintrc.js

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

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

.github/CODEOWNERS

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

.github/workflows/ci.yml

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

.gitignore

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

.npmignore

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

Makefile

@@ -12,11 +12,6 @@ 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
 
@@ -29,6 +24,19 @@ test.npm.%: validate-no-uncommitted-package-lock-changes
 requirements:  ## install ci requirements
 	npm ci
 
+clean:
+	rm -rf dist
+
+build: clean
+	tsc --project tsconfig.build.json
+	tsc-alias -p tsconfig.build.json
+	find src -type f \( -name '*.scss' -o -name '*.png' -o -name '*.svg' \) -exec sh -c '\
+	  for f in "$$@"; do \
+	    d="dist/$${f#src/}"; \
+	    mkdir -p "$$(dirname "$$d")"; \
+	    cp "$$f" "$$d"; \
+	  done' sh {} +
+
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
 	rm -rf $(transifex_temp)
@@ -50,14 +58,11 @@ pull_translations:
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
       && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-platform/src/i18n/messages:frontend-platform \
+               translations/frontend-base/src/i18n/messages:frontend-base \
                translations/paragon/src/i18n/messages:paragon \
-               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)
+               translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard
 
-	$(intl_imports) frontend-platform paragon frontend-component-header frontend-component-footer frontend-app-learner-dashboard $(ATLAS_EXTRA_INTL_IMPORTS)
+	$(intl_imports) frontend-base paragon frontend-app-learner-dashboard
 
 # 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/footer components.
+"widget" containers to provide upsell and discovery widgets as sidebar components.
 
 Quickstart
 ----------
@@ -30,21 +30,10 @@ 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.
 
-Plugins
+Widgets
 -------
-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.
+This MFE can be customized with widgets.  The parts of this MFE that can be customized in that manner are documented
+`here </src/slots>`_.
 
 License
 -------

app.d.ts

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

babel.config.js

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

eslint.config.js

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

example.env.config.js

@@ -1,74 +0,0 @@
-/*
-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,18 +1,22 @@
-const { createConfig } = require('@openedx/frontend-build');
+const { createConfig } = require('@openedx/frontend-base/tools');
 
-module.exports = createConfig('jest', {
+module.exports = createConfig('test', {
   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: {
+    // Asset mocks
+    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
+  },
   testTimeout: 120000,
-  testEnvironment: 'jsdom',
 });

package.json

@@ -1,77 +1,90 @@
 {
-  "name": "@edx/frontend-app-learner-dashboard",
-  "version": "0.0.1",
+  "name": "@openedx/frontend-app-learner-dashboard",
+  "version": "1.0.0-alpha.6",
   "description": "",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
   },
+  "exports": {
+    ".": "./dist/index.js",
+    "./app.scss": "./dist/app.scss"
+  },
+  "files": [
+    "/dist"
+  ],
   "browserslist": [
     "extends @edx/browserslist-config"
   ],
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ],
   "scripts": {
-    "build": "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"
+    "build": "make build",
+    "clean": "make clean",
+    "dev": "PORT=1996 PUBLIC_PATH=/learner-dashboard openedx dev",
+    "i18n_extract": "openedx formatjs extract",
+    "lint": "openedx lint .",
+    "lint:fix": "openedx lint --fix .",
+    "prepack": "npm run build",
+    "test": "openedx test --coverage --passWithNoTests"
   },
-  "author": "edX",
+  "author": "Open edX",
   "license": "AGPL-3.0",
-  "homepage": "",
+  "homepage": "https://github.com/openedx/frontend-app-learner-dashboard#readme",
   "publishConfig": {
     "access": "public"
   },
+  "bugs": {
+    "url": "https://github.com/openedx/frontend-app-learner-dashboard/issues"
+  },
   "dependencies": {
-    "@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/brand": "npm:@openedx/brand-openedx@^1.2.3",
     "@edx/openedx-atlas": "^0.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@openedx/paragon": "^23.4.5",
-    "@tanstack/react-query": "^5.90.16",
+    "@redux-devtools/extension": "3.3.0",
+    "@reduxjs/toolkit": "^2.0.0",
     "classnames": "^2.3.1",
-    "core-js": "3.48.0",
+    "filesize": "^10.0.0",
     "font-awesome": "4.7.0",
-    "history": "5.3.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
     "prop-types": "15.8.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-helmet": "^6.1.0",
-    "react-intl": "6.8.9",
-    "react-router-dom": "6.30.3",
-    "react-share": "^5.2.2",
-    "regenerator-runtime": "^0.14.0",
-    "util": "^0.12.4"
+    "react-share": "^4.4.0",
+    "redux-logger": "3.0.6",
+    "redux-thunk": "2.4.2",
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.3.0",
-    "@edx/typescript-config": "^1.1.0",
-    "@openedx/frontend-build": "^14.6.2",
+    "@edx/browserslist-config": "^1.5.0",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.2.0",
+    "@testing-library/react": "^16.3.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"
+    "react-test-renderer": "^18.3.1",
+    "redux-mock-store": "^1.5.4",
+    "tsc-alias": "^1.8.16"
+  },
+  "peerDependencies": {
+    "@openedx/frontend-base": "^1.0.0-alpha.13",
+    "@openedx/paragon": "^23",
+    "@tanstack/react-query": "^5",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-redux": "^8",
+    "react-router": "^6",
+    "react-router-dom": "^6",
+    "redux": "^4"
   }
 }

public/index.html

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

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

site.config.dev.tsx

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

site.config.test.tsx

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

src/App.jsx

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

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

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

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

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

src/__mocks__/svg.js

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

src/app.scss

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

src/app.ts

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

@@ -1,15 +0,0 @@
-<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/config/index.js

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

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

src/containers/AppWrapper/index.jsx

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

@@ -1,15 +0,0 @@
-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/components/CourseCardActions/BeginCourseButton.jsx

@@ -1,29 +1,22 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { EXECUTIVE_EDUCATION_COURSE_MODES } from 'data/constants/course';
+import { useIntl } from '@openedx/frontend-base';
+
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
 
-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 { 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 { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
   const { disableBeginCourse } = useActionDisabledState(cardId);
 
-  const handleClick = useCourseTrackingEvent(
+  const handleClick = reduxHooks.useTrackCourseEvent(
     track.course.enterCourseClicked,
     cardId,
     homeUrl + execEdTrackingParam,

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

@@ -1,42 +1,36 @@
 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 { IntlProvider } from '@openedx/frontend-base';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/tracking';
 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', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
+
 jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
 
 jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
 const homeUrl = 'home-url';
+reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
+const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
+reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
+reduxHooks.useTrackCourseEvent.mockImplementation(
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+);
 
 const props = {
   cardId: 'cardId',
@@ -51,7 +45,11 @@ describe('BeginCourseButton', () => {
   describe('initiliaze hooks', () => {
     it('initializes course run data with cardId', () => {
       renderComponent();
-      expect(useCourseData).toHaveBeenCalledWith(props.cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads exec education path param', () => {
+      renderComponent();
+      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
     });
     it('loads disabled states for begin action from action hooks', () => {
       renderComponent();
@@ -75,15 +73,15 @@ describe('BeginCourseButton', () => {
         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', () => {
+      it('should track enter course clicked event on click, with exec ed param', async () => {
         renderComponent();
         const user = userEvent.setup();
         const button = screen.getByRole('button', { name: 'Begin Course' });
         user.click(button);
-        expect(useCourseTrackingEvent).toHaveBeenCalledWith(
+        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
           track.course.enterCourseClicked,
           props.cardId,
-          `${homeUrl}?org_id=test-org-id`,
+          homeUrl + execEdPath(props.cardId),
         );
       });
     });

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

@@ -1,29 +1,22 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
+
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
 
-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 { 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 { resumeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const execEdTrackingParam = reduxHooks.useCardExecEdTrackingParam(cardId);
   const { disableResumeCourse } = useActionDisabledState(cardId);
 
-  const handleClick = useCourseTrackingEvent(
+  const handleClick = reduxHooks.useTrackCourseEvent(
     track.course.enterCourseClicked,
     cardId,
     resumeUrl + execEdTrackingParam,

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

@@ -1,47 +1,36 @@
 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 { IntlProvider } from '@openedx/frontend-base';
 
-import track from 'tracking';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/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', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardExecEdTrackingParam: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
 jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
 
 jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
 
-useCourseData.mockReturnValue({
-  enrollment: { mode: 'executive-education' },
-  courseRun: { resumeUrl: 'home-url' },
-});
+const resumeUrl = 'resume-url';
+reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
+const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
+reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
+reduxHooks.useTrackCourseEvent.mockImplementation(
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+);
 
 describe('ResumeButton', () => {
   const props = {
@@ -50,7 +39,10 @@ describe('ResumeButton', () => {
   describe('initialize hooks', () => {
     beforeEach(() => render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>));
     it('initializes course run data with cardId', () => {
-      expect(useCourseData).toHaveBeenCalledWith(props.cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    });
+    it('loads exec education path param', () => {
+      expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
     });
     it('loads disabled states for resume action from action hooks', () => {
       expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
@@ -81,10 +73,10 @@ describe('ResumeButton', () => {
         const user = userEvent.setup();
         const button = screen.getByRole('button', { name: 'Resume' });
         user.click(button);
-        expect(useCourseTrackingEvent).toHaveBeenCalledWith(
+        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
           track.course.enterCourseClicked,
           props.cardId,
-          `home-url?org_id=${authOrgId}`,
+          resumeUrl + execEdPath(props.cardId),
         );
       });
     });

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

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

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

@@ -1,16 +1,16 @@
 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 { IntlProvider } from '@openedx/frontend-base';
 
+import { reduxHooks } from '@src/hooks';
 import useActionDisabledState from '../hooks';
 
 import SelectSessionButton from './SelectSessionButton';
 
-jest.mock('data/context', () => ({
-  useSelectSessionModal: jest.fn().mockReturnValue({
-    updateSelectSessionModal: jest.fn(),
-  }),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useUpdateSelectSessionModalCallback: jest.fn(),
+  },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableSelectSession: false })));
 
@@ -33,15 +33,11 @@ describe('SelectSessionButton', () => {
   });
   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);
+      expect(reduxHooks.useUpdateSelectSessionModalCallback).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 '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
+
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
 
-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 courseData = useCourseData(cardId);
-  const homeUrl = courseData?.courseRun?.homeUrl;
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
   const { disableViewCourse } = useActionDisabledState(cardId);
 
-  const handleClick = useCourseTrackingEvent(
+  const handleClick = reduxHooks.useTrackCourseEvent(
     track.course.enterCourseClicked,
     cardId,
     homeUrl,

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

@@ -1,27 +1,24 @@
 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 { IntlProvider } from '@openedx/frontend-base';
 
-import track from 'tracking';
+import track from '@src/tracking';
+import { reduxHooks } from '@src/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', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
 jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
 
 jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
@@ -38,18 +35,15 @@ describe('ViewCourseButton', () => {
     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(
+    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
       track.course.enterCourseClicked,
       defaultProps.cardId,
       homeUrl,
     );
-    expect(mockedTrackCourseEvent).toHaveBeenCalled();
   });
   it('learner cannot view course', () => {
     useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });

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

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

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

@@ -1,13 +1,18 @@
 import { render, screen } from '@testing-library/react';
-import { useCourseData } from 'hooks';
+import { reduxHooks } from '@src/hooks';
+
 import CourseCardActions from '.';
 
-jest.mock('hooks', () => ({
-  ...jest.requireActual('hooks'),
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useMasqueradeData: jest.fn(),
+  },
 }));
 
-jest.mock('plugin-slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));
+jest.mock('@src/slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));
 jest.mock('./SelectSessionButton', () => jest.fn(() => <div>SelectSessionButton</div>));
 jest.mock('./ViewCourseButton', () => jest.fn(() => <div>ViewCourseButton</div>));
 jest.mock('./BeginCourseButton', () => jest.fn(() => <div>BeginCourseButton</div>));
@@ -19,22 +24,26 @@ const props = { cardId };
 describe('CourseCardActions', () => {
   const mockHooks = ({
     isEntitlement = false,
+    isExecEd2UCourse = false,
     isFulfilled = false,
     isArchived = false,
+    isVerified = false,
     hasStarted = false,
+    isMasquerading = false,
   } = {}) => {
-    useCourseData.mockReturnValueOnce({
-      enrollment: { hasStarted },
-      courseRun: { isArchived },
-      entitlement: isEntitlement !== null ? { isEntitlement, isFulfilled } : null,
-    });
+    reduxHooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isFulfilled });
+    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ isArchived });
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isExecEd2UCourse, isVerified, hasStarted });
+    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
   };
   const renderComponent = () => render(<CourseCardActions {...props} />);
   describe('hooks', () => {
-    it('initializes hooks', () => {
+    it('initializes redux hooks', () => {
       mockHooks();
       renderComponent();
-      expect(useCourseData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('output', () => {
@@ -54,7 +63,7 @@ describe('CourseCardActions', () => {
     });
     describe('not entitlement, verified, or exec ed', () => {
       it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
-        mockHooks({ isArchived: true, isEntitlement: null });
+        mockHooks({ isArchived: true });
         renderComponent();
         const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
         expect(CourseCardActionSlot).toBeInTheDocument();
@@ -63,7 +72,7 @@ describe('CourseCardActions', () => {
       });
       describe('unstarted courses', () => {
         it('renders CourseCardActionSlot and BeginCourseButton', () => {
-          mockHooks({ isEntitlement: null });
+          mockHooks();
           renderComponent();
           const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
           expect(CourseCardActionSlot).toBeInTheDocument();
@@ -73,7 +82,7 @@ describe('CourseCardActions', () => {
       });
       describe('active courses (started, and not archived)', () => {
         it('renders CourseCardActionSlot and ResumeButton', () => {
-          mockHooks({ hasStarted: true, isEntitlement: null });
+          mockHooks({ hasStarted: true });
           renderComponent();
           const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
           expect(CourseCardActionSlot).toBeInTheDocument();

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

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

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

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

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

@@ -1,20 +1,20 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { useCourseData } from 'hooks';
-import { useInitializeLearnerHome } from 'data/hooks';
+import { reduxHooks } from '@src/hooks';
 import CertificateBanner from './CertificateBanner';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   utilHooks: {
     useFormatDate: jest.fn(() => date => date),
   },
-  useCourseData: jest.fn(),
-}));
-
-jest.mock('data/hooks', () => ({
-  useInitializeLearnerHome: jest.fn(),
+  reduxHooks: {
+    useCardCertificateData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardGradeData: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+  },
 }));
 
 const defaultCertificate = {
@@ -35,14 +35,9 @@ const supportEmail = 'suport@email.com';
 const billingEmail = 'billing@email.com';
 
 describe('CertificateBanner', () => {
-  useCourseData.mockReturnValue({
-    enrollment: {},
-    certificate: {},
-    gradeData: {},
-    courseRun: {
-      minPassingGrade: 0.8,
-      progressUrl: 'progressUrl',
-    },
+  reduxHooks.useCardCourseRunData.mockReturnValue({
+    minPassingGrade: 0.8,
+    progressUrl: 'progressUrl',
   });
   const createWrapper = ({
     certificate = {},
@@ -51,17 +46,11 @@ describe('CertificateBanner', () => {
     courseRun = {},
     platformSettings = {},
   }) => {
-    useCourseData.mockReturnValue({
-      enrollment: { ...defaultEnrollment, ...enrollment },
-      certificate: { ...defaultCertificate, ...certificate },
-      gradeData: { ...defaultGrade, ...grade },
-      courseRun: {
-        ...defaultCourseRun,
-        ...courseRun,
-      },
-    });
-    const lernearData = { data: { platformSettings: { ...defaultPlatformSettings, ...platformSettings } } };
-    useInitializeLearnerHome.mockReturnValue(lernearData);
+    reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
+    reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
+    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
+    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
     return render(<IntlProvider locale="en"><CertificateBanner {...props} /></IntlProvider>);
   };
   beforeEach(() => {
@@ -233,8 +222,7 @@ describe('CertificateBanner', () => {
         isPassing: true,
       },
       certificate: {
-        isEarned: true,
-        availableDate: '10/20/3030',
+        isEarnedButUnavailable: true,
       },
     });
     const banner = screen.getByRole('alert');
@@ -251,27 +239,4 @@ describe('CertificateBanner', () => {
     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,26 +1,22 @@
 /* eslint-disable max-len */
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink } from '@openedx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
+
+import { utilHooks, reduxHooks } from '../../../../hooks';
+import Banner from '../../../../components/Banner';
 
-import { utilHooks, useCourseData } from 'hooks';
-import Banner from 'components/Banner';
 import messages from './messages';
 
 export const CourseBanner = ({ cardId }) => {
-  const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
   const {
-    isVerified = false,
-    isAuditAccessExpired = false,
+    isVerified,
+    isAuditAccessExpired,
     coursewareAccess = {},
-  } = useMemo(() => ({
-    isVerified: courseData.enrollment?.isVerified,
-    isAuditAccessExpired: courseData.enrollment?.isAuditAccessExpired,
-    coursewareAccess: courseData.enrollment?.coursewareAccess || {},
-  }), [courseData]);
-  const courseRun = courseData?.courseRun || {};
+  } = reduxHooks.useCardEnrollmentData(cardId);
+  const courseRun = reduxHooks.useCardCourseRunData(cardId);
+  const { formatMessage } = useIntl();
   const formatDate = utilHooks.useFormatDate();
 
   const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess;

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

@@ -1,17 +1,20 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { useCourseData } from 'hooks';
-import { formatMessage } from 'testUtils';
+import { reduxHooks } from '@src/hooks';
+import { formatMessage } from '@src/testUtils';
 import { CourseBanner } from './CourseBanner';
 
 import messages from './messages';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
   utilHooks: {
     useFormatDate: () => date => date,
   },
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+  },
 }));
 
 const cardId = 'test-card-id';
@@ -36,15 +39,13 @@ const renderCourseBanner = (overrides = {}) => {
     courseRun = {},
     enrollment = {},
   } = overrides;
-  useCourseData.mockReturnValue({
-    courseRun: {
-      ...courseRunData,
-      ...courseRun,
-    },
-    enrollment: {
-      ...enrollmentData,
-      ...enrollment,
-    },
+  reduxHooks.useCardCourseRunData.mockReturnValueOnce({
+    ...courseRunData,
+    ...courseRun,
+  });
+  reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+    ...enrollmentData,
+    ...enrollment,
   });
   return render(<IntlProvider locale="en"><CourseBanner cardId={cardId} /></IntlProvider>);
 };
@@ -52,20 +53,13 @@ const renderCourseBanner = (overrides = {}) => {
 describe('CourseBanner', () => {
   it('initializes data with course number from enrollment, course and course run data', () => {
     renderCourseBanner();
-    expect(useCourseData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
   });
   it('no display if learner is verified', () => {
     renderCourseBanner({ enrollment: { isVerified: true } });
     expect(screen.queryByRole('alert')).toBeNull();
   });
-  it('should use default values when enrollment data is undefined', () => {
-    renderCourseBanner({
-      enrollment: undefined,
-      courseRun: {},
-    });
-
-    expect(useCourseData).toHaveBeenCalledWith('test-card-id');
-  });
   describe('audit access expired', () => {
     it('should display correct message and link', () => {
       renderCourseBanner({ enrollment: { isAuditAccessExpired: true } });

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

@@ -1,8 +1,5 @@
-import { useMemo } from 'react';
-import { useInitializeLearnerHome } from 'data/hooks';
-import { StrictDict } from 'utils';
-
-import { useCourseData } from 'hooks';
+import { StrictDict } from '../../../../../utils';
+import { reduxHooks } from '../../../../../hooks';
 
 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -17,29 +14,11 @@ export const statusComponents = StrictDict({
 });
 
 export const useCreditBannerData = (cardId) => {
-  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 credit = reduxHooks.useCardCreditData(cardId);
+  const { supportEmail } = reduxHooks.usePlatformSettingsData();
+  if (!credit.isEligible) {
+    return null;
+  }
 
   const { error, purchased, requestStatus } = credit;
   let ContentComponent = EligibleContent;

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

@@ -1,6 +1,5 @@
-import { keyStore } from 'utils';
-import { useCourseData } from 'hooks';
-import { useInitializeLearnerHome } from 'data/hooks';
+import { keyStore } from '@src/utils';
+import { reduxHooks } from '@src/hooks';
 
 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -10,19 +9,12 @@ import RejectedContent from './views/RejectedContent';
 
 import * as hooks from './hooks';
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useMemo: (fn) => fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+    usePlatformSettingsData: jest.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');
@@ -42,18 +34,18 @@ const defaultProps = {
 };
 
 const loadHook = (creditData = {}) => {
-  useCourseData.mockReturnValue({ credit: { ...defaultProps, ...creditData } });
+  reduxHooks.useCardCreditData.mockReturnValue({ ...defaultProps, ...creditData });
   out = hooks.useCreditBannerData(cardId);
 };
 
 describe('useCreditBannerData hook', () => {
   beforeEach(() => {
-    useInitializeLearnerHome.mockReturnValue({ data: { platformSettings: { supportEmail } } });
+    reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
   });
   it('loads card credit data with cardID and loads platform settings data', () => {
     loadHook({ isEligible: false });
-    expect(useCourseData).toHaveBeenCalledWith(cardId);
-    expect(useInitializeLearnerHome).toHaveBeenCalledWith();
+    expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.usePlatformSettingsData).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 '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 
-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,5 +1,5 @@
 import { screen, render } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 import hooks from './hooks';
 import { CreditBanner } from '.';
 

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

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

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

@@ -1,24 +1,17 @@
-import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import { useContext } from 'react';
+import { useIntl } from '@openedx/frontend-base';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import { useCourseData, useIsMasquerading } from 'hooks';
+import MasqueradeUserContext from '../../../../../../data/contexts/MasqueradeUserContext';
+import { reduxHooks } from '../../../../../../hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';
 
 import messages from './messages';
 
 export const ApprovedContent = ({ cardId }) => {
-  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 { providerStatusUrl: href, providerName } = reduxHooks.useCardCreditData(cardId);
+  const { isMasquerading } = useContext(MasqueradeUserContext);
   const { formatMessage } = useIntl();
   return (
     <CreditContent

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

@@ -1,13 +1,15 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { formatMessage } from 'testUtils';
-import { useCourseData, useIsMasquerading } from 'hooks';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 import messages from './messages';
 import ApprovedContent from './ApprovedContent';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
-  useIsMasquerading: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+  },
 }));
 
 const cardId = 'test-card-id';
@@ -15,21 +17,28 @@ const credit = {
   providerStatusUrl: 'test-credit-provider-status-url',
   providerName: 'test-credit-provider-name',
 };
-useCourseData.mockReturnValue({ credit });
-useIsMasquerading.mockReturnValue(false);
+reduxHooks.useCardCreditData.mockReturnValue(credit);
+
+const renderWithMasquerading = (isMasquerading = false) => render(
+  <IntlProvider locale="en">
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <ApprovedContent cardId={cardId} />
+    </MasqueradeUserContext.Provider>
+  </IntlProvider>
+);
 
 describe('ApprovedContent component', () => {
   describe('hooks', () => {
     it('initializes credit data with cardId', () => {
-      render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
-      expect(useCourseData).toHaveBeenCalledWith(cardId);
+      renderWithMasquerading();
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {
     describe('rendered CreditContent component', () => {
       beforeEach(() => {
         jest.clearAllMocks();
-        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+        renderWithMasquerading();
       });
       it('action.message is formatted viewCredit message', () => {
         const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
@@ -54,8 +63,7 @@ describe('ApprovedContent component', () => {
     });
     describe('when masquerading', () => {
       beforeEach(() => {
-        useIsMasquerading.mockReturnValue(true);
-        render(<IntlProvider locale="en"><ApprovedContent cardId={cardId} /></IntlProvider>);
+        renderWithMasquerading(true);
       });
 
       it('disables the action button', () => {

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

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

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

@@ -1,18 +1,21 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { useCourseData } from 'hooks';
-import track from 'tracking';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/tracking';
 
 import messages from './messages';
 import EligibleContent from './EligibleContent';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+  },
 }));
 
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   credit: {
     purchase: jest.fn(),
   },
@@ -23,7 +26,8 @@ const courseId = 'test-course-id';
 const credit = {
   providerName: 'test-credit-provider-name',
 };
-useCourseData.mockReturnValue({ credit, courseRun: { courseId } });
+reduxHooks.useCardCreditData.mockReturnValue(credit);
+reduxHooks.useCardCourseRunData.mockReturnValue({ courseId });
 
 const renderEligibleContent = () => render(<IntlProvider locale="en" messages={{}}><EligibleContent cardId={cardId} /></IntlProvider>);
 
@@ -31,7 +35,11 @@ describe('EligibleContent component', () => {
   describe('hooks', () => {
     it('initializes credit data with cardId', () => {
       renderEligibleContent();
-      expect(useCourseData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
+    });
+    it('initializes course run data with cardId', () => {
+      renderEligibleContent();
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('behavior', () => {
@@ -55,7 +63,7 @@ describe('EligibleContent component', () => {
         expect(eligibleMessage).toHaveTextContent(credit.providerName);
       });
       it('message is formatted eligible message if no provider', () => {
-        useCourseData.mockReturnValue({ credit: {}, courseRun: { courseId } });
+        reduxHooks.useCardCreditData.mockReturnValue({});
         renderEligibleContent();
         const eligibleMessage = screen.getByTestId('credit-msg');
         expect(eligibleMessage).toBeInTheDocument();

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

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

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

@@ -1,7 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 import userEvent from '@testing-library/user-event';
-import { useCourseData, useIsMasquerading } from 'hooks';
+
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 import messages from './messages';
 import hooks from './hooks';
 import MustRequestContent from './MustRequestContent';
@@ -10,9 +12,10 @@ jest.mock('./hooks', () => ({
   useCreditRequestData: jest.fn(),
 }));
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
-  useIsMasquerading: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+  },
 }));
 
 const cardId = 'test-card-id';
@@ -28,9 +31,11 @@ const providerName = 'test-credit-provider-name';
 const providerStatusUrl = 'test-credit-provider-status-url';
 const createCreditRequest = jest.fn().mockName('createCreditRequest');
 
-const renderMustRequestContent = () => render(
+const renderMustRequestContent = (isMasquerading = false) => render(
   <IntlProvider locale="en" messages={messages}>
-    <MustRequestContent cardId={cardId} />
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <MustRequestContent cardId={cardId} />
+    </MasqueradeUserContext.Provider>
   </IntlProvider>,
 );
 
@@ -41,12 +46,9 @@ describe('MustRequestContent component', () => {
       requestData,
       createCreditRequest,
     });
-    useIsMasquerading.mockReturnValue(false);
-    useCourseData.mockReturnValue({
-      credit: {
-        providerName,
-        providerStatusUrl,
-      },
+    reduxHooks.useCardCreditData.mockReturnValue({
+      providerName,
+      providerStatusUrl,
     });
   });
 
@@ -89,14 +91,13 @@ describe('MustRequestContent component', () => {
 
     describe('when masquerading', () => {
       beforeEach(() => {
-        useIsMasquerading.mockReturnValue(true);
-        renderMustRequestContent();
+        renderMustRequestContent(true);
       });
 
       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');
+        expect(button).toHaveClass('disabled');
       });
     });
   });

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

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

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

@@ -1,36 +1,36 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { useCourseData, useIsMasquerading } from 'hooks';
+import { IntlProvider } from '@openedx/frontend-base';
+
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 
 import messages from './messages';
 import PendingContent from './PendingContent';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
-  useIsMasquerading: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: { useCardCreditData: jest.fn() },
 }));
 
 const cardId = 'test-card-id';
 const providerName = 'test-credit-provider-name';
 const providerStatusUrl = 'test-credit-provider-status-url';
-useIsMasquerading.mockReturnValue(false);
-useCourseData.mockReturnValue({
-  credit: {
-    providerName,
-    providerStatusUrl,
-  },
+reduxHooks.useCardCreditData.mockReturnValue({
+  providerName,
+  providerStatusUrl,
 });
 
-const renderPendingContent = () => render(
+const renderPendingContent = (isMasquerading = false) => render(
   <IntlProvider messages={{}} locale="en">
-    <PendingContent cardId={cardId} />
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <PendingContent cardId={cardId} />
+    </MasqueradeUserContext.Provider>
   </IntlProvider>,
 );
 describe('PendingContent component', () => {
   describe('hooks', () => {
     it('initializes card credit data with cardId', () => {
       renderPendingContent();
-      expect(useCourseData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('behavior', () => {
@@ -58,9 +58,9 @@ describe('PendingContent component', () => {
       });
       describe('when masqueradeData is true', () => {
         it('disables the view details button', () => {
-          useIsMasquerading.mockReturnValue(true);
-          renderPendingContent();
+          renderPendingContent(true);
           const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
+          expect(button).toHaveAttribute('aria-disabled', 'true');
           expect(button).toHaveClass('disabled');
         });
       });

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

@@ -1,21 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 
-import { useCourseData } from 'hooks';
+import { reduxHooks } from '../../../../../../hooks';
 import CreditContent from './components/CreditContent';
 import ProviderLink from './components/ProviderLink';
 import messages from './messages';
 
 export const RejectedContent = ({ cardId }) => {
-  const courseData = useCourseData(cardId);
-  const credit = courseData?.credit;
+  const credit = reduxHooks.useCardCreditData(cardId);
   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,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { useCourseData } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 import RejectedContent from './RejectedContent';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+  },
 }));
 
 const cardId = 'test-card-id';
@@ -13,9 +15,7 @@ const credit = {
   providerStatusUrl: 'test-credit-provider-status-url',
   providerName: 'test-credit-provider-name',
 };
-useCourseData.mockReturnValue({
-  credit,
-});
+reduxHooks.useCardCreditData.mockReturnValue(credit);
 
 const renderRejectedContent = () => render(<IntlProvider><RejectedContent cardId={cardId} /></IntlProvider>);
 
@@ -23,7 +23,7 @@ describe('RejectedContent component', () => {
   describe('hooks', () => {
     it('initializes credit data with cardId', () => {
       renderRejectedContent();
-      expect(useCourseData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {

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

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import { keyStore } from 'utils';
+import { keyStore } from '@src/utils';
 
 import useCreditRequestFormData from './hooks';
 import CreditRequestForm from '.';

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

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

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

@@ -1,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { useCourseData } from 'hooks';
+import { reduxHooks } from '@src/hooks';
+import { IntlProvider } from '@openedx/frontend-base';
 
 import ProviderLink from './ProviderLink';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCreditData: jest.fn(),
+  },
 }));
 
 const cardId = 'test-card-id';
@@ -21,12 +23,12 @@ const renderProviderLink = () => render(
 describe('ProviderLink component', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    useCourseData.mockReturnValue({ credit });
+    reduxHooks.useCardCreditData.mockReturnValue(credit);
     renderProviderLink();
   });
   describe('hooks', () => {
     it('initializes credit hook with cardId', () => {
-      expect(useCourseData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {

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

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

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

@@ -0,0 +1,56 @@
+import { MockUseState } from '@src/testUtils';
+import { apiHooks } from '@src/hooks';
+import * as hooks from './hooks';
+
+jest.mock('@src/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

@@ -1,192 +0,0 @@
-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 '@edx/frontend-platform/i18n';
+import { defineMessages } from '@openedx/frontend-base';
 
 const messages = defineMessages({
   approved: {
     id: 'learner-dash.courseCard.banners.credit.approved',
-    description: '',
+    description: 'Message shown when credit request has been approved',
     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: '',
+    description: 'Congratulatory message for credit approval',
     defaultMessage: 'Congratulations!',
   },
   eligible: {
     id: 'learner-dash.courseCard.banners.credit.eligible',
-    description: '',
+    description: 'Message shown when user is eligible to purchase course credit',
     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: '',
+    description: 'Message shown when user is eligible for credit from a specific provider',
     defaultMessage: 'You are now eligible for credit from {providerName}. Congratulations!',
   },
   getCredit: {
     id: 'learner-dash.courseCard.banners.credit.getCredit',
-    description: '',
+    description: 'Button text for initiating the credit process',
     defaultMessage: 'Get Credit',
   },
   mustRequest: {
     id: 'learner-dash.courseCard.banners.credit.mustRequest',
-    description: '',
+    description: 'Message shown after payment to instruct user to request credit',
     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: '',
+    description: 'Message shown when credit request has been received',
     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: '',
+    description: 'Message shown when credit request has been rejected',
     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: '',
+    description: 'Button text for requesting credit',
     defaultMessage: 'Request Credit',
   },
   viewCredit: {
     id: 'learner-dash.courseCard.banners.credit.viewCredit',
-    description: '',
+    description: 'Button text for viewing credit details',
     defaultMessage: 'View Credit',
   },
   viewDetails: {
     id: 'learner-dash.courseCard.banners.credit.viewDetails',
-    description: '',
+    description: 'Button text for viewing credit request details',
     defaultMessage: 'View Details',
   },
 });

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

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

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

@@ -1,40 +1,22 @@
 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 { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
 
-import { useCourseData } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 import EntitlementBanner from './EntitlementBanner';
 import messages from './messages';
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useMemo: (fn) => fn(),
-}));
-
-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,
-  }),
-}));
-
-jest.mock('hooks', () => ({
-  ...jest.requireActual('hooks'),
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
   utilHooks: {
-    useFormatDate: () => date => date?.toDateString(),
+    useFormatDate: () => date => date,
+  },
+  reduxHooks: {
+    usePlatformSettingsData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useUpdateSelectSessionModalCallback: jest.fn(
+      (cardId) => jest.fn().mockName(`updateSelectSessionModalCallback(${cardId})`),
+    ),
   },
-
 }));
 
 const cardId = 'test-card-id';
@@ -50,20 +32,16 @@ const platformData = { supportEmail: 'test-support-email' };
 
 const renderComponent = (overrides = {}) => {
   const { entitlement = {} } = overrides;
-  useCourseData.mockReturnValue({
-    entitlement: { ...entitlementData, ...entitlement },
-    platformSettings: platformData,
-  });
+  reduxHooks.useCardEntitlementData.mockReturnValueOnce({ ...entitlementData, ...entitlement });
+  reduxHooks.usePlatformSettingsData.mockReturnValueOnce(platformData);
   return render(<IntlProvider locale="en"><EntitlementBanner cardId={cardId} /></IntlProvider>);
 };
 
 describe('EntitlementBanner', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
   it('initializes data with course number from entitlement', () => {
     renderComponent();
-    expect(useCourseData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
+    expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(cardId);
   });
   it('no display if not an entitlement', () => {
     renderComponent({ entitlement: { isEntitlement: false } });
@@ -78,10 +56,7 @@ describe('EntitlementBanner', () => {
     expect(banner.innerHTML).toContain(platformData.supportEmail);
   });
   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] } });
+    renderComponent({ entitlement: { showExpirationWarning: true } });
     const banner = screen.getByRole('alert');
     expect(banner).toBeInTheDocument();
     expect(banner).toHaveClass('alert-info');
@@ -89,37 +64,9 @@ describe('EntitlementBanner', () => {
     expect(button).toBeInTheDocument();
   });
   it('renders expired banner', () => {
-    renderComponent({ entitlement: { isExpired: true, availableSessions: [1, 2, 3] } });
+    renderComponent({ entitlement: { isExpired: true } });
     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/index.jsx

@@ -2,20 +2,20 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Program } from '@openedx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 
-import { useCourseData } from 'hooks';
-import Banner from 'components/Banner';
+import { reduxHooks } from '../../../../../hooks';
+import Banner from '../../../../../components/Banner';
 
 import ProgramList from './ProgramsList';
 import messages from './messages';
 
 export const RelatedProgramsBanner = ({ cardId }) => {
   const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
-  const programData = courseData?.programs;
 
-  if (!courseData || !programData?.relatedPrograms.length) {
+  const programData = reduxHooks.useCardRelatedProgramsData(cardId);
+
+  if (!programData?.length) {
     return null;
   }
 
@@ -27,7 +27,7 @@ export const RelatedProgramsBanner = ({ cardId }) => {
       <span className="font-weight-bolder">
         {formatMessage(messages.relatedPrograms)}
       </span>
-      <ProgramList programs={programData.relatedPrograms} />
+      <ProgramList programs={programData.list} />
     </Banner>
   );
 };

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

@@ -1,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { useCourseData } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 import RelatedProgramsBanner from '.';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardRelatedProgramsData: jest.fn(),
+  },
 }));
 
 const cardId = 'test-card-id';
@@ -25,21 +27,21 @@ const programData = {
 
 describe('RelatedProgramsBanner', () => {
   it('render empty', () => {
-    useCourseData.mockReturnValue(null);
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue({});
     render(<IntlProvider locale="en"><RelatedProgramsBanner cardId={cardId} /></IntlProvider>);
     const banner = screen.queryByRole('alert');
     expect(banner).toBeNull();
   });
 
   it('render with programs', () => {
-    useCourseData.mockReturnValue({ programs: { relatedPrograms: programData.list } });
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue(programData);
     render(<IntlProvider locale="en"><RelatedProgramsBanner cardId={cardId} /></IntlProvider>);
     const list = screen.getByRole('list');
     expect(list.childElementCount).toBe(programData.list.length);
   });
 
   it('render related programs title', () => {
-    useCourseData.mockReturnValue({ programs: { relatedPrograms: programData.list } });
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue(programData);
     render(<IntlProvider locale="en"><RelatedProgramsBanner cardId={cardId} /></IntlProvider>);
     const title = screen.getByText('Related Programs:');
     expect(title).toBeInTheDocument();

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

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

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

@@ -1,20 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useCourseData } from 'hooks';
+import { reduxHooks } from '../../../../hooks';
+import CourseBannerSlot from '../../../../slots/CourseBannerSlot';
 
-import CourseBannerSlot from 'plugin-slots/CourseBannerSlot';
 import CertificateBanner from './CertificateBanner';
 import CreditBanner from './CreditBanner';
 import EntitlementBanner from './EntitlementBanner';
 import RelatedProgramsBanner from './RelatedProgramsBanner';
 
 export const CourseCardBanners = ({ cardId }) => {
-  const courseData = useCourseData(cardId);
-  if (!courseData) {
-    return null;
-  }
-  const { isEnrolled = false } = courseData.enrollment;
+  const { isEnrolled } = reduxHooks.useCardEnrollmentData(cardId);
   return (
     <div className="course-card-banners" data-testid="CourseCardBanners">
       <RelatedProgramsBanner cardId={cardId} />

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

@@ -1,8 +1,8 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
-import { useCourseData } from 'hooks';
+import { IntlProvider } from '@openedx/frontend-base';
+import { MemoryRouter } from 'react-router-dom';
 
+import { reduxHooks } from '@src/hooks';
 import CourseCardBanners from '.';
 
 jest.mock('./CourseBanner', () => jest.fn(() => <div>CourseBanner</div>));
@@ -19,12 +19,10 @@ const mockedComponents = [
   'RelatedProgramsBanner',
 ];
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(() => ({
-    enrollment: {
-      isEnrolled: true,
-    },
-  })),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardEnrollmentData: jest.fn(() => ({ isEnrolled: true })),
+  },
 }));
 
 describe('CourseCardBanners', () => {
@@ -32,20 +30,28 @@ describe('CourseCardBanners', () => {
     cardId: 'test-card-id',
   };
   it('renders default CourseCardBanners', () => {
-    render(<IntlProvider locale="en"><CourseCardBanners {...props} /></IntlProvider>);
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: true });
+    render(
+      <MemoryRouter>
+        <IntlProvider locale="en">
+          <CourseCardBanners {...props} />
+        </IntlProvider>
+      </MemoryRouter>
+    );
     mockedComponents.map((componentName) => {
       const mockedComponent = screen.getByText(componentName);
       return expect(mockedComponent).toBeInTheDocument();
     });
   });
-  it('render null with no courseData', () => {
-    useCourseData.mockReturnValue(null);
-    const { container } = render(<IntlProvider locale="en"><CourseCardBanners {...props} /></IntlProvider>);
-    expect(container.firstChild).toBeNull();
-  });
   it('render with isEnrolled false', () => {
-    useCourseData.mockReturnValue({ enrollment: { isEnrolled: false } });
-    render(<IntlProvider locale="en"><CourseCardBanners {...props} /></IntlProvider>);
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false });
+    render(
+      <MemoryRouter>
+        <IntlProvider locale="en">
+          <CourseCardBanners {...props} />
+        </IntlProvider>
+      </MemoryRouter>
+    );
     const mockedComponentsIfNotEnrolled = mockedComponents.slice(-2);
     mockedComponentsIfNotEnrolled.map((componentName) => {
       const mockedComponent = screen.getByText(componentName);

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

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

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

@@ -1,21 +1,22 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { utilHooks, useCourseData, useEntitlementInfo } from 'hooks';
-import { useSelectSessionModal } from 'data/context';
+import { useIntl } from '@openedx/frontend-base';
+import { utilHooks, reduxHooks } from '../../../../hooks';
 
 import * as hooks from './hooks';
 import messages from './messages';
 
 export const useAccessMessage = ({ cardId }) => {
   const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
-  const { courseRun, enrollment } = courseData || {};
+  const enrollment = reduxHooks.useCardEnrollmentData(cardId);
+  const courseRun = reduxHooks.useCardCourseRunData(cardId);
   const formatDate = utilHooks.useFormatDate();
   if (!courseRun.isStarted) {
-    if (!courseRun.startDate && !courseRun.advertisedStart) { return null; }
-    const startDate = courseRun.advertisedStart ? courseRun.advertisedStart : formatDate(courseRun.startDate);
+    if (!courseRun.startDate && !courseRun.advertisedStart) {
+      return null;
+    }
+    const startDate = courseRun.advertisedStart ?? formatDate(courseRun.startDate);
     return formatMessage(messages.courseStarts, { startDate });
   }
-  if (enrollment?.isEnrolled) {
+  if (enrollment.isEnrolled) {
     const { isArchived, endDate } = courseRun;
     const {
       accessExpirationDate,
@@ -28,7 +29,9 @@ export const useAccessMessage = ({ cardId }) => {
         { accessExpirationDate: formatDate(accessExpirationDate) },
       );
     }
-    if (!endDate) { return null; }
+    if (!endDate) {
+      return null;
+    }
     return formatMessage(
       isArchived ? messages.courseEnded : messages.courseEnds,
       { endDate: formatDate(endDate) },
@@ -39,23 +42,23 @@ export const useAccessMessage = ({ cardId }) => {
 
 export const useCardDetailsData = ({ cardId }) => {
   const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
-  const providerName = courseData?.courseProvider?.name;
-  const courseNumber = courseData?.course?.courseNumber;
+  const providerName = reduxHooks.useCardProviderData(cardId).name;
+  const { courseNumber } = reduxHooks.useCardCourseData(cardId);
   const {
     isEntitlement,
     isFulfilled,
     canChange,
-  } = useEntitlementInfo(courseData);
-  const { updateSelectSessionModal } = useSelectSessionModal();
+  } = reduxHooks.useCardEntitlementData(cardId);
+
+  const openSessionModal = reduxHooks.useUpdateSelectSessionModalCallback(cardId);
 
   return {
-    providerName: providerName || formatMessage(messages.unknownProviderName),
+    providerName: providerName ?? formatMessage(messages.unknownProviderName),
     accessMessage: hooks.useAccessMessage({ cardId }),
     isEntitlement,
     isFulfilled,
     canChange,
-    openSessionModal: () => updateSelectSessionModal(cardId),
+    openSessionModal,
     courseNumber,
     changeOrLeaveSessionMessage: formatMessage(messages.changeOrLeaveSessionButton),
   };

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

@@ -1,32 +1,28 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 
-import { keyStore } from 'utils';
-import { utilHooks, useCourseData } from 'hooks';
-import { useSelectSessionModal } from 'data/context';
+import { keyStore } from '@src/utils';
+import { utilHooks, reduxHooks } from '@src/hooks';
 import * as hooks from './hooks';
 import messages from './messages';
 
-jest.mock('react', () => ({
-  ...jest.requireActual('react'),
-  useMemo: (fn) => fn(),
-}));
-
-const updateSelectSessionModalMock = jest.fn().mockName('updateSelectSessionModal');
-jest.mock('data/context', () => ({
-  useSelectSessionModal: jest.fn(),
-}));
-jest.mock('hooks', () => ({
-  ...jest.requireActual('hooks'),
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
   utilHooks: {
     useFormatDate: jest.fn(),
   },
+  reduxHooks: {
+    useCardCourseData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useCardProviderData: jest.fn(),
+    useUpdateSelectSessionModalCallback: (...args) => ({ updateSelectSessionModalCallback: args }),
+  },
 }));
 
-jest.mock('@edx/frontend-platform/i18n', () => {
-  const { formatMessage } = jest.requireActual('testUtils');
+jest.mock('@openedx/frontend-base', () => {
+  const { formatMessage } = jest.requireActual('@src/testUtils');
   return {
-    ...jest.requireActual('@edx/frontend-platform/i18n'),
+    ...jest.requireActual('@openedx/frontend-base'),
     useIntl: () => ({
       formatMessage,
     }),
@@ -49,9 +45,8 @@ describe('CourseCardDetails hooks', () => {
   });
 
   describe('useCardDetailsData', () => {
-    const providerData = {
-      name: 'my-provider-name',
-    };
+    const providerName = 'my-provider-name';
+    const providerData = {};
     const entitlementData = {
       isEntitlement: false,
       disableViewCourse: false,
@@ -63,13 +58,15 @@ describe('CourseCardDetails hooks', () => {
     const runHook = ({ provider = {}, entitlement = {} }) => {
       jest.spyOn(hooks, hookKeys.useAccessMessage)
         .mockImplementationOnce(mockAccessMessage);
-      useCourseData.mockReturnValue({
-        courseProvider: { ...providerData, ...provider },
-        course: { courseNumber },
-        courseRun: {},
-        entitlement: { ...entitlementData, ...entitlement },
+      reduxHooks.useCardProviderData.mockReturnValueOnce({
+        ...providerData,
+        ...provider,
       });
-      useSelectSessionModal.mockReturnValue({ updateSelectSessionModal: updateSelectSessionModalMock });
+      reduxHooks.useCardEntitlementData.mockReturnValueOnce({
+        ...entitlementData,
+        ...entitlement,
+      });
+      reduxHooks.useCardCourseData.mockReturnValueOnce({ courseNumber });
       out = hooks.useCardDetailsData({ cardId });
     };
     beforeEach(() => {
@@ -79,17 +76,15 @@ describe('CourseCardDetails hooks', () => {
       expect(out.accessMessage).toEqual(mockAccessMessage({ cardId }));
     });
     it('forwards provider name if it exists, else formatted unknown provider name', () => {
-      expect(out.providerName).toEqual(providerData.name);
-      runHook({ provider: { name: '' } });
+      runHook({ provider: { name: providerName } });
+      expect(out.providerName).toEqual(providerName);
+
+      runHook({ provider: {} });
       expect(out.providerName).toEqual(formatMessage(messages.unknownProviderName));
     });
     it('forward changeOrLeaveSessionMessage', () => {
       expect(out.changeOrLeaveSessionMessage).toEqual(formatMessage(messages.changeOrLeaveSessionButton));
     });
-    it('calls updateSelectSessionModal when openSessionModal is called', () => {
-      out.openSessionModal();
-      expect(updateSelectSessionModalMock).toHaveBeenCalledWith(cardId);
-    });
   });
 
   describe('useAccessMessage', () => {
@@ -106,16 +101,21 @@ describe('CourseCardDetails hooks', () => {
       endDate: '10/20/2000',
     };
     const runHook = ({ enrollment = {}, courseRun = {} }) => {
-      useCourseData.mockReturnValue({
-        courseRun: { ...courseRunData, ...courseRun },
-        enrollment: { ...enrollmentData, ...enrollment },
+      reduxHooks.useCardCourseRunData.mockReturnValueOnce({
+        ...courseRunData,
+        ...courseRun,
+      });
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+        ...enrollmentData,
+        ...enrollment,
       });
       out = hooks.useAccessMessage({ cardId });
     };
 
     it('loads data from enrollment and course run data based on course number', () => {
       runHook({});
-      expect(useCourseData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
+      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
     });
 
     describe('if not started yet', () => {

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

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

src/containers/CourseCard/components/CourseCardImage.jsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { baseAppUrl } from 'data/services/lms/urls';
+import { useIntl } from '@openedx/frontend-base';
 
 import { Badge } from '@openedx/paragon';
 
-import track from 'tracking';
-import { useCourseData, useCourseTrackingEvent } from 'hooks';
-import verifiedRibbon from 'assets/verified-ribbon.png';
+import track from '../../../tracking';
+import { reduxHooks } from '../../../hooks';
+import verifiedRibbon from '../../../assets/verified-ribbon.png';
 import useActionDisabledState from './hooks';
 
 import messages from '../messages';
@@ -16,10 +15,11 @@ const { courseImageClicked } = track.course;
 
 export const CourseCardImage = ({ cardId, orientation }) => {
   const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
-  const { homeUrl } = courseData?.courseRun || {};
+  const { bannerImgSrc } = reduxHooks.useCardCourseData(cardId);
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { isVerified } = reduxHooks.useCardEnrollmentData(cardId);
   const { disableCourseTitle } = useActionDisabledState(cardId);
-  const handleImageClicked = useCourseTrackingEvent(courseImageClicked, cardId, homeUrl);
+  const handleImageClicked = reduxHooks.useTrackCourseEvent(courseImageClicked, cardId, homeUrl);
   const wrapperClassName = `pgn__card-wrapper-image-cap d-inline-block overflow-visible ${orientation}`;
   const image = (
     <>
@@ -27,11 +27,11 @@ export const CourseCardImage = ({ cardId, orientation }) => {
         // w-100 is necessary for images on Safari, otherwise stretches full height of the image
         // https://stackoverflow.com/a/44250830
         className="pgn__card-image-cap w-100 show"
-        src={courseData?.course?.bannerImgSrc && baseAppUrl(courseData.course.bannerImgSrc)}
+        src={bannerImgSrc}
         alt={formatMessage(messages.bannerAlt)}
       />
       {
-        courseData?.enrollment?.isVerified && (
+        isVerified && (
           <span
             className="course-card-verify-ribbon-container"
             title={formatMessage(messages.verifiedHoverDescription)}

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

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-import { formatMessage } from 'testUtils';
-import { useCourseData } from 'hooks';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
+import { reduxHooks } from '@src/hooks';
 import useActionDisabledState from './hooks';
 import { CourseCardImage } from './CourseCardImage';
 import messages from '../messages';
@@ -9,15 +9,15 @@ import messages from '../messages';
 const homeUrl = 'https://example.com';
 const bannerImgSrc = 'banner-img-src.jpg';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(() => ({
-    course: { bannerImgSrc },
-    courseRun: { homeUrl },
-    enrollment: {},
-  })),
-  useCourseTrackingEvent: jest.fn((eventName, cardId, url) => ({
-    trackCourseEvent: { eventName, cardId, url },
-  })),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCourseData: jest.fn(() => ({ bannerImgSrc })),
+    useCardCourseRunData: jest.fn(() => ({ homeUrl })),
+    useCardEnrollmentData: jest.fn(),
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
+      trackCourseEvent: { eventName, cardId, url },
+    })),
+  },
 }));
 
 jest.mock('./hooks', () => jest.fn());
@@ -30,13 +30,7 @@ describe('CourseCardImage', () => {
 
   it('renders course image with correct attributes', () => {
     useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
-    useCourseData.mockReturnValue(
-      {
-        course: { bannerImgSrc },
-        courseRun: { homeUrl },
-        enrollment: { isVerified: true },
-      },
-    );
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
     render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
 
     const image = screen.getByRole('img', { name: formatMessage(messages.bannerAlt) });
@@ -47,13 +41,7 @@ describe('CourseCardImage', () => {
 
   it('isVerified, should render badge', () => {
     useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-    useCourseData.mockReturnValue(
-      {
-        course: { bannerImgSrc },
-        courseRun: { homeUrl },
-        enrollment: { isVerified: true },
-      },
-    );
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
     render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
 
     const badge = screen.getByText(formatMessage(messages.verifiedBanner));
@@ -64,13 +52,7 @@ describe('CourseCardImage', () => {
 
   it('renders link with correct href if disableCourseTitle is false', () => {
     useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-    useCourseData.mockReturnValue(
-      {
-        course: { bannerImgSrc },
-        courseRun: { homeUrl },
-        enrollment: { isVerified: false },
-      },
-    );
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: false });
     render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
 
     const link = screen.getByRole('link');
@@ -79,15 +61,12 @@ describe('CourseCardImage', () => {
   describe('hooks', () => {
     it('initializes', () => {
       useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-      useCourseData.mockReturnValue(
-        {
-          course: { bannerImgSrc },
-          courseRun: { homeUrl },
-          enrollment: { isVerified: true },
-        },
-      );
+      reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
       render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
-      expect(useCourseData).toHaveBeenCalledWith(props.cardId);
+      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
+        props.cardId,
+      );
       expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
     });
   });

src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx

@@ -1,13 +1,14 @@
-import React from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import * as ReactShare from 'react-share';
-import { EXECUTIVE_EDUCATION_COURSE_MODES } from 'data/constants/course';
-import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { useIntl } from '@openedx/frontend-base';
 import { Dropdown } from '@openedx/paragon';
 
-import track from 'tracking';
-import { useCourseTrackingEvent, useCourseData, useIsMasquerading } from 'hooks';
-import { useCardSocialSettingsData } from './hooks';
+import MasqueradeUserContext from '../../../../data/contexts/MasqueradeUserContext';
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
+
 import messages from './messages';
 
 export const testIds = {
@@ -16,15 +17,14 @@ export const testIds = {
 
 export const SocialShareMenu = ({ cardId, emailSettings }) => {
   const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
-  const courseName = courseData?.course?.courseName;
-  const isExecEd2UCourse = EXECUTIVE_EDUCATION_COURSE_MODES.includes(courseData.enrollment.mode);
-  const isEmailEnabled = courseData?.enrollment?.isEmailEnabled ?? false;
-  const { twitter, facebook } = useCardSocialSettingsData(cardId);
-  const isMasquerading = useIsMasquerading();
 
-  const handleTwitterShare = useCourseTrackingEvent(track.socialShare, cardId, 'twitter');
-  const handleFacebookShare = useCourseTrackingEvent(track.socialShare, cardId, 'facebook');
+  const { courseName } = reduxHooks.useCardCourseData(cardId);
+  const { isEmailEnabled, isExecEd2UCourse } = reduxHooks.useCardEnrollmentData(cardId);
+  const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
+  const { isMasquerading } = useContext(MasqueradeUserContext);
+
+  const handleTwitterShare = reduxHooks.useTrackCourseEvent(track.socialShare, cardId, 'twitter');
+  const handleFacebookShare = reduxHooks.useTrackCourseEvent(track.socialShare, cardId, 'facebook');
 
   if (isExecEd2UCourse) {
     return null;
@@ -51,7 +51,6 @@ export const SocialShareMenu = ({ cardId, emailSettings }) => {
           })}
           resetButtonStyle={false}
           className="pgn__dropdown-item dropdown-item"
-          aria-label="facebook"
         >
           {formatMessage(messages.shareToFacebook)}
         </ReactShare.FacebookShareButton>
@@ -66,7 +65,6 @@ export const SocialShareMenu = ({ cardId, emailSettings }) => {
           })}
           resetButtonStyle={false}
           className="pgn__dropdown-item dropdown-item"
-          aria-label="twitter"
         >
           {formatMessage(messages.shareToTwitter)}
         </ReactShare.TwitterShareButton>

src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx

@@ -1,27 +1,28 @@
-import { when } from 'jest-when';
-
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider } from '@openedx/frontend-base';
 import { render, screen } from '@testing-library/react';
+import { when } from 'jest-when';
+import track from '@src/tracking';
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 
-import track from 'tracking';
-import { useCourseTrackingEvent, useCourseData, useIsMasquerading } from 'hooks';
-
-import { useEmailSettings, useCardSocialSettingsData } from './hooks';
+import { useEmailSettings } from './hooks';
 import SocialShareMenu from './SocialShareMenu';
 import messages from './messages';
 
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   socialShare: 'test-social-share-key',
 }));
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
-  useCourseTrackingEvent: jest.fn((...args) => ({ trackCourseEvent: args })),
-  useIsMasquerading: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCourseData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardSocialSettingsData: jest.fn(),
+    useTrackCourseEvent: jest.fn((...args) => ({ trackCourseEvent: args })),
+  },
 }));
 jest.mock('./hooks', () => ({
   useEmailSettings: jest.fn(),
-  useCardSocialSettingsData: jest.fn(),
 }));
 
 const props = {
@@ -54,28 +55,31 @@ const socialShare = {
 
 const mockHooks = (returnVals = {}) => {
   mockHook(
-    useCourseData,
+    reduxHooks.useCardEnrollmentData,
     {
-      enrollment: {
-        isEmailEnabled: !!returnVals.isEmailEnabled,
-        mode: returnVals.isExecEd2UCourse ? 'exec-ed-2u' : 'standard',
-      },
-      course: { courseName },
+      isEmailEnabled: !!returnVals.isEmailEnabled,
+      isExecEd2UCourse: !!returnVals.isExecEd2UCourse,
     },
     { isCardHook: true },
   );
+  mockHook(reduxHooks.useCardCourseData, { courseName }, { isCardHook: true });
   mockHook(
-    useCardSocialSettingsData,
+    reduxHooks.useCardSocialSettingsData,
     {
       facebook: { ...socialShare.facebook, isEnabled: !!returnVals.facebook?.isEnabled },
       twitter: { ...socialShare.twitter, isEnabled: !!returnVals.twitter?.isEnabled },
     },
     { isCardHook: true },
   );
-  mockHook(useIsMasquerading, !!returnVals.isMasquerading);
 };
 
-const renderComponent = () => render(<IntlProvider locale="en"><SocialShareMenu {...props} /></IntlProvider>);
+const renderComponent = (isMasquerading = false) => render(
+  <IntlProvider locale="en">
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <SocialShareMenu {...props} />
+    </MasqueradeUserContext.Provider>
+  </IntlProvider>,
+);
 
 describe('SocialShareMenu', () => {
   describe('behavior', () => {
@@ -86,12 +90,12 @@ describe('SocialShareMenu', () => {
     it('initializes local hooks', () => {
       when(useEmailSettings).expectCalledWith();
     });
-    it('initializes hook data ', () => {
-      when(useCourseData).expectCalledWith(props.cardId);
-      when(useCardSocialSettingsData).expectCalledWith(props.cardId);
-      when(useIsMasquerading).expectCalledWith();
-      when(useCourseTrackingEvent).expectCalledWith(track.socialShare, props.cardId, 'twitter');
-      when(useCourseTrackingEvent).expectCalledWith(track.socialShare, props.cardId, 'facebook');
+    it('initializes redux hook data ', () => {
+      when(reduxHooks.useCardEnrollmentData).expectCalledWith(props.cardId);
+      when(reduxHooks.useCardCourseData).expectCalledWith(props.cardId);
+      when(reduxHooks.useCardSocialSettingsData).expectCalledWith(props.cardId);
+      when(reduxHooks.useTrackCourseEvent).expectCalledWith(track.socialShare, props.cardId, 'twitter');
+      when(reduxHooks.useTrackCourseEvent).expectCalledWith(track.socialShare, props.cardId, 'facebook');
     });
   });
   describe('render', () => {
@@ -114,7 +118,9 @@ describe('SocialShareMenu', () => {
         if (isMasquerading) {
           it('is disabled', () => {
             const emailSettingsButton = screen.getByRole('button', { name: messages.emailSettings.defaultMessage });
+            expect(emailSettingsButton).toBeInTheDocument();
             expect(emailSettingsButton).toHaveAttribute('aria-disabled', 'true');
+            expect(emailSettingsButton).toHaveClass('disabled');
           });
         } else {
           it('is enabled', () => {
@@ -165,8 +171,8 @@ describe('SocialShareMenu', () => {
     });
     describe('masquerading', () => {
       beforeEach(() => {
-        mockHooks({ isEmailEnabled: true, isMasquerading: true });
-        renderComponent();
+        mockHooks({ isEmailEnabled: true });
+        renderComponent(true);
       });
       testEmailSettingsDropdown(true);
     });

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

@@ -1,8 +1,8 @@
-import track from 'tracking';
-import { useCourseData, useCourseTrackingEvent } from 'hooks';
 import { useState } from 'react';
-import { StrictDict } from 'utils';
-import { useInitializeLearnerHome } from 'data/hooks';
+
+import { reduxHooks } from '../../../../hooks';
+import track from '../../../../tracking';
+import { StrictDict } from '../../../../utils';
 
 export const state = StrictDict({
   isUnenrollConfirmVisible: (val) => useState(val), // eslint-disable-line
@@ -28,39 +28,21 @@ export const useEmailSettings = () => {
 };
 
 export const useHandleToggleDropdown = (cardId) => {
-  const trackCourseEvent = useCourseTrackingEvent(
+  const trackCourseEvent = reduxHooks.useTrackCourseEvent(
     track.course.courseOptionsDropdownClicked,
     cardId,
   );
   return (isOpen) => {
-    if (isOpen) { trackCourseEvent(); }
+    if (isOpen) {
+      trackCourseEvent();
+    }
   };
 };
 
-export const useCardSocialSettingsData = (cardId) => {
-  const { data: learnerHomeData } = useInitializeLearnerHome();
-  const courseData = useCourseData(cardId);
-  const socialShareSettings = learnerHomeData?.socialShareSettings;
-  const { socialShareUrl } = courseData?.course || {};
-  const defaultSettings = { isEnabled: false, shareUrl: '' };
-
-  if (!socialShareSettings) {
-    return { facebook: defaultSettings, twitter: defaultSettings };
-  }
-  const { facebook, twitter } = socialShareSettings;
-  const loadSettings = (target) => ({
-    isEnabled: target.isEnabled,
-    shareUrl: `${socialShareUrl}?${target.utmParams}`,
-  });
-  return { facebook: loadSettings(facebook), twitter: loadSettings(twitter) };
-};
-
 export const useOptionVisibility = (cardId) => {
-  const courseData = useCourseData(cardId);
-  const isEmailEnabled = courseData?.enrollment?.isEmailEnabled ?? false;
-  const isEnrolled = courseData?.enrollment?.isEnrolled ?? false;
-  const { twitter, facebook } = useCardSocialSettingsData(cardId);
-  const isEarned = courseData?.certificate?.isEarned ?? false;
+  const { isEnrolled, isEmailEnabled } = reduxHooks.useCardEnrollmentData(cardId);
+  const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
+  const { isEarned } = reduxHooks.useCardCertificateData(cardId);
 
   const shouldShowUnenrollItem = isEnrolled && !isEarned;
   const shouldShowDropdown = (

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

@@ -1,21 +1,20 @@
-import { useCourseData, useCourseTrackingEvent } from 'hooks';
-import { useInitializeLearnerHome } from 'data/hooks';
-import track from 'tracking';
-import { MockUseState } from 'testUtils';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/tracking';
+import { MockUseState } from '@src/testUtils';
 
 import * as hooks from './hooks';
 
-jest.mock('data/hooks', () => ({
-  useInitializeLearnerHome: jest.fn(),
-}));
-
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
-  useCourseTrackingEvent: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCertificateData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardSocialSettingsData: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
 }));
 
 const trackCourseEvent = jest.fn();
-useCourseTrackingEvent.mockReturnValue(trackCourseEvent);
+reduxHooks.useTrackCourseEvent.mockReturnValue(trackCourseEvent);
 const cardId = 'test-card-id';
 let out;
 
@@ -69,10 +68,12 @@ describe('CourseCardMenu hooks', () => {
   });
 
   describe('useHandleToggleDropdown', () => {
-    beforeEach(() => { out = hooks.useHandleToggleDropdown(cardId); });
+    beforeEach(() => {
+      out = hooks.useHandleToggleDropdown(cardId);
+    });
     describe('behavior', () => {
       it('initializes course event tracker with event name and card ID', () => {
-        expect(useCourseTrackingEvent).toHaveBeenCalledWith(
+        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
           track.course.courseOptionsDropdownClicked,
           cardId,
         );
@@ -89,61 +90,55 @@ describe('CourseCardMenu hooks', () => {
   });
 
   describe('useOptionVisibility', () => {
-    const mockHooks = (returnVals = {}) => {
-      useInitializeLearnerHome.mockReturnValue({
-        data: {
-          socialShareSettings: {
-            facebook: { isEnabled: !!returnVals.facebook?.isEnabled },
-            twitter: { isEnabled: !!returnVals.twitter?.isEnabled },
-          },
-        },
+    const mockReduxHooks = (returnVals = {}) => {
+      reduxHooks.useCardSocialSettingsData.mockReturnValueOnce({
+        facebook: { isEnabled: !!returnVals.facebook?.isEnabled },
+        twitter: { isEnabled: !!returnVals.twitter?.isEnabled },
       });
-      useCourseData.mockReturnValue({
-        enrollment: {
-          isEnrolled: !!returnVals.isEnrolled,
-          isEmailEnabled: !!returnVals.isEmailEnabled,
-        },
-        certificate: {
-          isEarned: !!returnVals.isEarned,
-        },
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+        isEnrolled: !!returnVals.isEnrolled,
+        isEmailEnabled: !!returnVals.isEmailEnabled,
+      });
+      reduxHooks.useCardCertificateData.mockReturnValueOnce({
+        isEarned: !!returnVals.isEarned,
       });
     };
     describe('shouldShowUnenrollItem', () => {
       it('returns true if enrolled and not earned', () => {
-        mockHooks({ isEnrolled: true });
+        mockReduxHooks({ isEnrolled: true });
         expect(hooks.useOptionVisibility(cardId).shouldShowUnenrollItem).toEqual(true);
       });
       it('returns false if not enrolled', () => {
-        mockHooks();
+        mockReduxHooks();
         expect(hooks.useOptionVisibility(cardId).shouldShowUnenrollItem).toEqual(false);
       });
       it('returns false if enrolled but also earned', () => {
-        mockHooks({ isEarned: true });
+        mockReduxHooks({ isEarned: true });
         expect(hooks.useOptionVisibility(cardId).shouldShowUnenrollItem).toEqual(false);
       });
     });
 
     describe('shouldShowDropdown', () => {
       it('returns false if not enrolled and both email and socials are disabled', () => {
-        mockHooks();
+        mockReduxHooks();
         expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(false);
       });
       it('returns false if enrolled but already earned, and both email and socials are disabled', () => {
-        mockHooks({ isEnrolled: true, isEarned: true });
+        mockReduxHooks({ isEnrolled: true, isEarned: true });
         expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(false);
       });
       it('returns true if either social is enabled', () => {
-        mockHooks({ facebook: { isEnabled: true } });
+        mockReduxHooks({ facebook: { isEnabled: true } });
         expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
-        mockHooks({ twitter: { isEnabled: true } });
+        mockReduxHooks({ twitter: { isEnabled: true } });
         expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
       });
       it('returns true if email is enabled', () => {
-        mockHooks({ isEmailEnabled: true });
+        mockReduxHooks({ isEmailEnabled: true });
         expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
       });
       it('returns true if enrolled and not earned', () => {
-        mockHooks({ isEnrolled: true });
+        mockReduxHooks({ isEnrolled: true });
         expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
       });
     });

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

@@ -1,12 +1,15 @@
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 import { Dropdown, Icon, IconButton } from '@openedx/paragon';
 import { MoreVert } from '@openedx/paragon/icons';
 
-import EmailSettingsModal from 'containers/EmailSettingsModal';
-import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
-import { useCourseData, useIsMasquerading } from 'hooks';
+import MasqueradeUserContext from '../../../../data/contexts/MasqueradeUserContext';
+import EmailSettingsModal from '../../../../containers/EmailSettingsModal';
+import UnenrollConfirmModal from '../../../../containers/UnenrollConfirmModal';
+import { reduxHooks } from '../../../../hooks';
+
 import SocialShareMenu from './SocialShareMenu';
 import {
   useEmailSettings,
@@ -23,15 +26,13 @@ export const testIds = {
 
 export const CourseCardMenu = ({ cardId }) => {
   const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
-
-  const isEmailEnabled = courseData?.enrollment?.isEmailEnabled ?? false;
 
   const emailSettings = useEmailSettings();
   const unenrollModal = useUnenrollData();
   const handleToggleDropdown = useHandleToggleDropdown(cardId);
   const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId);
-  const isMasquerading = useIsMasquerading();
+  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { isEmailEnabled } = reduxHooks.useCardEnrollmentData(cardId);
 
   if (!shouldShowDropdown) {
     return null;

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

@@ -1,21 +1,21 @@
 import { when } from 'jest-when';
-
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
-import { useCourseData, useIsMasquerading } from 'hooks';
+import { IntlProvider } from '@openedx/frontend-base';
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 import * as hooks from './hooks';
 import CourseCardMenu from '.';
 import messages from './messages';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
-  useIsMasquerading: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardEnrollmentData: jest.fn(),
+  },
 }));
 jest.mock('./SocialShareMenu', () => jest.fn(() => <div>SocialShareMenu</div>));
-jest.mock('containers/EmailSettingsModal', () => jest.fn(() => <div>EmailSettingsModal</div>));
-jest.mock('containers/UnenrollConfirmModal', () => jest.fn(() => <div>UnenrollConfirmModal</div>));
+jest.mock('@src/containers/EmailSettingsModal', () => jest.fn(() => <div>EmailSettingsModal</div>));
+jest.mock('@src/containers/UnenrollConfirmModal', () => jest.fn(() => <div>UnenrollConfirmModal</div>));
 jest.mock('./hooks', () => ({
   useEmailSettings: jest.fn(),
   useUnenrollData: jest.fn(),
@@ -67,19 +67,20 @@ const mockHooks = (returnVals = {}) => {
     },
     { isCardHook: true },
   );
-  mockHook(useIsMasquerading, !!returnVals.isMasquerading);
   mockHook(
-    useCourseData,
-    {
-      enrollment: {
-        isEmailEnabled: !!returnVals.isEmailEnabled,
-      },
-    },
+    reduxHooks.useCardEnrollmentData,
+    { isEmailEnabled: !!returnVals.isEmailEnabled },
     { isCardHook: true },
   );
 };
 
-const renderComponent = () => render(<IntlProvider locale="en"><CourseCardMenu {...props} /></IntlProvider>);
+const renderComponent = (isMasquerading = false) => render(
+  <IntlProvider locale="en">
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <CourseCardMenu {...props} />
+    </MasqueradeUserContext.Provider>
+  </IntlProvider>
+);
 
 describe('CourseCardMenu', () => {
   describe('hooks', () => {
@@ -89,10 +90,12 @@ describe('CourseCardMenu', () => {
     });
     it('initializes local hooks', () => {
       when(hooks.useEmailSettings).expectCalledWith();
+      when(hooks.useUnenrollData).expectCalledWith();
+      when(hooks.useHandleToggleDropdown).expectCalledWith(props.cardId);
+      when(hooks.useOptionVisibility).expectCalledWith(props.cardId);
     });
-    it('initializes hook data ', () => {
-      when(useIsMasquerading).expectCalledWith();
-      when(useCourseData).expectCalledWith(props.cardId);
+    it('initializes redux hook data ', () => {
+      when(reduxHooks.useCardEnrollmentData).expectCalledWith(props.cardId);
     });
   });
   describe('render', () => {
@@ -152,14 +155,13 @@ describe('CourseCardMenu', () => {
           });
           describe('masquerading', () => {
             it('renders but unenroll is disabled', async () => {
-              mockHooks({ ...hookProps, isMasquerading: true });
-              renderComponent();
+              mockHooks({ ...hookProps });
+              renderComponent(true);
 
               const user = userEvent.setup();
               const dropdown = screen.getByRole('button', { name: messages.dropdownAlt.defaultMessage });
               expect(dropdown).toBeInTheDocument();
               await user.click(dropdown);
-
               const unenrollOption = screen.getByRole('button', { name: messages.unenroll.defaultMessage });
               expect(unenrollOption).toBeInTheDocument();
               expect(unenrollOption).toHaveAttribute('aria-disabled', 'true');

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

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

src/containers/CourseCard/components/CourseCardTitle.jsx

@@ -1,17 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import track from 'tracking';
-import { useCourseData, useCourseTrackingEvent } from 'hooks';
+import track from '../../../tracking';
+import { reduxHooks } from '../../../hooks';
 import useActionDisabledState from './hooks';
 
 const { courseTitleClicked } = track.course;
 
 export const CourseCardTitle = ({ cardId }) => {
-  const courseData = useCourseData(cardId);
-  const courseName = courseData?.course?.courseName;
-  const homeUrl = courseData?.courseRun?.homeUrl;
-  const handleTitleClicked = useCourseTrackingEvent(
+  const { courseName } = reduxHooks.useCardCourseData(cardId);
+  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const handleTitleClicked = reduxHooks.useTrackCourseEvent(
     courseTitleClicked,
     cardId,
     homeUrl,

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

@@ -1,19 +1,22 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { useCourseData, useCourseTrackingEvent } from 'hooks';
-import track from 'tracking';
+import { reduxHooks } from '@src/hooks';
 import useActionDisabledState from './hooks';
 import CourseCardTitle from './CourseCardTitle';
+import track from '@src/tracking';
 
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   course: {
     courseTitleClicked: jest.fn().mockName('segment.courseTitleClicked'),
   },
 }));
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
-  useCourseTrackingEvent: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardCourseData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
 }));
 
 jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
@@ -29,11 +32,9 @@ describe('CourseCardTitle', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    useCourseData.mockReturnValue({
-      course: { courseName },
-      courseRun: { homeUrl },
-    });
-    useCourseTrackingEvent.mockReturnValue(handleTitleClick);
+    reduxHooks.useCardCourseData.mockReturnValue({ courseName });
+    reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
+    reduxHooks.useTrackCourseEvent.mockReturnValue(handleTitleClick);
   });
 
   it('renders course name as link when not disabled', async () => {
@@ -61,8 +62,9 @@ describe('CourseCardTitle', () => {
     useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
     render(<CourseCardTitle {...props} />);
 
-    expect(useCourseData).toHaveBeenCalledWith(props.cardId);
-    expect(useCourseTrackingEvent).toHaveBeenCalledWith(
+    expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
+    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
+    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
       track.course.courseTitleClicked,
       props.cardId,
       homeUrl,

src/containers/CourseCard/components/RelatedProgramsBadge/hooks.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 
-import { StrictDict } from 'utils';
-import { useCourseData } from 'hooks';
+import { StrictDict } from '@src/utils';
+import { reduxHooks } from '@src/hooks';
 
 import messages from './messages';
 import * as module from './hooks';
@@ -14,8 +14,7 @@ export const state = StrictDict({
 export const useRelatedProgramsBadgeData = ({ cardId }) => {
   const [isOpen, setIsOpen] = module.state.isOpen(false);
   const { formatMessage } = useIntl();
-  const courseData = useCourseData(cardId);
-  const numPrograms = courseData?.programs?.relatedPrograms?.length || 0;
+  const numPrograms = reduxHooks.useCardRelatedProgramsData(cardId).length;
   let programsMessage = '';
   if (numPrograms) {
     programsMessage = formatMessage(

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

@@ -1,19 +1,20 @@
-import { useIntl } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@openedx/frontend-base';
 
-import { MockUseState } from 'testUtils';
-import { useCourseData } from 'hooks';
+import { MockUseState } from '@src/testUtils';
+import { reduxHooks } from '@src/hooks';
 
 import * as hooks from './hooks';
 import messages from './messages';
 
-jest.mock('hooks', () => ({
-  useCourseData: jest.fn(),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardRelatedProgramsData: jest.fn(),
+  },
 }));
-
-jest.mock('@edx/frontend-platform/i18n', () => {
-  const { formatMessage } = jest.requireActual('testUtils');
+jest.mock('@openedx/frontend-base', () => {
+  const { formatMessage } = jest.requireActual('@src/testUtils');
   return {
-    ...jest.requireActual('@edx/frontend-platform/i18n'),
+    ...jest.requireActual('@openedx/frontend-base'),
     useIntl: () => ({
       formatMessage,
     }),
@@ -23,7 +24,7 @@ jest.mock('@edx/frontend-platform/i18n', () => {
 const cardId = 'test-card-id';
 
 const state = new MockUseState(hooks);
-const numPrograms = 27;
+let numPrograms = 27;
 
 describe('RelatedProgramsBadge hooks', () => {
   const { formatMessage } = useIntl();
@@ -33,14 +34,15 @@ describe('RelatedProgramsBadge hooks', () => {
   });
   beforeEach(() => {
     jest.clearAllMocks();
+    reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({
+      length: numPrograms,
+    });
   });
   describe('useRelatedProgramsBadgeData', () => {
     beforeEach(() => {
       state.mock();
-      useCourseData.mockReturnValue({
-        programs: {
-          relatedPrograms: new Array(numPrograms).fill({}),
-        },
+      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({
+        length: numPrograms,
       });
       out = hooks.useRelatedProgramsBadgeData({ cardId });
     });
@@ -64,12 +66,14 @@ describe('RelatedProgramsBadge hooks', () => {
       expect(out.numPrograms).toEqual(numPrograms);
     });
     test('returns empty programsMessage if no programs', () => {
-      useCourseData.mockReturnValueOnce({ programs: { relatedPrograms: [] } });
+      reduxHooks.useCardRelatedProgramsData.mockReset();
+      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 0 });
       out = hooks.useRelatedProgramsBadgeData({ cardId });
       expect(out.programsMessage).toEqual('');
     });
     test('returns badgeLabelSingular programsMessage if 1 programs', () => {
-      useCourseData.mockReturnValueOnce({ programs: { relatedPrograms: [{}] } });
+      reduxHooks.useCardRelatedProgramsData.mockReset();
+      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 1 });
       out = hooks.useRelatedProgramsBadgeData({ cardId });
       expect(out.programsMessage).toEqual(formatMessage(
         messages.badgeLabelSingular,

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

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { Button, Icon } from '@openedx/paragon';
 import { Program } from '@openedx/paragon/icons';
 
-import RelatedProgramsBadgeModal from 'containers/RelatedProgramsModal';
+import RelatedProgramsBadgeModal from '@src/containers/RelatedProgramsModal';
 import useRelatedProgramsBadgeData from './hooks';
 
 export const RelatedProgramsBadge = ({ cardId }) => {

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

@@ -1,10 +1,9 @@
 import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
-
+import { IntlProvider } from '@openedx/frontend-base';
+import RelatedProgramsBadge from '../RelatedProgramsBadge';
 import useRelatedProgramsBadge from './hooks';
-import RelatedProgramsBadge from '.';
 
-jest.mock('containers/RelatedProgramsModal', () => 'RelatedProgramsModal');
+jest.mock('@src/containers/RelatedProgramsModal', () => 'RelatedProgramsModal');
 jest.mock('./hooks', () => jest.fn());
 
 const hookProps = {
@@ -13,7 +12,7 @@ const hookProps = {
   closeModal: jest.fn().mockName('useRelatedProgramsBadge.closeModal'),
   numPrograms: 3,
   programsMessage: 'useRelatedProgramsBadge.programsMessage',
-};
+}
 
 const cardId = 'test-card-id';