fix: fixed module button href (#508)

Remove edx-Specific reference from email confirmation banner.

.dockerignore

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

.env

@@ -0,0 +1,44 @@
+NODE_ENV='production'
+NODE_PATH=./src
+BASE_URL=''
+LMS_BASE_URL=''
+ECOMMERCE_BASE_URL=''
+LOGIN_URL=''
+LOGOUT_URL=''
+CSRF_TOKEN_API_PATH=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+DATA_API_BASE_URL=''
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+ACCESS_TOKEN_COOKIE_NAME=''
+NEW_RELIC_APP_ID=''
+NEW_RELIC_LICENSE_KEY=''
+SITE_NAME=''
+MARKETING_SITE_BASE_URL=''
+SUPPORT_URL=''
+CONTACT_URL=''
+OPEN_SOURCE_URL=''
+TERMS_OF_SERVICE_URL=''
+PRIVACY_POLICY_URL=''
+FACEBOOK_URL=''
+TWITTER_URL=''
+YOU_TUBE_URL=''
+LINKED_IN_URL=''
+REDDIT_URL=''
+APPLE_APP_STORE_URL=''
+GOOGLE_PLAY_URL=''
+ENTERPRISE_MARKETING_URL=''
+ENTERPRISE_MARKETING_UTM_SOURCE=''
+ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
+LEARNING_BASE_URL=''
+ZENDESK_KEY=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL=''
+ACCOUNT_PROFILE_URL=''
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+OPTIMIZELY_FULL_STACK_SDK_KEY=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false

.env.development

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

.env.test

@@ -0,0 +1,49 @@
+NODE_ENV='test'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
+CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
+REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME=localhost
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+SUPPORT_URL='http://localhost:18000/support'
+CONTACT_URL='http://localhost:18000/contact'
+OPEN_SOURCE_URL='http://localhost:18000/openedx'
+TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+FACEBOOK_URL='https://www.facebook.com'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'
+LINKED_IN_URL='https://www.linkedin.com'
+REDDIT_URL='https://www.reddit.com'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+ENTERPRISE_MARKETING_URL='http://example.com'
+ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
+ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+LEARNING_BASE_URL='http://localhost:2000'
+ZENDESK_KEY='test-zendesk-key'
+HOTJAR_APP_ID='hot-jar-app-id'
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL='http://account-settings-url.test'
+ACCOUNT_PROFILE_URL='http://account-profile-url.test'
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+OPTIMIZELY_FULL_STACK_SDK_KEY='SDK Key'
+ENABLE_EDX_PERSONAL_DASHBOARD=true

.eslintignore

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

.eslintrc.js

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

.gitattributes

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

.github/CODEOWNERS

@@ -1 +1,8 @@
+# Root app is developed and owned by Aurora
 *   @openedx/2U-aperture
+
+# WIDGETS and experiments are developed and owned by separate teams below
+
+# Recommendations panel
+/src/widgets/RecommendationsPanel       @openedx/2U-vanguards
+/src/widgets/LookingForChallengeWidget  @openedx/2U-vanguards

.github/dependabot.yml

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

.github/workflows/ci.yml

@@ -10,16 +10,18 @@ on:
 
 jobs:
   tests:
-    runs-on: ubuntu-latest
-
+    runs-on: ubuntu-20.04
     steps:
     - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
+
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
 
     - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
       with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ env.NODE_VER }}
 
     - name: Install dependencies
       run: npm ci
@@ -37,7 +39,21 @@ jobs:
       run: npm run build
 
     - name: Run Coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v3
+
+    - name: Send failure notification
+      if: ${{ failure() }}
+      uses: dawidd6/action-send-mail@v3
       with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+        server_address: email-smtp.us-east-1.amazonaws.com
+        server_port: 465
+        username: ${{ secrets.EDX_SMTP_USERNAME }}
+        password: ${{ secrets.EDX_SMTP_PASSWORD }}
+        subject: CI workflow failed in ${{github.repository}}
+        to: masters-grades@edx.org,aperture@2u-internal.opsgenie.net
+        from: github-actions <github-actions@edx.org>
+        nodemailerlog: true
+        nodemailerdebug: true
+        body: CI workflow in ${{github.repository}} failed!
+          For details see "github.com/${{ github.repository }}/actions/runs/${{ github.run_id
+          }}"

.github/workflows/npm-publish.yml

@@ -0,0 +1,35 @@
+name: Release CI
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VER }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create Build
+        run: npm run build
+
+      - name: Release Package
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npm semantic-release

.gitignore

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

.husky/pre-push

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

.npmignore

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

.nvmrc

@@ -1 +1 @@
-24
+18.20

.releaserc

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

Makefile

@@ -24,19 +24,6 @@ test.npm.%: validate-no-uncommitted-package-lock-changes
 requirements:  ## install ci requirements
 	npm ci
 
-clean:
-	rm -rf dist
-
-build: clean
-	tsc --project tsconfig.build.json
-	tsc-alias -p tsconfig.build.json
-	find src -type f \( -name '*.scss' -o -name '*.png' -o -name '*.svg' \) -exec sh -c '\
-	  for f in "$$@"; do \
-	    d="dist/$${f#src/}"; \
-	    mkdir -p "$$(dirname "$$d")"; \
-	    cp "$$f" "$$d"; \
-	  done' sh {} +
-
 i18n.extract:
 	# Pulling display strings from .jsx files into .json files...
 	rm -rf $(transifex_temp)
@@ -58,11 +45,12 @@ pull_translations:
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
       && atlas pull $(ATLAS_OPTIONS) \
-               translations/frontend-base/src/i18n/messages:frontend-base \
+               translations/frontend-platform/src/i18n/messages:frontend-platform \
                translations/paragon/src/i18n/messages:paragon \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
                translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard
 
-	$(intl_imports) frontend-base paragon frontend-app-learner-dashboard
+	$(intl_imports) frontend-platform paragon frontend-component-footer frontend-app-learner-dashboard
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.rst

@@ -18,7 +18,7 @@ frontend-app-learner-dashboard
 The Learner Home app is a microfrontend (MFE) course listing experience for the Open edX Learning Management System
 (LMS).  This experience was designed to provide a clean and functional interface to allow learners to view all of their
 open enrollments, as well as take relevant actions on those enrollments.  It also serves as host to a number of exposed
-"widget" containers to provide upsell and discovery widgets as sidebar components.
+"widget" containers to provide upsell and discovery widgets as sidebar/footer components.
 
 Quickstart
 ----------
@@ -30,10 +30,31 @@ To start the MFE and enable the feature in LMS:
 From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not
 already, and then redirected to your home page.
 
-Widgets
+Plugins
 -------
-This MFE can be customized with widgets.  The parts of this MFE that can be customized in that manner are documented
-`here </src/slots>`_.
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
+Contributing
+------------
+
+A core goal of this app is to provide a clean experimentation interface.  To promote this end, we have provided a
+silo'ed code directory at ``src/widgets`` in which contributors should add their custom widget components.  In order to
+ensure our ability to maintain the code stability of the app, the code for these widgets should be strictly contained
+within the bounds of that directory.
+
+Once written, the widgets can be configured into one of our widget containers at ``src/containers/WidgetContainers``.
+This can include conditional logic, as well as Optimizely triggers. It is important to note that our integration tests
+will isolate and ignore these containers, and thus testing your widget is the response of the creator/maintainer of the
+widget itself.
+
+Some guidelines for writing widgets:
+
+* Code for the widget should be strictly confined to the ``src/widgets`` directory.
+* You can load data from the redux store, but should not add or modify fields in that structure.
+* Network events should be managed in component hooks, though can use our ``data/constants/requests:requestStates`` for
+  ease of tracking the request states.
 
 License
 -------

app.d.ts

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

babel.config.js

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

catalog-info.yml

@@ -17,7 +17,6 @@ metadata:
     openedx.org/arch-interest-groups: ""
     # This can be multiple comma-separated projects.
     openedx.org/add-to-projects: "openedx:23"
-    openedx.org/release: "master"
 spec:
   type: 'service'
   lifecycle: 'production'

eslint.config.js

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

example.env.config.js

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

jest.config.js

@@ -1,22 +1,18 @@
-const { createConfig } = require('@openedx/frontend-base/tools');
+const { createConfig } = require('@openedx/frontend-build');
 
-module.exports = createConfig('test', {
+module.exports = createConfig('jest', {
   setupFilesAfterEnv: [
     'jest-expect-message',
     '<rootDir>/src/setupTest.jsx',
   ],
+  modulePaths: ['<rootDir>/src/'],
   coveragePathIgnorePatterns: [
     'src/segment.js',
     'src/postcss.config.js',
     'testUtils', // don't unit test jest mocking tools
     'src/data/services/lms/fakeData', // don't unit test mock data
     'src/test', // don't unit test integration test utils
-    'src/__mocks__',
   ],
-  moduleNameMapper: {
-    // 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',
 });

openedx.yaml

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

package.json

@@ -1,90 +1,98 @@
 {
-  "name": "@openedx/frontend-app-learner-dashboard",
-  "version": "1.0.0-alpha.6",
+  "name": "@edx/frontend-app-learner-dashboard",
+  "version": "0.0.1",
   "description": "",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
   },
-  "exports": {
-    ".": "./dist/index.js",
-    "./app.scss": "./dist/app.scss"
-  },
-  "files": [
-    "/dist"
-  ],
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
   "scripts": {
-    "build": "make build",
-    "clean": "make clean",
-    "dev": "PORT=1996 PUBLIC_PATH=/learner-dashboard openedx dev",
-    "i18n_extract": "openedx formatjs extract",
-    "lint": "openedx lint .",
-    "lint:fix": "openedx lint --fix .",
-    "prepack": "npm run build",
-    "test": "openedx test --coverage --passWithNoTests"
+    "build": "fedx-scripts webpack",
+    "i18n_extract": "fedx-scripts formatjs extract",
+    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
+    "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
+    "semantic-release": "semantic-release",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
+    "quality": "npm run lint-fix && npm run test",
+    "watch-tests": "jest --watch",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "prepare": "husky install"
   },
-  "author": "Open edX",
+  "author": "edX",
   "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-learner-dashboard#readme",
+  "homepage": "",
   "publishConfig": {
     "access": "public"
   },
-  "bugs": {
-    "url": "https://github.com/openedx/frontend-app-learner-dashboard/issues"
-  },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/browserslist-config": "^1.1.0",
+    "@edx/frontend-enterprise-hotjar": "3.0.0",
+    "@edx/frontend-platform": "^7.1.4",
+    "@edx/openedx-atlas": "^0.6.0",
+    "@edx/react-unit-test-utils": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^2.0.0",
+    "@openedx/frontend-plugin-framework": "^1.1.2",
+    "@openedx/frontend-slot-footer": "^1.0.2",
+    "@openedx/paragon": "^22.2.2",
+    "@optimizely/react-sdk": "^2.9.2",
+    "@redux-beacon/segment": "^1.1.0",
+    "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.28.0",
     "classnames": "^2.3.1",
-    "filesize": "^10.0.0",
+    "core-js": "3.16.2",
+    "dompurify": "^2.3.1",
+    "email-prop-type": "^3.0.1",
+    "file-saver": "^2.0.5",
+    "filesize": "^8.0.6",
     "font-awesome": "4.7.0",
+    "history": "5.0.1",
+    "html-react-parser": "^1.3.0",
+    "jest": "^29.7.0",
+    "jest-when": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "prop-types": "15.8.1",
+    "prop-types": "^15.7.2",
+    "query-string": "7.0.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-helmet": "^6.1.0",
+    "react-intl": "6.4.7",
+    "react-pdf": "^7.0.0",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "6.15.0",
     "react-share": "^4.4.0",
+    "react-zendesk": "^0.1.13",
+    "redux": "4.1.1",
+    "redux-beacon": "^2.1.0",
+    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.2",
-    "reselect": "^4.0.0"
+    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "^0.13.9",
+    "reselect": "^4.0.0",
+    "universal-cookie": "^4.0.4",
+    "util": "^0.12.4",
+    "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/browserslist-config": "^1.5.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
+    "@edx/reactifex": "^2.1.1",
+    "@openedx/frontend-build": "13.1.4",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "axios-mock-adapter": "^1.20.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "fetch-mock": "^9.11.0",
+    "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-expect-message": "^1.1.3",
-    "jest-when": "^3.6.0",
-    "react-dev-utils": "^12.0.0",
-    "react-test-renderer": "^18.3.1",
+    "jest-expect-message": "^1.0.2",
+    "react-dev-utils": "^11.0.4",
+    "react-test-renderer": "^17.0.2",
     "redux-mock-store": "^1.5.4",
-    "tsc-alias": "^1.8.16"
-  },
-  "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.13",
-    "@openedx/paragon": "^23",
-    "@tanstack/react-query": "^5",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-redux": "^8",
-    "react-router": "^6",
-    "react-router-dom": "^6",
-    "redux": "^4"
+    "semantic-release": "^20.1.3"
   }
 }

public/index.html

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

public/robots.txt

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

site.config.dev.tsx

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

site.config.test.tsx

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

src/App.jsx

@@ -0,0 +1,119 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
+import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
+
+import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
+import FooterSlot from '@openedx/frontend-slot-footer';
+import { Alert } from '@openedx/paragon';
+
+import { RequestKeys } from 'data/constants/requests';
+import store from 'data/store';
+import {
+  selectors,
+  actions,
+} from 'data/redux';
+import { reduxHooks } from 'hooks';
+import Dashboard from 'containers/Dashboard';
+import ZendeskFab from 'components/ZendeskFab';
+import { ExperimentProvider } from 'ExperimentContext';
+
+import track from 'tracking';
+
+import fakeData from 'data/services/lms/fakeData/courses';
+
+import AppWrapper from 'containers/WidgetContainers/AppWrapper';
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+
+import { getConfig } from '@edx/frontend-platform';
+import messages from './messages';
+import './App.scss';
+
+export const App = () => {
+  const { authenticatedUser } = React.useContext(AppContext);
+  const { formatMessage } = useIntl();
+  const isFailed = {
+    initialize: reduxHooks.useRequestIsFailed(RequestKeys.initialize),
+    refreshList: reduxHooks.useRequestIsFailed(RequestKeys.refreshList),
+  };
+  const hasNetworkFailure = isFailed.initialize || isFailed.refreshList;
+  const { supportEmail } = reduxHooks.usePlatformSettingsData();
+  const loadData = reduxHooks.useLoadData();
+
+  const optimizelyScript = () => {
+    if (getConfig().OPTIMIZELY_URL) {
+      return <script src={getConfig().OPTIMIZELY_URL} />;
+    } if (getConfig().OPTIMIZELY_PROJECT_ID) {
+      return (
+        <script
+          src={`${getConfig().MARKETING_SITE_BASE_URL}/optimizelyjs/${getConfig().OPTIMIZELY_PROJECT_ID}.js`}
+        />
+      );
+    }
+    return null;
+  };
+
+  React.useEffect(() => {
+    if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
+      window.loadEmptyData = () => {
+        loadData({ ...fakeData.globalData, courses: [] });
+      };
+      window.loadMockData = () => {
+        loadData({
+          ...fakeData.globalData,
+          courses: [
+            ...fakeData.courseRunData,
+            ...fakeData.entitlementData,
+          ],
+        });
+      };
+      window.store = store;
+      window.selectors = selectors;
+      window.actions = actions;
+      window.track = track;
+    }
+    if (getConfig().HOTJAR_APP_ID) {
+      try {
+        initializeHotjar({
+          hotjarId: getConfig().HOTJAR_APP_ID,
+          hotjarVersion: getConfig().HOTJAR_VERSION,
+          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
+        });
+      } catch (error) {
+        logError(error);
+      }
+    }
+  }, [authenticatedUser, loadData]);
+  return (
+    <>
+      <Helmet>
+        <title>{formatMessage(messages.pageTitle)}</title>
+        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
+        {optimizelyScript()}
+      </Helmet>
+      <div>
+        <AppWrapper>
+          <LearnerDashboardHeader />
+          <main>
+            {hasNetworkFailure
+              ? (
+                <Alert variant="danger">
+                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+                </Alert>
+              ) : (
+                <ExperimentProvider>
+                  <Dashboard />
+                </ExperimentProvider>
+              )}
+          </main>
+        </AppWrapper>
+        <FooterSlot />
+        <ZendeskFab />
+      </div>
+    </>
+  );
+};
+
+export default App;

src/App.scss

@@ -0,0 +1,68 @@
+// frontend-app-*/src/index.scss
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@openedx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome";
+
+$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+
+@import "~@edx/frontend-component-footer/dist/_footer";
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.alert.alert-info .alert-icon {
+  color: black;
+}
+
+#root {
+  // Removing a odd 1.5 scaling on checkboxes.:
+  input[type=checkbox] {
+    transform: none;
+  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+  }
+
+  header {
+    flex: 0 0 auto;
+
+    .logo {
+      display: block;
+      box-sizing: content-box;
+      position: relative;
+      top: 0.1em;
+      height: 1.75rem;
+      margin-right: 1rem;
+      img {
+        display: block;
+        height: 100%;
+      }
+    }
+  }
+
+  footer {
+    flex: 0;
+  }
+}
+
+#paragon-portal-root {
+  .pgn__modal-layer {
+    .pgn__modal-close-container {
+      right: 1rem !important;
+    }
+  }
+  .confirm-modal .pgn__modal-body {
+    overflow: hidden;
+  }
+}

src/App.test.jsx

@@ -0,0 +1,163 @@
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
+
+import { RequestKeys } from 'data/constants/requests';
+import { reduxHooks } from 'hooks';
+import Dashboard from 'containers/Dashboard';
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+import AppWrapper from 'containers/WidgetContainers/AppWrapper';
+import { ExperimentProvider } from 'ExperimentContext';
+import { App } from './App';
+import messages from './messages';
+
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'Footer' }));
+
+jest.mock('containers/Dashboard', () => 'Dashboard');
+jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
+jest.mock('components/ZendeskFab', () => 'ZendeskFab');
+jest.mock('ExperimentContext', () => ({
+  ExperimentProvider: 'ExperimentProvider',
+}));
+jest.mock('containers/WidgetContainers/AppWrapper', () => 'AppWrapper');
+jest.mock('data/redux', () => ({
+  selectors: 'redux.selectors',
+  actions: 'redux.actions',
+  thunkActions: 'redux.thunkActions',
+}));
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useRequestIsFailed: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+    useLoadData: jest.fn(),
+  },
+}));
+jest.mock('data/store', () => 'data/store');
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({})),
+}));
+
+const loadData = jest.fn();
+reduxHooks.useLoadData.mockReturnValue(loadData);
+
+let el;
+
+const supportEmail = 'test-support-url';
+reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+
+describe('App router component', () => {
+  const { formatMessage } = useIntl();
+  describe('component', () => {
+    const runBasicTests = () => {
+      test('snapshot', () => { expect(el.snapshot).toMatchSnapshot(); });
+      it('displays title in helmet component', () => {
+        const control = el.instance
+          .findByType(Helmet)[0]
+          .findByType('title')[0];
+        expect(control.children[0].el).toEqual(formatMessage(messages.pageTitle));
+      });
+      it('displays learner dashboard header', () => {
+        expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
+      });
+      it('wraps the header and main components in an AppWrapper widget container', () => {
+        const container = el.instance.findByType(AppWrapper)[0];
+        expect(container.children[0].type).toEqual('LearnerDashboardHeader');
+        expect(container.children[1].type).toEqual('main');
+      });
+    };
+    describe('no network failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({});
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely url', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ OPTIMIZELY_URL: 'fake.url' });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
+      });
+    });
+    describe('no network failure with optimizely project id', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        getConfig.mockReturnValue({ OPTIMIZELY_PROJECT_ID: 'fakeId' });
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
+      });
+    });
+    describe('initialize failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        getConfig.mockReturnValue({});
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const alert = main.children[0];
+        expect(alert.type).toEqual('Alert');
+        expect(alert.children.length).toEqual(1);
+        const errorPage = alert.children[0];
+        expect(errorPage.type).toEqual('ErrorPage');
+        expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail }));
+      });
+    });
+    describe('refresh failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
+        getConfig.mockReturnValue({});
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const alert = main.children[0];
+        expect(alert.type).toEqual('Alert');
+        expect(alert.children.length).toEqual(1);
+        const errorPage = alert.children[0];
+        expect(errorPage.type).toEqual('ErrorPage');
+        expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail }));
+      });
+    });
+  });
+});

src/ExperimentContext.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { StrictDict } from 'utils';
+import api from 'widgets/ProductRecommendations/api';
+import * as module from './ExperimentContext';
+
+export const state = StrictDict({
+  experiment: (val) => React.useState(val), // eslint-disable-line
+  countryCode: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useCountryCode = (setCountryCode) => {
+  React.useEffect(() => {
+    api
+      .fetchRecommendationsContext()
+      .then((response) => {
+        setCountryCode(response.data.countryCode);
+      })
+      .catch(() => {
+        setCountryCode('');
+      });
+    /* eslint-disable */
+  }, []);
+};
+
+export const ExperimentContext = React.createContext();
+
+export const ExperimentProvider = ({ children }) => {
+  const [countryCode, setCountryCode] = module.state.countryCode(null);
+  const [experiment, setExperiment] = module.state.experiment({
+    isExperimentActive: false,
+    inRecommendationsVariant: true,
+  });
+
+  module.useCountryCode(setCountryCode);
+  const { width } = useWindowSize();
+  const isMobile = width < breakpoints.small.minWidth;
+
+  const contextValue = React.useMemo(
+    () => ({
+      experiment,
+      countryCode,
+      setExperiment,
+      setCountryCode,
+      isMobile,
+    }),
+    [experiment, countryCode, setExperiment, setCountryCode, isMobile]
+  );
+
+  return (
+    <ExperimentContext.Provider value={contextValue}>
+      {children}
+    </ExperimentContext.Provider>
+  );
+};
+
+export const useExperimentContext = () => React.useContext(ExperimentContext);
+
+ExperimentProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default { useCountryCode, useExperimentContext };

src/ExperimentContext.test.jsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import { waitFor, render } from '@testing-library/react';
+import { useWindowSize } from '@openedx/paragon';
+
+import api from 'widgets/ProductRecommendations/api';
+import { MockUseState } from 'testUtils';
+
+import * as experiment from 'ExperimentContext';
+
+const state = new MockUseState(experiment);
+
+jest.unmock('react');
+jest.spyOn(React, 'useEffect').mockImplementation((cb, prereqs) => ({ useEffect: { cb, prereqs } }));
+
+jest.mock('widgets/ProductRecommendations/api', () => ({
+  fetchRecommendationsContext: jest.fn(),
+}));
+
+describe('experiments context', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('useCountryCode', () => {
+    describe('behaviour', () => {
+      describe('useEffect call', () => {
+        let calls;
+        let cb;
+        const setCountryCode = jest.fn();
+        const successfulFetch = { data: { countryCode: 'ZA' } };
+
+        beforeEach(() => {
+          experiment.useCountryCode(setCountryCode);
+
+          ({ calls } = React.useEffect.mock);
+          [[cb]] = calls;
+        });
+
+        it('calls useEffect once', () => {
+          expect(calls.length).toEqual(1);
+        });
+        describe('successful fetch', () => {
+          it('sets the country code', async () => {
+            let resolveFn;
+            api.fetchRecommendationsContext.mockReturnValueOnce(
+              new Promise((resolve) => {
+                resolveFn = resolve;
+              }),
+            );
+
+            cb();
+            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
+            expect(setCountryCode).not.toHaveBeenCalled();
+            resolveFn(successfulFetch);
+            await waitFor(() => {
+              expect(setCountryCode).toHaveBeenCalledWith(successfulFetch.data.countryCode);
+            });
+          });
+        });
+        describe('unsuccessful fetch', () => {
+          it('sets the country code to an empty string', async () => {
+            let rejectFn;
+            api.fetchRecommendationsContext.mockReturnValueOnce(
+              new Promise((resolve, reject) => {
+                rejectFn = reject;
+              }),
+            );
+            cb();
+            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
+            expect(setCountryCode).not.toHaveBeenCalled();
+            rejectFn();
+            await waitFor(() => {
+              expect(setCountryCode).toHaveBeenCalledWith('');
+            });
+          });
+        });
+      });
+    });
+  });
+
+  describe('ExperimentProvider', () => {
+    const { ExperimentProvider } = experiment;
+
+    const TestComponent = () => {
+      const {
+        experiment: exp,
+        setExperiment,
+        countryCode,
+        setCountryCode,
+        isMobile,
+      } = experiment.useExperimentContext();
+
+      expect(exp.isExperimentActive).toBeFalsy();
+      expect(exp.inRecommendationsVariant).toBeTruthy();
+      expect(countryCode).toBeNull();
+      expect(isMobile).toBe(false);
+      expect(setExperiment).toBeDefined();
+      expect(setCountryCode).toBeDefined();
+
+      return (
+        <div />
+      );
+    };
+
+    it('allows access to child components with the context stateful values', () => {
+      const countryCodeSpy = jest.spyOn(experiment, 'useCountryCode').mockImplementationOnce(() => {});
+      useWindowSize.mockImplementationOnce(() => ({ width: 577, height: 943 }));
+
+      state.mock();
+
+      render(
+        <ExperimentProvider>
+          <TestComponent />
+        </ExperimentProvider>,
+      );
+
+      expect(countryCodeSpy).toHaveBeenCalledWith(state.setState.countryCode);
+      state.expectInitializedWith(state.keys.countryCode, null);
+      state.expectInitializedWith(state.keys.experiment, { isExperimentActive: false, inRecommendationsVariant: true });
+    });
+  });
+});

src/Main.jsx

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

src/__mocks__/file.js

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

src/__mocks__/svg.js

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

src/__snapshots__/App.test.jsx.snap

@@ -0,0 +1,160 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App router component component initialize failure snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <Alert
+          variant="danger"
+        >
+          <ErrorPage
+            message="If you experience repeated failures, please email support at test-support-url"
+          />
+        </Alert>
+      </main>
+    </AppWrapper>
+    <FooterSlot />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component no network failure snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
+    <FooterSlot />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+    <script
+      src="undefined/optimizelyjs/fakeId.js"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
+    <FooterSlot />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component no network failure with optimizely url snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+    <script
+      src="fake.url"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
+    <FooterSlot />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;
+
+exports[`App router component component refresh failure snapshot 1`] = `
+<Fragment>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+    <link
+      rel="shortcut icon"
+      type="image/x-icon"
+    />
+  </HelmetWrapper>
+  <div>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <Alert
+          variant="danger"
+        >
+          <ErrorPage
+            message="If you experience repeated failures, please email support at test-support-url"
+          />
+        </Alert>
+      </main>
+    </AppWrapper>
+    <FooterSlot />
+    <ZendeskFab />
+  </div>
+</Fragment>
+`;

src/__snapshots__/index.test.jsx.snap

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

src/app.scss

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

src/app.ts

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

src/assets/top_stripe.svg

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

src/components/Banner.test.jsx

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

src/components/NoticesWrapper/api.js

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

src/components/NoticesWrapper/api.test.js

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

src/components/NoticesWrapper/hooks.js

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

src/components/NoticesWrapper/hooks.test.js

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

src/components/NoticesWrapper/index.jsx

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

src/components/NoticesWrapper/index.test.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import useNoticesWrapperData from './hooks';
+import NoticesWrapper from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = { isRedirected: false };
+useNoticesWrapperData.mockReturnValue(hookProps);
+
+let el;
+const children = [<b key={1}>some</b>, <i key={2}>children</i>];
+describe('NoticesWrapper component', () => {
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(useNoticesWrapperData).toHaveBeenCalledWith();
+    });
+  });
+  describe('output', () => {
+    it('does not show children if redirected', () => {
+      useNoticesWrapperData.mockReturnValueOnce({ isRedirected: true });
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(el.instance.children.length).toEqual(0);
+    });
+    it('shows children if not redirected', () => {
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(el.instance.children.length).toEqual(2);
+      expect(el.instance.children[0].type).toEqual(shallow(children[0]).type);
+      expect(el.instance.props).toEqual(shallow(children[0]).props);
+      expect(el.instance.children[1].type).toEqual(shallow(children[1]).type);
+      expect(el.instance.props).toEqual(shallow(children[1]).props);
+    });
+  });
+});

src/components/ZendeskFab/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ZendeskFab snapshot 1`] = `
+<Zendesk
+  cookies={true}
+  defer={true}
+  webWidget={
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
+            "*": "edX Support",
+          },
+          "url": "https://edx-cdn.org/v3/prod/favicon.ico",
+        },
+        "contactOnlyAfterQuery": true,
+        "suppress": false,
+        "title": Object {
+          "*": "edX Support",
+        },
+      },
+      "chat": Object {
+        "departments": Object {
+          "enabled": Array [
+            "account settings",
+            "billing and payments",
+            "certificates",
+            "deadlines",
+            "errors and technical issues",
+            "other",
+            "proctoring",
+          ],
+        },
+        "suppress": false,
+      },
+      "contactForm": Object {
+        "attachments": true,
+        "selectTicketForm": Object {
+          "*": "Please choose your request type:",
+        },
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
+                "id": "description",
+                "prefill": Object {
+                  "*": "",
+                },
+              },
+            ],
+            "id": 360003368814,
+            "subject": false,
+          },
+        ],
+      },
+      "contactOptions": Object {
+        "enabled": false,
+      },
+      "helpCenter": Object {
+        "originalArticleButton": true,
+      },
+    }
+  }
+/>
+`;

src/components/ZendeskFab/index.jsx

@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import Zendesk from 'react-zendesk';
+import messages from './messages';
+
+const ZendeskFab = () => {
+  const { formatMessage } = useIntl();
+  const setting = {
+    cookies: true,
+    webWidget: {
+      contactOptions: {
+        enabled: false,
+      },
+      chat: {
+        suppress: false,
+        departments: {
+          enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring'],
+        },
+      },
+      contactForm: {
+        ticketForms: [
+          {
+            id: 360003368814,
+            subject: false,
+            fields: [{ id: 'description', prefill: { '*': '' } }],
+          },
+        ],
+        selectTicketForm: {
+          '*': formatMessage(messages.selectTicketForm),
+        },
+        attachments: true,
+      },
+      helpCenter: {
+        originalArticleButton: true,
+      },
+      answerBot: {
+        suppress: false,
+        contactOnlyAfterQuery: true,
+        title: { '*': formatMessage(messages.supportTitle) },
+        avatar: {
+          url: 'https://edx-cdn.org/v3/prod/favicon.ico',
+          name: { '*': formatMessage(messages.supportTitle) },
+        },
+      },
+    },
+  };
+
+  return (
+    <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
+  );
+};
+
+export default ZendeskFab;

src/components/ZendeskFab/index.test.jsx

@@ -0,0 +1,12 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import ZendeskFab from '.';
+
+jest.mock('react-zendesk', () => 'Zendesk');
+
+describe('ZendeskFab', () => {
+  test('snapshot', () => {
+    const wrapper = shallow(<ZendeskFab />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+  });
+});

src/components/ZendeskFab/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  supportTitle: {
+    id: 'zendesk.supportTitle',
+    description: 'Title for the support button',
+    defaultMessage: 'edX Support',
+  },
+  selectTicketForm: {
+    id: 'zendesk.selectTicketForm',
+    description: 'Select ticket form',
+    defaultMessage: 'Please choose your request type:',
+  },
+});
+
+export default messages;

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

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Banner snapshot renders default banner 1`] = `
+<Alert
+  className="mb-0"
+  icon={[MockFunction icons.Info]}
+  variant="info"
+>
+  Hello, world!
+</Alert>
+`;
+
+exports[`Banner snapshot renders with custom class 1`] = `
+<Alert
+  className="custom-class"
+  icon={[MockFunction icons.Info]}
+  variant="info"
+>
+  Hello, world!
+</Alert>
+`;
+
+exports[`Banner snapshot renders with variants 1`] = `
+<Alert
+  className="mb-0"
+  icon={[MockFunction icons.Info]}
+  variant="success"
+>
+  Hello, world!
+</Alert>
+`;

src/config/index.js

@@ -0,0 +1,25 @@
+const configuration = {
+  // BASE_URL: process.env.BASE_URL,
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  ECOMMERCE_BASE_URL: process.env.ECOMMERCE_BASE_URL,
+  // LOGIN_URL: process.env.LOGIN_URL,
+  // LOGOUT_URL: process.env.LOGOUT_URL,
+  // CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+  // REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+  // DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
+  // SECURE_COOKIES: process.env.NODE_ENV !== 'development',
+  SEGMENT_KEY: process.env.SEGMENT_KEY,
+  // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+  LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN || '',
+  ZENDESK_KEY: process.env.ZENDESK_KEY,
+  SUPPORT_URL: process.env.SUPPORT_URL || null,
+  ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
+  CAREER_LINK_URL: process.env.CAREER_LINK_URL || null,
+  LOGO_URL: process.env.LOGO_URL,
+  ENABLE_EDX_PERSONAL_DASHBOARD: process.env.ENABLE_EDX_PERSONAL_DASHBOARD === 'true',
+};
+
+const features = {};
+
+export { configuration, features };

src/constants.ts

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

src/containers/CourseCard/CourseCard.scss

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

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

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

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

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

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

@@ -1,33 +1,6 @@
 import { useWindowSize, breakpoints } from '@openedx/paragon';
 import useIsCollapsed from './hooks';
 
-jest.mock('@openedx/paragon', () => ({
-  ...jest.requireActual('@openedx/paragon'),
-  useWindowSize: jest.fn(),
-  breakpoints: {
-    extraSmall: {
-      minWidth: 0,
-      maxWidth: 575,
-    },
-    small: {
-      minWidth: 576,
-      maxWidth: 767,
-    },
-    medium: {
-      minWidth: 768,
-      maxWidth: 991,
-    },
-    large: {
-      minWidth: 992,
-      maxWidth: 1199,
-    },
-    extraLarge: {
-      minWidth: 1200,
-      maxWidth: 100000,
-    },
-  },
-}));
-
 describe('useIsCollapsed', () => {
   it('returns true only when it is between medium and small', () => {
     // make sure all three breakpoints gap is large enough for test

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

@@ -1,4 +1,5 @@
-import { render, screen } from '@testing-library/react';
+import { shallow } from '@edx/react-unit-test-utils';
+
 import ActionButton from '.';
 
 import useIsCollapsed from './hooks';
@@ -7,22 +8,18 @@ jest.mock('./hooks', () => jest.fn());
 
 describe('ActionButton', () => {
   const props = {
-    className: 'custom-class',
-    children: 'Test',
+    arbitary: 'props',
   };
-
-  it('is collapsed', async () => {
-    useIsCollapsed.mockReturnValue(true);
-    render(<ActionButton {...props} />);
-    const button = screen.getByRole('button', { name: 'Test' });
-    expect(button).toHaveClass('btn-sm', 'custom-class');
-  });
-
-  it('is not collapsed', () => {
-    useIsCollapsed.mockReturnValue(false);
-    render(<ActionButton {...props} />);
-    const button = screen.getByRole('button', { name: 'Test' });
-    expect(button).toBeInTheDocument();
-    expect(button).not.toHaveClass('size', 'sm');
+  describe('snapshot', () => {
+    test('is collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(true);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is not collapsed', () => {
+      useIsCollapsed.mockReturnValueOnce(false);
+      const wrapper = shallow(<ActionButton {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
   });
 });

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';

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

@@ -1,88 +1,85 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
-import { reduxHooks } from '@src/hooks';
-import track from '@src/tracking';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
 import useActionDisabledState from '../hooks';
 import BeginCourseButton from './BeginCourseButton';
 
-jest.mock('@src/tracking', () => ({
+jest.mock('tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardExecEdTrackingParam: jest.fn(),
     useTrackCourseEvent: jest.fn(),
   },
 }));
-
 jest.mock('../hooks', () => jest.fn(() => ({ disableBeginCourse: false })));
+jest.mock('./ActionButton', () => 'ActionButton');
 
-jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
-
+let wrapper;
 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 } }),
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
 );
 
-const props = {
-  cardId: 'cardId',
-};
-
-const renderComponent = () => render(<IntlProvider locale="en"><BeginCourseButton {...props} /></IntlProvider>);
-
 describe('BeginCourseButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
   beforeEach(() => {
     jest.clearAllMocks();
   });
-  describe('initiliaze hooks', () => {
+  describe('behavior', () => {
     it('initializes course run data with cardId', () => {
-      renderComponent();
+      wrapper = shallow(<BeginCourseButton {...props} />);
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
     });
     it('loads exec education path param', () => {
-      renderComponent();
+      wrapper = shallow(<BeginCourseButton {...props} />);
       expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
     });
     it('loads disabled states for begin action from action hooks', () => {
-      renderComponent();
+      wrapper = shallow(<BeginCourseButton {...props} />);
       expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
     });
   });
-  describe('behavior', () => {
+  describe('snapshot', () => {
     describe('disabled', () => {
-      it('should be disabled', () => {
+      beforeEach(() => {
         useActionDisabledState.mockReturnValueOnce({ disableBeginCourse: true });
-        renderComponent();
-        const button = screen.getByRole('button', { name: 'Begin Course' });
-        expect(button).toHaveClass('disabled');
-        expect(button).toHaveAttribute('aria-disabled', 'true');
+        wrapper = shallow(<BeginCourseButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+      it('should be disabled', () => {
+        expect(wrapper.instance.props.disabled).toEqual(true);
       });
     });
     describe('enabled', () => {
-      it('should be enabled', () => {
-        renderComponent();
-        const button = screen.getByRole('button', { name: 'Begin Course' });
-        expect(button).not.toHaveClass('disabled');
-        expect(button).not.toHaveAttribute('aria-disabled', 'true');
+      beforeEach(() => {
+        wrapper = shallow(<BeginCourseButton {...props} />);
       });
-      it('should track enter course clicked event on click, with exec ed param', async () => {
-        renderComponent();
-        const user = userEvent.setup();
-        const button = screen.getByRole('button', { name: 'Begin Course' });
-        user.click(button);
-        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+      it('should be enabled', () => {
+        expect(wrapper.instance.props.disabled).toEqual(false);
+      });
+      it('should track enter course clicked event on click, with exec ed param', () => {
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
           track.course.enterCourseClicked,
           props.cardId,
           homeUrl + execEdPath(props.cardId),
-        );
+        ));
       });
     });
   });

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';

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

@@ -1,19 +1,17 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { reduxHooks } from '@src/hooks';
-import track from '@src/tracking';
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
 import useActionDisabledState from '../hooks';
 import ResumeButton from './ResumeButton';
 
-jest.mock('@src/tracking', () => ({
+jest.mock('tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardExecEdTrackingParam: jest.fn(),
@@ -21,63 +19,65 @@ jest.mock('@src/hooks', () => ({
   },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableResumeCourse: false })));
-
-jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
+jest.mock('./ActionButton', () => 'ActionButton');
 
 const resumeUrl = 'resume-url';
 reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
 );
 
+let wrapper;
+
 describe('ResumeButton', () => {
   const props = {
     cardId: 'cardId',
   };
-  describe('initialize hooks', () => {
-    beforeEach(() => render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>));
+  describe('behavior', () => {
     it('initializes course run data with cardId', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
     });
     it('loads exec education path param', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
       expect(reduxHooks.useCardExecEdTrackingParam).toHaveBeenCalledWith(props.cardId);
     });
     it('loads disabled states for resume action from action hooks', () => {
+      wrapper = shallow(<ResumeButton {...props} />);
       expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
     });
   });
-  describe('behavior', () => {
+  describe('snapshot', () => {
     describe('disabled', () => {
       beforeEach(() => {
         useActionDisabledState.mockReturnValueOnce({ disableResumeCourse: true });
+        wrapper = shallow(<ResumeButton {...props} />);
+      });
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be disabled', () => {
-        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
-        const button = screen.getByRole('button', { name: 'Resume' });
-        expect(button).toHaveClass('disabled');
-        expect(button).toHaveAttribute('aria-disabled', 'true');
+        expect(wrapper.instance.props.disabled).toEqual(true);
       });
     });
     describe('enabled', () => {
-      it('should be enabled', () => {
-        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
-        const button = screen.getByRole('button', { name: 'Resume' });
-        expect(button).toBeInTheDocument();
-        expect(button).not.toHaveClass('disabled');
-        expect(button).not.toHaveAttribute('aria-disabled', 'true');
+      beforeEach(() => {
+        wrapper = shallow(<ResumeButton {...props} />);
       });
-      it('should track enter course clicked event on click, with exec ed param', async () => {
-        render(<IntlProvider locale="en"><ResumeButton {...props} /></IntlProvider>);
-        const user = userEvent.setup();
-        const button = screen.getByRole('button', { name: 'Resume' });
-        user.click(button);
-        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
+      test('snapshot', () => {
+        expect(wrapper.snapshot).toMatchSnapshot();
+      });
+      it('should be enabled', () => {
+        expect(wrapper.instance.props.disabled).toEqual(false);
+      });
+      it('should track enter course clicked event on click, with exec ed param', () => {
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
           track.course.enterCourseClicked,
           props.cardId,
           resumeUrl + execEdPath(props.cardId),
-        );
+        ));
       });
     });
   });

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';

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

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

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Locked } from '@openedx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+
+import ActionButton from './ActionButton';
+import messages from './messages';
+
+export const UpgradeButton = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+
+  const { upgradeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { disableUpgradeCourse } = useActionDisabledState(cardId);
+
+  const trackUpgradeClick = reduxHooks.useTrackCourseEvent(
+    track.course.upgradeClicked,
+    cardId,
+    upgradeUrl,
+  );
+
+  const enabledProps = {
+    as: 'a',
+    href: upgradeUrl,
+    onClick: trackUpgradeClick,
+  };
+  return (
+    <ActionButton
+      iconBefore={Locked}
+      variant="outline-primary"
+      disabled={disableUpgradeCourse}
+      {...!disableUpgradeCourse && enabledProps}
+    >
+      {formatMessage(messages.upgrade)}
+    </ActionButton>
+  );
+};
+UpgradeButton.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+export default UpgradeButton;

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

@@ -0,0 +1,49 @@
+import { shallow } from '@edx/react-unit-test-utils';
+
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
+import useActionDisabledState from '../hooks';
+import UpgradeButton from './UpgradeButton';
+
+jest.mock('tracking', () => ({
+  course: {
+    upgradeClicked: jest.fn().mockName('segment.trackUpgradeClicked'),
+  },
+}));
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCourseRunData: jest.fn(),
+    useTrackCourseEvent: jest.fn(
+      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+    ),
+  },
+}));
+jest.mock('../hooks', () => jest.fn(() => ({ disableUpgradeCourse: false })));
+jest.mock('./ActionButton', () => 'ActionButton');
+
+describe('UpgradeButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  const upgradeUrl = 'upgradeUrl';
+  reduxHooks.useCardCourseRunData.mockReturnValue({ upgradeUrl });
+  describe('snapshot', () => {
+    test('can upgrade', () => {
+      const wrapper = shallow(<UpgradeButton {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.props.disabled).toEqual(false);
+      expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+        track.course.upgradeClicked,
+        props.cardId,
+        upgradeUrl,
+      ));
+    });
+    test('cannot upgrade', () => {
+      useActionDisabledState.mockReturnValueOnce({ disableUpgradeCourse: true });
+      const wrapper = shallow(<UpgradeButton {...props} />);
+      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper.instance.props.disabled).toEqual(true);
+    });
+  });
+});

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

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';

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

@@ -1,55 +1,45 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@openedx/frontend-base';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import track from '@src/tracking';
-import { reduxHooks } from '@src/hooks';
+import track from 'tracking';
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ViewCourseButton from './ViewCourseButton';
 
-jest.mock('@src/tracking', () => ({
+jest.mock('tracking', () => ({
   course: {
     enterCourseClicked: jest.fn().mockName('segment.enterCourseClicked'),
   },
 }));
 
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
-    useTrackCourseEvent: jest.fn(),
+    useTrackCourseEvent: jest.fn(
+      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+    ),
   },
 }));
 jest.mock('../hooks', () => jest.fn(() => ({ disableViewCourse: false })));
-
-jest.mock('./ActionButton/hooks', () => jest.fn(() => false));
+jest.mock('./ActionButton', () => 'ActionButton');
 
 const defaultProps = { cardId: 'cardId' };
 const homeUrl = 'homeUrl';
 
 describe('ViewCourseButton', () => {
-  it('learner can view course', async () => {
-    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
-    const button = screen.getByRole('button', { name: 'View Course' });
-    expect(button).toBeInTheDocument();
-    expect(button).not.toHaveClass('disabled');
-    expect(button).not.toHaveAttribute('aria-disabled', 'true');
-  });
-  it('calls trackCourseEvent on click', async () => {
-    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
-    const user = userEvent.setup();
-    const button = screen.getByRole('button', { name: 'View Course' });
-    await user.click(button);
-    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
+  test('learner can view course', () => {
+    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
       track.course.enterCourseClicked,
       defaultProps.cardId,
       homeUrl,
-    );
+    ));
+    expect(wrapper.instance.props.disabled).toEqual(false);
   });
-  it('learner cannot view course', () => {
+  test('learner cannot view course', () => {
     useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
-    render(<IntlProvider locale="en"><ViewCourseButton {...defaultProps} /></IntlProvider>);
-    const button = screen.getByRole('button', { name: 'View Course' });
-    expect(button).toHaveClass('disabled');
-    expect(button).toHaveAttribute('aria-disabled', 'true');
+    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.disabled).toEqual(true);
   });
 });

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

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

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

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

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

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

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

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UpgradeButton snapshot can upgrade 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="upgradeUrl"
+  iconBefore={[MockFunction icons.Locked]}
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.trackUpgradeClicked],
+        "upgradeUrl": "upgradeUrl",
+      },
+    }
+  }
+  variant="outline-primary"
+>
+  Upgrade
+</ActionButton>
+`;
+
+exports[`UpgradeButton snapshot cannot upgrade 1`] = `
+<ActionButton
+  disabled={true}
+  iconBefore={[MockFunction icons.Locked]}
+  variant="outline-primary"
+>
+  Upgrade
+</ActionButton>
+`;

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

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

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

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 
 import { ActionRow } from '@openedx/paragon';
 
-import { reduxHooks } from '../../../../hooks';
-import CourseCardActionSlot from '../../../../slots/CourseCardActionSlot';
+import { reduxHooks } from 'hooks';
 
+import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -14,13 +14,15 @@ import ViewCourseButton from './ViewCourseButton';
 export const CourseCardActions = ({ cardId }) => {
   const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
   const {
+    isVerified,
     hasStarted,
+    isExecEd2UCourse,
   } = reduxHooks.useCardEnrollmentData(cardId);
   const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
 
   return (
     <ActionRow data-test-id="CourseCardActions">
-      <CourseCardActionSlot cardId={cardId} />
+      {!(isEntitlement || isVerified || isExecEd2UCourse) && <UpgradeButton cardId={cardId} />}
       {isEntitlement && (isFulfilled
         ? <ViewCourseButton cardId={cardId} />
         : <SelectSessionButton cardId={cardId} />

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

@@ -1,9 +1,16 @@
-import { render, screen } from '@testing-library/react';
-import { reduxHooks } from '@src/hooks';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+
+import UpgradeButton from './UpgradeButton';
+import SelectSessionButton from './SelectSessionButton';
+import BeginCourseButton from './BeginCourseButton';
+import ResumeButton from './ResumeButton';
+import ViewCourseButton from './ViewCourseButton';
 
 import CourseCardActions from '.';
 
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
@@ -12,15 +19,16 @@ jest.mock('@src/hooks', () => ({
   },
 }));
 
-jest.mock('@src/slots/CourseCardActionSlot', () => jest.fn(() => <div>CourseCardActionSlot</div>));
-jest.mock('./SelectSessionButton', () => jest.fn(() => <div>SelectSessionButton</div>));
-jest.mock('./ViewCourseButton', () => jest.fn(() => <div>ViewCourseButton</div>));
-jest.mock('./BeginCourseButton', () => jest.fn(() => <div>BeginCourseButton</div>));
-jest.mock('./ResumeButton', () => jest.fn(() => <div>ResumeButton</div>));
+jest.mock('./UpgradeButton', () => 'UpgradeButton');
+jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
+jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
+jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
+jest.mock('./ResumeButton', () => 'ResumeButton');
 
 const cardId = 'test-card-id';
 const props = { cardId };
 
+let el;
 describe('CourseCardActions', () => {
   const mockHooks = ({
     isEntitlement = false,
@@ -36,58 +44,71 @@ describe('CourseCardActions', () => {
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isExecEd2UCourse, isVerified, hasStarted });
     reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
   };
-  const renderComponent = () => render(<CourseCardActions {...props} />);
-  describe('hooks', () => {
+  const render = () => {
+    el = shallow(<CourseCardActions {...props} />);
+  };
+  describe('behavior', () => {
     it('initializes redux hooks', () => {
       mockHooks();
-      renderComponent();
+      render();
       expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
       expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('output', () => {
+    describe('Exec Ed course', () => {
+      it('does not render upgrade button', () => {
+        mockHooks({ isExecEd2UCourse: true });
+        render();
+        expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
+      });
+    });
     describe('entitlement course', () => {
+      it('does not render upgrade button', () => {
+        mockHooks({ isEntitlement: true });
+        render();
+        expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
+      });
       it('renders ViewCourseButton if fulfilled', () => {
         mockHooks({ isEntitlement: true, isFulfilled: true });
-        renderComponent();
-        const ViewCourseButton = screen.getByText('ViewCourseButton');
-        expect(ViewCourseButton).toBeInTheDocument();
+        render();
+        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
       });
       it('renders SelectSessionButton if not fulfilled', () => {
         mockHooks({ isEntitlement: true });
-        renderComponent();
-        const SelectSessionButton = screen.getByText('SelectSessionButton');
-        expect(SelectSessionButton).toBeInTheDocument();
+        render();
+        expect(el.instance.findByType(SelectSessionButton)[0].props.cardId).toEqual(cardId);
       });
     });
-    describe('not entitlement, verified, or exec ed', () => {
-      it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
+    describe('verified course', () => {
+      it('does not render upgrade button', () => {
+        mockHooks({ isVerified: true });
+        render();
+        expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
+      });
+    });
+    describe('not entielement, verified, or exec ed', () => {
+      it('renders UpgradeButton and ViewCourseButton for archived courses', () => {
         mockHooks({ isArchived: true });
-        renderComponent();
-        const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
-        expect(CourseCardActionSlot).toBeInTheDocument();
-        const ViewCourseButton = screen.getByText('ViewCourseButton');
-        expect(ViewCourseButton).toBeInTheDocument();
+        render();
+        expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
       });
       describe('unstarted courses', () => {
-        it('renders CourseCardActionSlot and BeginCourseButton', () => {
+        it('renders UpgradeButton and BeginCourseButton', () => {
           mockHooks();
-          renderComponent();
-          const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
-          expect(CourseCardActionSlot).toBeInTheDocument();
-          const BeginCourseButton = screen.getByText('BeginCourseButton');
-          expect(BeginCourseButton).toBeInTheDocument();
+          render();
+          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(BeginCourseButton)[0].props.cardId).toEqual(cardId);
         });
       });
       describe('active courses (started, and not archived)', () => {
-        it('renders CourseCardActionSlot and ResumeButton', () => {
+        it('renders UpgradeButton and ResumeButton', () => {
           mockHooks({ hasStarted: true });
-          renderComponent();
-          const CourseCardActionSlot = screen.getByText('CourseCardActionSlot');
-          expect(CourseCardActionSlot).toBeInTheDocument();
-          const ResumeButton = screen.getByText('ResumeButton');
-          expect(ResumeButton).toBeInTheDocument();
+          render();
+          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(ResumeButton)[0].props.cardId).toEqual(cardId);
         });
       });
     });

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

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

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

@@ -4,10 +4,10 @@ import PropTypes from 'prop-types';
 
 import { MailtoLink, Hyperlink } from '@openedx/paragon';
 import { CheckCircle } from '@openedx/paragon/icons';
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { utilHooks, reduxHooks } from 'hooks';
+import Banner from 'components/Banner';
 
 import messages from './messages';
 
@@ -31,7 +31,7 @@ export const CertificateBanner = ({ cardId }) => {
   if (certificate.isRestricted) {
     return (
       <Banner variant="danger">
-        {supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
+        { supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
         {isVerified && '  '}
         {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
       </Banner>

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

@@ -1,10 +1,10 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { reduxHooks } from '@src/hooks';
+import { reduxHooks } from 'hooks';
 import CertificateBanner from './CertificateBanner';
+import messages from './messages';
 
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
   utilHooks: {
     useFormatDate: jest.fn(() => date => date),
   },
@@ -17,28 +17,28 @@ jest.mock('@src/hooks', () => ({
   },
 }));
 
-const defaultCertificate = {
-  availableDate: '10/20/3030',
-  isRestricted: false,
-  isDownloadable: false,
-  isEarnedButUnavailable: false,
-};
-const defaultEnrollment = {
-  isAudit: false,
-  isVerified: false,
-};
-const defaultCourseRun = { isArchived: false };
-const defaultGrade = { isPassing: false };
-const defaultPlatformSettings = {};
-const props = { cardId: 'cardId' };
-const supportEmail = 'suport@email.com';
-const billingEmail = 'billing@email.com';
+jest.mock('components/Banner', () => 'Banner');
 
 describe('CertificateBanner', () => {
+  const props = { cardId: 'cardId' };
   reduxHooks.useCardCourseRunData.mockReturnValue({
     minPassingGrade: 0.8,
     progressUrl: 'progressUrl',
   });
+
+  const defaultCertificate = {
+    availableDate: '10/20/3030',
+    isRestricted: false,
+    isDownloadable: false,
+    isEarnedButUnavailable: false,
+  };
+  const defaultEnrollment = {
+    isAudit: false,
+    isVerified: false,
+  };
+  const defaultCourseRun = { isArchived: false };
+  const defaultGrade = { isPassing: false };
+  const defaultPlatformSettings = {};
   const createWrapper = ({
     certificate = {},
     enrollment = {},
@@ -51,192 +51,177 @@ describe('CertificateBanner', () => {
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
     reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
     reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
-    return render(<IntlProvider locale="en"><CertificateBanner {...props} /></IntlProvider>);
+    return shallow(<CertificateBanner {...props} />);
   };
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('is restricted', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
+  /** TODO: Update tests to validate snapshots **/
+  describe('snapshot', () => {
+    test('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    const msg = screen.getByText((text) => text.includes('please let us know.'));
-    expect(msg).toBeInTheDocument();
-    expect(msg).not.toContain(supportEmail);
-  });
-  it('is restricted with support email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      platformSettings: {
-        supportEmail,
-      },
+    test('is restricted with support email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    const msg = screen.getByText((text) => text.includes(supportEmail));
-    expect(msg).toBeInTheDocument();
-  });
-  it('is restricted with billing email but not verified', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      platformSettings: {
-        billingEmail,
-      },
+    test('is restricted with billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    expect(banner).toHaveClass('alert-danger');
-    const msg = screen.queryByText((text) => text.includes(billingEmail));
-    expect(msg).not.toBeInTheDocument();
-  });
-  it('is restricted and verified', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
+    test('is restricted and verified', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    const restrictedMsg = screen.getByText((text) => text.includes('please let us know.'));
-    expect(restrictedMsg).toBeInTheDocument();
-    const refundMsg = screen.getByText((text) => text.includes('If you would like a refund'));
-    expect(refundMsg).toBeInTheDocument();
-  });
-  it('is restricted and verified with support email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
-      platformSettings: {
-        supportEmail,
-      },
+    test('is restricted and verified with support email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const restrictedMsg = screen.getByText((text) => text.includes(supportEmail));
-    expect(restrictedMsg).toBeInTheDocument();
-    const refundMsg = screen.getByText((text) => text.includes('If you would like a refund'));
-    expect(refundMsg).toBeInTheDocument();
-    expect(refundMsg.innerHTML).not.toContain(billingEmail);
-  });
-  it('is restricted and verified with billing email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
-      platformSettings: {
-        billingEmail,
-      },
+    test('is restricted and verified with billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const restrictedMsg = screen.queryByText((text) => text.includes('please let us know.'));
-    expect(restrictedMsg).toBeInTheDocument();
-    expect(restrictedMsg.innerHTML).not.toContain(supportEmail);
-    const refundMsg = screen.getByText((text) => text.includes(billingEmail));
-    expect(refundMsg).toBeInTheDocument();
-  });
-  it('is restricted and verified with support and billing email', () => {
-    createWrapper({
-      certificate: {
-        isRestricted: true,
-      },
-      enrollment: {
-        isVerified: true,
-      },
-      platformSettings: {
-        supportEmail,
-        billingEmail,
-      },
+    test('is restricted and verified with support and billing email', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const restrictedMsg = screen.getByText((text) => text.includes(supportEmail));
-    expect(restrictedMsg).toBeInTheDocument();
-    const refundMsg = screen.getByText((text) => text.includes(billingEmail));
-    expect(refundMsg).toBeInTheDocument();
-  });
-  it('is passing and is downloadable', () => {
-    createWrapper({
-      grade: { isPassing: true },
-      certificate: { isDownloadable: true },
+    test('is passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: { isPassing: true },
+        certificate: { isDownloadable: true },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    expect(banner).toHaveClass('alert-success');
-    const readyMsg = screen.getByText((text) => text.includes('Congratulations.'));
-    expect(readyMsg).toBeInTheDocument();
-  });
-  it('not passing and is downloadable', () => {
-    createWrapper({
-      grade: { isPassing: false },
-      certificate: { isDownloadable: true },
+    test('not passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: { isPassing: false },
+        certificate: { isDownloadable: true },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toBeInTheDocument();
-    expect(banner).toHaveClass('alert-success');
-    const readyMsg = screen.getByText((text) => text.includes('Congratulations.'));
-    expect(readyMsg).toBeInTheDocument();
-  });
-  it('not passing and audit', () => {
-    createWrapper({
-      enrollment: {
-        isAudit: true,
-      },
+    test('not passing and audit', () => {
+      const wrapper = createWrapper({
+        enrollment: {
+          isAudit: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-info');
-    const auditMsg = screen.getByText((text) => text.includes('Grade required to pass the course:'));
-    expect(auditMsg).toBeInTheDocument();
-  });
-  it('not passing and has finished', () => {
-    createWrapper({
-      courseRun: { isArchived: true },
+    test('not passing and has finished', () => {
+      const wrapper = createWrapper({
+        courseRun: { isArchived: true },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-warning');
-    const archivedMsg = screen.getByText('You are not eligible for a certificate.');
-    expect(archivedMsg).toBeInTheDocument();
-  });
-  it('not passing and not audit and not finished', () => {
-    createWrapper({});
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-warning');
-    const msg = screen.getByText((text) => text.includes('Grade required for a certificate'));
-    expect(msg).toBeInTheDocument();
-  });
-  it('is passing and is earned but unavailable', () => {
-    createWrapper({
-      grade: {
-        isPassing: true,
-      },
-      certificate: {
-        isEarnedButUnavailable: true,
-      },
+    test('not passing and not audit and not finished', () => {
+      const wrapper = createWrapper({});
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
-    const banner = screen.getByRole('alert');
-    expect(banner).toHaveClass('alert-info');
-    const earnedMsg = screen.getByText((text) => text.includes('Your grade and certificate will be ready after'));
-    expect(earnedMsg).toBeInTheDocument();
-  });
-  it('is passing and not downloadable render empty', () => {
-    createWrapper({
-      grade: {
-        isPassing: true,
-      },
+    test('is passing and is earned but unavailable', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+        certificate: {
+          isEarnedButUnavailable: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+    test('is passing and not downloadable render empty', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+      });
+      expect(wrapper.snapshot).toMatchSnapshot();
+    });
+  });
+  describe('behavior', () => {
+    it('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
+      });
+      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
+      expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
+      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
+    });
+    it('is restricted and verified', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+        platformSettings: {
+          supportEmail: 'suport@email',
+          billingEmail: 'billing@email',
+        },
+      });
+      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
+      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
+      expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
     });
-    const banner = screen.queryByRole('alert');
-    expect(banner).toBeNull();
   });
 });

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

@@ -2,17 +2,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink } from '@openedx/paragon';
-import { useIntl } from '@openedx/frontend-base';
-
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
+import { utilHooks, reduxHooks } from 'hooks';
+import Banner from 'components/Banner';
 import messages from './messages';
 
 export const CourseBanner = ({ cardId }) => {
   const {
     isVerified,
     isAuditAccessExpired,
+    canUpgrade,
     coursewareAccess = {},
   } = reduxHooks.useCardEnrollmentData(cardId);
   const courseRun = reduxHooks.useCardCourseRunData(cardId);
@@ -26,7 +26,13 @@ export const CourseBanner = ({ cardId }) => {
   return (
     <>
       {isAuditAccessExpired
-        && (
+        && (canUpgrade ? (
+          <Banner>
+            {formatMessage(messages.auditAccessExpired)}
+            {'  '}
+            {formatMessage(messages.upgradeToAccess)}
+          </Banner>
+        ) : (
           <Banner>
             {formatMessage(messages.auditAccessExpired)}
             {'  '}
@@ -34,7 +40,17 @@ export const CourseBanner = ({ cardId }) => {
               {formatMessage(messages.findAnotherCourse)}
             </Hyperlink>
           </Banner>
-        )}
+        ))}
+
+      {courseRun.isActive && !canUpgrade && (
+        <Banner>
+          {formatMessage(messages.upgradeDeadlinePassed)}
+          {'  '}
+          <Hyperlink isInline destination={courseRun.marketingUrl || ''}>
+            {formatMessage(messages.exploreCourseDetails)}
+          </Hyperlink>
+        </Banner>
+      )}
 
       {(!isStaff && isTooEarly && courseRun.startDate) && (
         <Banner>
@@ -43,7 +59,6 @@ export const CourseBanner = ({ cardId }) => {
           })}
         </Banner>
       )}
-
       {(!isStaff && hasUnmetPrerequisites) && (
         <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
       )}

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

@@ -1,13 +1,15 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+import { Hyperlink } from '@openedx/paragon';
 
-import { reduxHooks } from '@src/hooks';
-import { formatMessage } from '@src/testUtils';
+import { reduxHooks } from 'hooks';
+import { formatMessage } from 'testUtils';
 import { CourseBanner } from './CourseBanner';
 
 import messages from './messages';
 
-jest.mock('@src/hooks', () => ({
+jest.mock('components/Banner', () => 'Banner');
+jest.mock('hooks', () => ({
   utilHooks: {
     useFormatDate: () => date => date,
   },
@@ -17,10 +19,13 @@ jest.mock('@src/hooks', () => ({
   },
 }));
 
-const cardId = 'test-card-id';
+const cardId = 'my-test-course-number';
+
+let el;
 
 const enrollmentData = {
   isVerified: false,
+  canUpgrade: false,
   isAuditAccessExpired: false,
   coursewareAccess: {
     hasUnmetPrerequisites: false,
@@ -34,7 +39,7 @@ const courseRunData = {
   marketingUrl: 'marketing-url',
 };
 
-const renderCourseBanner = (overrides = {}) => {
+const render = (overrides = {}) => {
   const {
     courseRun = {},
     enrollment = {},
@@ -47,58 +52,114 @@ const renderCourseBanner = (overrides = {}) => {
     ...enrollmentData,
     ...enrollment,
   });
-  return render(<IntlProvider locale="en"><CourseBanner cardId={cardId} /></IntlProvider>);
+  el = shallow(<CourseBanner cardId={cardId} />);
 };
 
 describe('CourseBanner', () => {
-  it('initializes data with course number from enrollment, course and course run data', () => {
-    renderCourseBanner();
+  test('initializes data with course number from enrollment, course and course run data', () => {
+    render();
     expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
     expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
   });
-  it('no display if learner is verified', () => {
-    renderCourseBanner({ enrollment: { isVerified: true } });
-    expect(screen.queryByRole('alert')).toBeNull();
+  test('no display if learner is verified', () => {
+    render({ enrollment: { isVerified: true } });
+    expect(el.isEmptyRender()).toEqual(true);
   });
-  describe('audit access expired', () => {
-    it('should display correct message and link', () => {
-      renderCourseBanner({ enrollment: { isAuditAccessExpired: true } });
-      const auditAccessText = screen.getByText(formatMessage(messages.auditAccessExpired));
-      expect(auditAccessText).toBeInTheDocument();
-      const auditAccessLink = screen.getByText(formatMessage(messages.findAnotherCourse));
-      expect(auditAccessLink).toBeInTheDocument();
+  describe('audit access expired, can upgrade', () => {
+    beforeEach(() => {
+      render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } });
+    });
+    test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.instance.children[0].children[2].el).toContain(messages.upgradeToAccess.defaultMessage);
     });
   });
+  describe('audit access expired, cannot upgrade', () => {
+    beforeEach(() => {
+      render({ enrollment: { isAuditAccessExpired: true } });
+    });
+    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
+    });
+  });
+  describe('course run active and cannot upgrade', () => {
+    beforeEach(() => {
+      render({ courseRun: { isActive: true } });
+    });
+    test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el.instance.children[0].children[0].el).toContain(messages.upgradeDeadlinePassed.defaultMessage);
+      const link = el.instance.findByType(Hyperlink);
+      expect(link[0].children[0].el).toEqual(messages.exploreCourseDetails.defaultMessage);
+      expect(link[0].props.destination).toEqual(courseRunData.marketingUrl);
+    });
+  });
+  test('no display if audit access not expired and (course is not active or can upgrade)', () => {
+    render();
+    // isEmptyRender() isn't true because the minimal is <Fragment />
+    expect(el.instance.children).toEqual([]);
+    render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
+    expect(el.instance.children).toEqual([]);
+  });
   describe('unmet prerequisites', () => {
-    it('should display correct message', () => {
-      renderCourseBanner({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
-      const preReqText = screen.getByText(formatMessage(messages.prerequisitesNotMet));
-      expect(preReqText).toBeInTheDocument();
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
+    });
+    test('snapshot: unmetPrerequisites', () => {
+      expect(el.snapshot).toMatchSnapshot();
+    });
+    test('messages: prerequisitesNotMet', () => {
+      expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
     });
   });
   describe('too early', () => {
     describe('no start date', () => {
-      it('should not display banner', () => {
-        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
-        const banner = screen.queryByRole('alert');
-        expect(banner).toBeNull();
+      beforeEach(() => {
+        render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
       });
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
+      test('messages', () => expect(el.instance.children).toEqual([]));
     });
     describe('has start date', () => {
-      it('should display messages courseHasNotStarted', () => {
-        renderCourseBanner({ enrollment: { coursewareAccess: { isTooEarly: true } } });
-        const earlyMsg = screen.getByText(
+      beforeEach(() => {
+        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
+      });
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
+
+      test('messages: courseHasNotStarted', () => {
+        expect(el.instance.children[0].children[0].el).toContain(
           formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
         );
-        expect(earlyMsg).toBeInTheDocument();
       });
     });
   });
   describe('staff', () => {
-    it('should not display banner', () => {
-      renderCourseBanner({ enrollment: { coursewareAccess: { isStaff: true } } });
-      const banner = screen.queryByRole('alert');
-      expect(banner).toBeNull();
+    beforeEach(() => {
+      render({ enrollment: { coursewareAccess: { isStaff: true } } });
+    });
+    test('snapshot: isStaff', () => {
+      expect(el.snapshot).toMatchSnapshot();
     });
   });
+  test('snapshot: stacking banners', () => {
+    render({
+      enrollment: {
+        coursewareAccess: {
+          isStaff: true,
+          isTooEarly: true,
+          hasUnmetPrerequisites: true,
+        },
+      },
+    });
+    expect(el.snapshot).toMatchSnapshot();
+  });
 });

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

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

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

@@ -1,5 +1,6 @@
-import { StrictDict } from '../../../../../utils';
-import { reduxHooks } from '../../../../../hooks';
+import { StrictDict } from 'utils';
+
+import { reduxHooks } from 'hooks';
 
 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -16,9 +17,7 @@ export const statusComponents = StrictDict({
 export const useCreditBannerData = (cardId) => {
   const credit = reduxHooks.useCardCreditData(cardId);
   const { supportEmail } = reduxHooks.usePlatformSettingsData();
-  if (!credit.isEligible) {
-    return null;
-  }
+  if (!credit.isEligible) { return null; }
 
   const { error, purchased, requestStatus } = credit;
   let ContentComponent = EligibleContent;

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

@@ -1,5 +1,5 @@
-import { keyStore } from '@src/utils';
-import { reduxHooks } from '@src/hooks';
+import { keyStore } from 'utils';
+import { reduxHooks } from 'hooks';
 
 import ApprovedContent from './views/ApprovedContent';
 import EligibleContent from './views/EligibleContent';
@@ -9,7 +9,7 @@ import RejectedContent from './views/RejectedContent';
 
 import * as hooks from './hooks';
 
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCreditData: jest.fn(),
     usePlatformSettingsData: jest.fn(),

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

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

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

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

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

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

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

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

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

@@ -1,80 +1,63 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import { formatMessage } from '@src/testUtils';
-import { reduxHooks } from '@src/hooks';
-import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
+
+import { formatMessage } from 'testUtils';
+import { reduxHooks } from 'hooks';
 import messages from './messages';
+import ProviderLink from './components/ProviderLink';
 import ApprovedContent from './ApprovedContent';
 
-jest.mock('@src/hooks', () => ({
+jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCreditData: jest.fn(),
+    useMasqueradeData: jest.fn(),
   },
 }));
+jest.mock('./components/CreditContent', () => 'CreditContent');
+jest.mock('./components/ProviderLink', () => 'ProviderLink');
 
+let el;
 const cardId = 'test-card-id';
 const credit = {
   providerStatusUrl: 'test-credit-provider-status-url',
   providerName: 'test-credit-provider-name',
 };
 reduxHooks.useCardCreditData.mockReturnValue(credit);
-
-const renderWithMasquerading = (isMasquerading = false) => render(
-  <IntlProvider locale="en">
-    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
-      <ApprovedContent cardId={cardId} />
-    </MasqueradeUserContext.Provider>
-  </IntlProvider>
-);
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
 describe('ApprovedContent component', () => {
-  describe('hooks', () => {
+  beforeEach(() => {
+    el = shallow(<ApprovedContent cardId={cardId} />);
+  });
+  describe('behavior', () => {
     it('initializes credit data with cardId', () => {
-      renderWithMasquerading();
       expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
   describe('render', () => {
     describe('rendered CreditContent component', () => {
-      beforeEach(() => {
-        jest.clearAllMocks();
-        renderWithMasquerading();
+      let component;
+      beforeAll(() => {
+        component = el.instance.findByType('CreditContent');
       });
-      it('action.message is formatted viewCredit message', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).toBeInTheDocument();
-        expect(actionButton).toHaveTextContent(formatMessage(messages.viewCredit));
+      test('action.href from credit.providerStatusUrl', () => {
+        expect(component[0].props.action.href).toEqual(credit.providerStatusUrl);
       });
-      it('action.href from credit.providerStatusUrl', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).toHaveAttribute('href', credit.providerStatusUrl);
+      test('action.message is formatted viewCredit message', () => {
+        expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit));
       });
-      it('action.disabled is false', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).not.toHaveAttribute('aria-disabled', 'true');
-        expect(actionButton).not.toHaveClass('disabled');
-        expect(actionButton).toBeEnabled();
+      test('action.disabled is false', () => {
+        expect(component[0].props.action.disabled).toEqual(false);
       });
-      it('message is formatted approved message', () => {
-        const creditMsg = screen.getByTestId('credit-msg');
-        expect(creditMsg).toBeInTheDocument();
-        expect(creditMsg.textContent).toContain(`${credit.providerName} has approved your request for course credit`);
-      });
-    });
-    describe('when masquerading', () => {
-      beforeEach(() => {
-        renderWithMasquerading(true);
-      });
-
-      it('disables the action button', () => {
-        const actionButton = screen.getByRole('link', { name: messages.viewCredit.defaultMessage });
-        expect(actionButton).toHaveAttribute('aria-disabled', 'true');
-        expect(actionButton).toHaveClass('disabled');
-      });
-
-      it('still renders provider name and link correctly', () => {
-        const creditMsg = screen.getByTestId('credit-msg');
-        expect(creditMsg.textContent).toContain(credit.providerName);
+      test('message is formatted approved message', () => {
+        expect(component[0].props.message).toEqual(formatMessage(
+          messages.approved,
+          {
+            congratulations: (<b>{formatMessage(messages.congratulations)}</b>),
+            linkToProviderSite: <ProviderLink cardId={cardId} />,
+            providerName: credit.providerName,
+          },
+        ));
       });
     });
   });

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { useIntl } from '@openedx/frontend-base';
+import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { reduxHooks } from '../../../../../../hooks';
-import track from '../../../../../../tracking';
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
 
 import CreditContent from './components/CreditContent';
 import messages from './messages';

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

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

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

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

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

@@ -1,103 +1,73 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { reduxHooks } from '@src/hooks';
-import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
+import { formatMessage } from 'testUtils';
+
+import { reduxHooks } from 'hooks';
 import messages from './messages';
 import hooks from './hooks';
+import ProviderLink from './components/ProviderLink';
 import MustRequestContent from './MustRequestContent';
 
 jest.mock('./hooks', () => ({
   useCreditRequestData: jest.fn(),
 }));
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCreditData: jest.fn(),
-  },
+jest.mock('hooks', () => ({
+  reduxHooks: { useMasqueradeData: jest.fn() },
 }));
+jest.mock('./components/CreditContent', () => 'CreditContent');
+jest.mock('./components/ProviderLink', () => 'ProviderLink');
+
+let el;
+let component;
 
 const cardId = 'test-card-id';
-const requestData = {
-  url: 'test-request-data-url',
-  parameters: {
-    key1: 'val1',
-    key2: 'val2',
-    key3: 'val3',
-  },
-};
-const providerName = 'test-credit-provider-name';
-const providerStatusUrl = 'test-credit-provider-status-url';
+const requestData = { test: 'requestData' };
 const createCreditRequest = jest.fn().mockName('createCreditRequest');
+hooks.useCreditRequestData.mockReturnValue({
+  requestData,
+  createCreditRequest,
+});
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
-const renderMustRequestContent = (isMasquerading = false) => render(
-  <IntlProvider locale="en" messages={messages}>
-    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
-      <MustRequestContent cardId={cardId} />
-    </MasqueradeUserContext.Provider>
-  </IntlProvider>,
-);
-
+const render = () => {
+  el = shallow(<MustRequestContent cardId={cardId} />);
+};
 describe('MustRequestContent component', () => {
   beforeEach(() => {
-    jest.clearAllMocks();
-    hooks.useCreditRequestData.mockReturnValue({
-      requestData,
-      createCreditRequest,
-    });
-    reduxHooks.useCardCreditData.mockReturnValue({
-      providerName,
-      providerStatusUrl,
-    });
+    render();
   });
-
-  describe('hooks', () => {
+  describe('behavior', () => {
     it('initializes credit request data with cardId', () => {
-      renderMustRequestContent();
       expect(hooks.useCreditRequestData).toHaveBeenCalledWith(cardId);
     });
   });
-
-  describe('behavior', () => {
-    describe('rendered content', () => {
+  describe('render', () => {
+    describe('rendered CreditContent component', () => {
       beforeEach(() => {
-        renderMustRequestContent();
+        component = el.instance.findByType('CreditContent');
       });
-
-      it('calls createCreditRequest when request credit button is clicked', async () => {
-        const user = userEvent.setup();
-        const button = screen.getByRole('button', { name: /request credit/i });
-        await user.click(button);
-        expect(createCreditRequest).toHaveBeenCalled();
+      test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => {
+        expect(component[0].props.action.onClick).toEqual(createCreditRequest);
       });
-
-      it('shows request credit button that is enabled', () => {
-        const button = screen.getByRole('button', { name: /request credit/i });
-        expect(button).toBeEnabled();
+      test('action.message is formatted requestCredit message', () => {
+        expect(component[0].props.action.message).toEqual(
+          formatMessage(messages.requestCredit),
+        );
       });
-
-      it('displays must request message with provider link', () => {
-        expect(screen.getByTestId('credit-msg')).toHaveTextContent(/request credit/i);
+      test('action.disabled is false', () => {
+        expect(component[0].props.action.disabled).toEqual(false);
       });
-
-      it('renders credit request form with correct data', () => {
-        const { container } = renderMustRequestContent();
-        const form = container.querySelector('form');
-        expect(form).toBeInTheDocument();
-        expect(form).toHaveAttribute('action', requestData.url);
+      test('message is formatted mustRequest message', () => {
+        expect(component[0].props.message).toEqual(
+          formatMessage(messages.mustRequest, {
+            linkToProviderSite: <ProviderLink cardId={cardId} />,
+            requestCredit: <b>{formatMessage(messages.requestCredit)}</b>,
+          }),
+        );
       });
-    });
-
-    describe('when masquerading', () => {
-      beforeEach(() => {
-        renderMustRequestContent(true);
-      });
-
-      it('disables the request credit button', () => {
-        const button = screen.getByRole('button', { name: /request credit/i });
-        expect(button).toHaveAttribute('aria-disabled', 'true');
-        expect(button).toHaveClass('disabled');
+      test('requestData drawn from useCreditRequestData hook', () => {
+        expect(component[0].props.requestData).toEqual(requestData);
       });
     });
   });

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

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

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

@@ -1,15 +1,20 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
+import React from 'react';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { reduxHooks } from '@src/hooks';
-import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
+import { formatMessage } from 'testUtils';
+import { reduxHooks } from 'hooks';
 
 import messages from './messages';
 import PendingContent from './PendingContent';
 
-jest.mock('@src/hooks', () => ({
-  reduxHooks: { useCardCreditData: jest.fn() },
+jest.mock('hooks', () => ({
+  reduxHooks: { useCardCreditData: jest.fn(), useMasqueradeData: jest.fn() },
 }));
+jest.mock('./components/CreditContent', () => 'CreditContent');
+jest.mock('./components/ProviderLink', () => 'ProviderLink');
+
+let el;
+let component;
 
 const cardId = 'test-card-id';
 const providerName = 'test-credit-provider-name';
@@ -18,51 +23,40 @@ reduxHooks.useCardCreditData.mockReturnValue({
   providerName,
   providerStatusUrl,
 });
+reduxHooks.useMasqueradeData.mockReturnValue({ isMasquerading: false });
 
-const renderPendingContent = (isMasquerading = false) => render(
-  <IntlProvider messages={{}} locale="en">
-    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
-      <PendingContent cardId={cardId} />
-    </MasqueradeUserContext.Provider>
-  </IntlProvider>,
-);
+const render = () => {
+  el = shallow(<PendingContent cardId={cardId} />);
+};
 describe('PendingContent component', () => {
-  describe('hooks', () => {
+  beforeEach(() => {
+    render();
+  });
+  describe('behavior', () => {
     it('initializes card credit data with cardId', () => {
-      renderPendingContent();
       expect(reduxHooks.useCardCreditData).toHaveBeenCalledWith(cardId);
     });
   });
-  describe('behavior', () => {
+  describe('render', () => {
     describe('rendered CreditContent component', () => {
-      it('action message is formatted requestCredit message', () => {
-        renderPendingContent();
-        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-        expect(button).toBeInTheDocument();
+      beforeEach(() => {
+        component = el.instance.findByType('CreditContent');
       });
-      it('action href will go to provider status site', () => {
-        renderPendingContent();
-        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-        expect(button).toHaveAttribute('href', providerStatusUrl);
+      test('action.href will go to provider status site', () => {
+        expect(component[0].props.action.href).toEqual(providerStatusUrl);
       });
-      it('action.disabled is false', () => {
-        renderPendingContent();
-        const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-        expect(button).not.toHaveClass('disabled');
+      test('action.message is formatted requestCredit message', () => {
+        expect(component[0].props.action.message).toEqual(
+          formatMessage(messages.viewDetails),
+        );
       });
-      it('message is formatted pending message with provider name', () => {
-        renderPendingContent();
-        const component = screen.getByTestId('credit-msg');
-        expect(component).toBeInTheDocument();
-        expect(component).toHaveTextContent(`${providerName} has received`);
+      test('action.disabled is false', () => {
+        expect(component[0].props.action.disabled).toEqual(false);
       });
-      describe('when masqueradeData is true', () => {
-        it('disables the view details button', () => {
-          renderPendingContent(true);
-          const button = screen.getByRole('link', { name: messages.viewDetails.defaultMessage });
-          expect(button).toHaveAttribute('aria-disabled', 'true');
-          expect(button).toHaveClass('disabled');
-        });
+      test('message is formatted pending message', () => {
+        expect(component[0].props.message).toEqual(
+          formatMessage(messages.received, { providerName }),
+        );
       });
     });
   });