feat: import FooterSlot from component package instead of slot package (#604)

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

.env

@@ -32,7 +32,6 @@ 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=''
@@ -40,5 +39,5 @@ ACCOUNT_SETTINGS_URL=''
 ACCOUNT_PROFILE_URL=''
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
-OPTIMIZELY_FULL_STACK_SDK_KEY=''
+ENABLE_EDX_PERSONAL_DASHBOARD=false
-EXPERIMENT_08_23_VAN_PAINTED_DOOR=true
+ENABLE_PROGRAMS=false

.env.development

@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -21,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -39,7 +38,6 @@ 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=''
@@ -47,4 +45,5 @@ 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
+ENABLE_PROGRAMS=false

.env.test

@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -21,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -38,7 +37,6 @@ 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=''
@@ -46,5 +44,5 @@ 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
-EXPERIMENT_08_23_VAN_PAINTED_DOOR=true
+ENABLE_PROGRAMS=false

.eslintrc.js

@@ -1,4 +1,4 @@
-const { createConfig } = require('@edx/frontend-build');
+const { createConfig } = require('@openedx/frontend-build');
 
 const config = createConfig('eslint', {
   rules: {

.github/CODEOWNERS

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

.github/dependabot.yml

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

.github/renovate.json

@@ -0,0 +1,33 @@
+{
+    "extends": [
+      "config:base",
+      "schedule:weekly",
+      ":automergeLinters",
+      ":automergeMinor",
+      ":automergeTesters",
+      ":enableVulnerabilityAlerts",
+      ":rebaseStalePrs",
+      ":semanticCommits",
+      ":updateNotScheduled"
+    ],
+    "packageRules": [
+      {
+        "matchDepTypes": [
+          "devDependencies"
+        ],
+        "matchUpdateTypes": [
+          "lockFileMaintenance",
+          "minor",
+          "patch",
+          "pin"
+        ],
+        "automerge": true
+      },
+      {
+        "matchPackagePatterns": ["@edx", "@openedx"],
+        "matchUpdateTypes": ["minor", "patch"],
+        "automerge": true
+      }
+    ],
+    "timezone": "America/New_York"
+  }

.github/workflows/ci.yml

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

.github/workflows/npm-publish.yml

@@ -1,35 +0,0 @@
-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,5 +1,6 @@
 .DS_Store
 .eslintcache
+env.config.*
 node_modules
 npm-debug.log
 coverage
@@ -25,3 +26,4 @@ module.config.js
 ### transifex ###
 src/i18n/transifex_input.json
 temp
+src/i18n/messages

.husky/pre-push

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

.nvmrc

@@ -1 +1 @@
-18.15
+20

.releaserc

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

.tx/config

@@ -1,9 +0,0 @@
-[main]
-host = https://www.transifex.com
-
-[o:open-edx:p:edx-platform:r:frontend-app-learner-dashboard]
-file_filter = src/i18n/messages/<lang>.json
-source_file = src/i18n/transifex_input.json
-source_lang = en
-type        = KEYVALUEJSON
-

Makefile

@@ -1,8 +1,6 @@
 npm-install-%: ## install specified % npm package
 	npm install $* --save-dev
 	git add package.json
-export TRANSIFEX_RESOURCE = frontend-app-learner-dashboard
-transifex_langs = "ar,fr,fr_CA,es_419,pt_BR,zh_CN"
 
 intl_imports = ./node_modules/.bin/intl-imports.js
 transifex_utils = ./node_modules/.bin/transifex-utils.js
@@ -42,34 +40,17 @@ detect_changed_source_translations:
 	# Checking for changed translations...
 	git diff --exit-code $(i18n)
 
-# Pushes translations to Transifex.  You must run make extract_translations first.
-push_translations:
-	# Pushing strings to Transifex...
-	tx push -s
-	# Fetching hashes from Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/get_hashed_strings_v3.sh
-	# Writing out comments to file...
-	$(transifex_utils) $(transifex_temp) --comments --v3-scripts-path
-	# Pushing comments to Transifex...
-	./node_modules/@edx/reactifex/bash_scripts/put_comments_v3.sh
-
-ifeq ($(OPENEDX_ATLAS_PULL),)
-# Pulls translations from Transifex.
-pull_translations:
-	tx pull -t -f --mode reviewed --languages=$(transifex_langs)
-else
-# Experimental: OEP-58 Pulls translations using atlas
 pull_translations:
 	rm -rf src/i18n/messages
 	mkdir src/i18n/messages
 	cd src/i18n/messages \
-      && atlas pull --filter=$(transifex_langs) \
+      && atlas pull $(ATLAS_OPTIONS) \
+               translations/frontend-platform/src/i18n/messages:frontend-platform \
                translations/paragon/src/i18n/messages:paragon \
                translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
                translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard
 
-	$(intl_imports) paragon frontend-component-footer frontend-app-learner-dashboard
+	$(intl_imports) frontend-platform paragon frontend-component-footer frontend-app-learner-dashboard
-endif
 
 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:

README.md

@@ -1,65 +0,0 @@
-# frontend-app-learner-dashboard
-
-The Learner Home app is a microfrontend (MFE) course listing experience for the Open edX Learning Management System (LMS).  This experience was designed to provide a clean and functional interface to allow learners to view all of their open enrollments, as well as take relevant actions on those enrollments.  It also serves as host to a number of exposed "widget" containers to provide upsell and discovery widgets as sidebar/footer components.
-
-## Quickstart
-
-To start the MFE and enable the feature in LMS:
-
-1. Start the MFE with `npm run start`. Take a note of the path/port (defaults to `http://localhost:1996`).
-
-From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not already, and then redirected to your home page.
-
-## Contributing
-
-A core goal of this app is to provide a clean experimentation interface.  To promote this end, we have provided a silo'ed code directory at `src/widgets` in which contributors should add their custom widget components.  In order to ensure our ability to maintain the code stability of the app, the code for these widgets should be strictly contained within the bounds of that directory.
-
-Once written, the widgets can be configured into one of our widget containers at `src/containers/WidgetContainers`.  This can include conditional logic, as well as Optimizely triggers. It is important to note that our integration tests will isolate and ignore these containers, and thus testing your widget is the response of the creator/maintainer of the widget itself.
-
-Some guidelines for writing widgets:
-* Code for the widget should be strictly confined to the `src/widgets` directory.
-* You can load data from the redux store, but should not add or modify fields in that structure.
-* Network events should be managed in component hooks, though can use our `data/constants/requests:requestStates` for ease of tracking the request states.
-
- ## License
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-## Getting Help
-
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
-
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.
-
-https://github.com/openedx/frontend-app-learner-dashboard/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
-
-## Resources
-
-* [Learner Home project info at the Open edX Wiki](https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575906333/Learner+Home)
-
-## The Open edX Code of Conduct
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
-
-## Reporting Security Issues
-
-Please do not report security issues in public. Please email security@openedx.org.

README.rst

@@ -0,0 +1,107 @@
+|license-badge| |status-badge| |ci-badge| |codecov-badge|
+
+.. |license-badge| image:: https://img.shields.io/github/license/openedx/frontend-app-learner-dashboard.svg
+    :target: https://github.com/openedx/frontend-app-learner-dashboard/blob/master/LICENSE
+    :alt: License
+.. |status-badge| image:: https://img.shields.io/badge/Status-Maintained-brightgreen
+    :alt: Maintained
+.. |ci-badge| image:: https://github.com/openedx/frontend-app-learner-dashboard/actions/workflows/ci.yml/badge.svg
+    :target: https://github.com/openedx/frontend-app-learner-dashboard/actions/workflows/ci.yml
+    :alt: Continuous Integration
+.. |codecov-badge| image:: https://codecov.io/github/openedx/frontend-app-learner-dashboard/coverage.svg?branch=master
+    :target: https://app.codecov.io/github/openedx/frontend-app-learner-dashboard?branch=master
+    :alt: Codecov
+
+frontend-app-learner-dashboard
+==============================
+
+The Learner Home app is a microfrontend (MFE) course listing experience for the Open edX Learning Management System
+(LMS).  This experience was designed to provide a clean and functional interface to allow learners to view all of their
+open enrollments, as well as take relevant actions on those enrollments.  It also serves as host to a number of exposed
+"widget" containers to provide upsell and discovery widgets as sidebar/footer components.
+
+Quickstart
+----------
+
+To start the MFE and enable the feature in LMS:
+
+1. Start the MFE with ``npm run start``. Take a note of the path/port (defaults to ``http://localhost:1996``).
+
+From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not
+already, and then redirected to your home page.
+
+Plugins
+-------
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
+Contributing
+------------
+
+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
+-------
+
+The code in this repository is licensed under the AGPLv3 unless otherwise noted.
+
+Please see the `license`_ for more info.
+
+.. _license: https://github.com/openedx/frontend-app-learner-dashboard/blob/master/LICENSE
+
+Getting Help
+------------
+
+If you're having trouble, we have discussion forums at https://discuss.openedx.org where you can connect with others in
+the community.
+
+Our real-time conversations are on Slack. You can request a `Slack invitation`_, then join our
+`community Slack workspace`_.  Because this is a frontend repository, the best place to discuss it would be in the
+`#wg-frontend channel`_.
+
+For anything non-trivial, the best path is to open an issue in this repository with as many details about the issue you
+are facing as you can provide.
+
+https://github.com/openedx/frontend-app-learner-dashboard/issues
+
+For more information about these options, see the `Getting Help`_ page.
+
+.. _Slack invitation: https://openedx.org/slack
+.. _community Slack workspace: https://openedx.slack.com/
+.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
+.. _Getting Help: https://openedx.org/community/connect
+
+Resources
+---------
+
+Additional info about the Learner Home MFE project can be found on the `Open edX Wiki`_.
+
+.. _Open edX Wiki: https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575906333/Learner+Home
+
+The Open edX Code of Conduct
+----------------------------
+
+All community members are expected to follow the `Open edX Code of Conduct`_.
+
+.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
+
+Reporting Security Issues
+-------------------------
+
+Please do not report security issues in public. Please email security@openedx.org.

catalog-info.yaml

@@ -0,0 +1,25 @@
+# This file records information about this repo. Its use is described in OEP-55:
+# https://open-edx-proposals.readthedocs.io/en/latest/processes/oep-0055-proc-project-maintainers.html
+apiVersion: backstage.io/v1alpha1
+kind: Component
+metadata:
+  name: 'frontend-app-learner-dashboard'
+  description: 'The Microfrontend for the course listing interface allowing learners to view and act upon enrollments.'
+  links:
+    - url: 'https://github.com/openedx/frontend-app-learner-dashboard/blob/master/README.rst'
+      title: 'Documentation'
+      icon: 'Article'
+  annotations:
+    # (Optional) Annotation keys and values can be whatever you want.
+    # We use it in Open edX repos to have a comma-separated list of GitHub user
+    # names that might be interested in changes to the architecture of this
+    # component.
+    openedx.org/arch-interest-groups: ""
+    # This can be multiple comma-separated projects.
+    openedx.org/add-to-projects: "openedx:23"
+    openedx.org/release: "master"
+spec:
+  type: 'service'
+  lifecycle: 'production'
+  owner: 2U-aperture
+# (Optional) An array of different components or resources.

example.env.config.js

@@ -0,0 +1,72 @@
+/*
+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',
+  HOTJAR_APP_ID: '',
+  HOTJAR_VERSION: 6,
+  HOTJAR_DEBUG: '',
+  NEW_RELIC_APP_ID: '',
+  NEW_RELIC_LICENSE_KEY: '',
+  ACCOUNT_SETTINGS_URL: 'http://localhost:1997',
+  ACCOUNT_PROFILE_URL: 'http://localhost:1995',
+  ENABLE_NOTICES: '',
+  CAREER_LINK_URL: '',
+  EXPERIMENT_08_23_VAN_PAINTED_DOOR: true,
+};

jest.config.js

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

openedx.yaml

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

package.json

@@ -6,6 +6,9 @@
     "type": "git",
     "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
   },
+  "browserslist": [
+    "extends @edx/browserslist-config"
+  ],
   "scripts": {
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
@@ -13,11 +16,11 @@
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
     "start": "fedx-scripts webpack-dev-server --progress",
+    "dev": "PUBLIC_PATH=/learner-dashboard/ MFE_CONFIG_API_URL='http://localhost:8000/api/mfe_config/v1' fedx-scripts webpack-dev-server --progress --host apps.local.openedx.io",
     "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
     "quality": "npm run lint-fix && npm run test",
     "watch-tests": "jest --watch",
-    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "snapshot": "fedx-scripts jest --updateSnapshot"
-    "prepare": "husky install"
   },
   "author": "edX",
   "license": "AGPL-3.0",
@@ -27,73 +30,58 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
-    "@edx/browserslist-config": "^1.1.0",
+    "@edx/frontend-component-footer": "^14.6.0",
-    "@edx/frontend-component-footer": "^12.2.1",
+    "@edx/frontend-component-header": "^6.2.0",
-    "@edx/frontend-enterprise-hotjar": "^2.0.0",
+    "@edx/frontend-enterprise-hotjar": "7.2.0",
-    "@edx/frontend-platform": "^5.5.4",
+    "@edx/frontend-platform": "^8.3.1",
-    "@edx/paragon": "^20.44.0",
+    "@edx/openedx-atlas": "^0.6.0",
-    "@edx/react-unit-test-utils": "^1.7.0",
+    "@edx/react-unit-test-utils": "^4.0.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.15",
+    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@optimizely/react-sdk": "^2.9.2",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
-    "@redux-beacon/segment": "^1.1.0",
+    "@openedx/paragon": "^22.16.0",
-    "@reduxjs/toolkit": "^1.6.1",
+    "@redux-devtools/extension": "3.3.0",
-    "@testing-library/user-event": "^13.5.0",
+    "@reduxjs/toolkit": "^2.0.0",
-    "axios": "^0.21.4",
     "classnames": "^2.3.1",
-    "core-js": "3.16.2",
+    "core-js": "3.40.0",
-    "dompurify": "^2.3.1",
+    "filesize": "^10.0.0",
-    "email-prop-type": "^3.0.1",
-    "enzyme": "^3.11.0",
-    "enzyme-to-json": "^3.6.2",
-    "file-saver": "^2.0.5",
-    "filesize": "^8.0.6",
     "font-awesome": "4.7.0",
-    "history": "5.0.1",
+    "history": "5.3.0",
-    "html-react-parser": "^1.3.0",
-    "jest": "^26.6.3",
-    "jest-when": "^3.6.0",
     "lodash": "^4.17.21",
     "moment": "^2.29.4",
-    "prop-types": "15.7.2",
+    "prop-types": "15.8.1",
-    "query-string": "7.0.1",
+    "query-string": "7.1.3",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-helmet": "^6.1.0",
-    "react-intl": "^5.20.9",
+    "react-intl": "6.8.9",
-    "react-pdf": "^5.5.0",
     "react-redux": "^7.2.4",
-    "react-router-dom": "6.15.0",
+    "react-router-dom": "6.29.0",
     "react-share": "^4.4.0",
-    "react-zendesk": "^0.1.13",
+    "redux": "4.2.1",
-    "redux": "4.1.1",
-    "redux-beacon": "^2.1.0",
-    "redux-devtools-extension": "2.13.9",
     "redux-logger": "3.0.6",
-    "redux-thunk": "2.3.0",
+    "redux-thunk": "2.4.2",
-    "regenerator-runtime": "^0.13.9",
+    "regenerator-runtime": "^0.14.0",
     "reselect": "^4.0.0",
     "universal-cookie": "^4.0.4",
-    "util": "^0.12.4",
+    "util": "^0.12.4"
-    "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "13.0.1",
+    "@edx/browserslist-config": "^1.3.0",
     "@edx/reactifex": "^2.1.1",
-    "@testing-library/jest-dom": "^5.14.1",
+    "@openedx/frontend-build": "^14.3.3",
-    "@testing-library/react": "^12.1.0",
+    "@testing-library/jest-dom": "^6.6.3",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
+    "@testing-library/react": "^16.2.0",
-    "axios-mock-adapter": "^1.20.0",
+    "copy-webpack-plugin": "^12.0.0",
-    "copy-webpack-plugin": "^11.0.0",
-    "fetch-mock": "^9.11.0",
-    "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest-expect-message": "^1.0.2",
+    "jest": "^29.7.0",
-    "react-dev-utils": "^11.0.4",
+    "jest-environment-jsdom": "^29.7.0",
-    "react-test-renderer": "^17.0.2",
+    "jest-expect-message": "^1.1.3",
-    "redux-mock-store": "^1.5.4",
+    "jest-when": "^3.6.0",
-    "semantic-release": "^20.1.3"
+    "react-dev-utils": "^12.0.0",
+    "react-test-renderer": "^18.3.1",
+    "redux-mock-store": "^1.5.4"
   }
 }

src/App.jsx

@@ -6,8 +6,8 @@ import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
 import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
-import Footer from '@edx/frontend-component-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import { RequestKeys } from 'data/constants/requests';
 import store from 'data/store';
@@ -17,8 +17,6 @@ import {
 } 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';
 
@@ -42,19 +40,6 @@ export const App = () => {
   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 = () => {
@@ -91,26 +76,22 @@ export const App = () => {
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
         <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-        {optimizelyScript()}
       </Helmet>
       <div>
         <AppWrapper>
           <LearnerDashboardHeader />
-          <main>
+          <main id="main">
             {hasNetworkFailure
               ? (
                 <Alert variant="danger">
                   <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
                 </Alert>
               ) : (
-                <ExperimentProvider>
+                <Dashboard />
-                  <Dashboard />
-                </ExperimentProvider>
               )}
           </main>
         </AppWrapper>
-        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+        <FooterSlot />
-        <ZendeskFab />
       </div>
     </>
   );

src/App.scss

@@ -1,7 +1,7 @@
 // frontend-app-*/src/index.scss
 @import "~@edx/brand/paragon/fonts";
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 $fa-font-path: "~font-awesome/fonts";
@@ -9,6 +9,7 @@ $fa-font-path: "~font-awesome/fonts";
 
 $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
 
+@import "~@edx/frontend-component-header/dist/index";
 @import "~@edx/frontend-component-footer/dist/_footer";
 
 .text-ellipsis {

src/App.test.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Helmet } from 'react-helmet';
 import { shallow } from '@edx/react-unit-test-utils';
 
-import Footer from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { getConfig } from '@edx/frontend-platform';
 
@@ -11,18 +10,13 @@ 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', () => 'Footer');
+jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
 
 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',
@@ -38,8 +32,6 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('data/store', () => 'data/store');
 
-const logo = 'fakeLogo.png';
-
 jest.mock('@edx/frontend-platform', () => ({
   getConfig: jest.fn(() => ({})),
 }));
@@ -66,9 +58,6 @@ describe('App router component', () => {
       it('displays learner dashboard header', () => {
         expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
       });
-      test('Footer logo drawn from env variable', () => {
-        expect(el.instance.findByType(Footer)[0].props.logo).toEqual(logo);
-      });
       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');
@@ -78,61 +67,58 @@ describe('App router component', () => {
     describe('no network failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        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];
+        const dashboard = main.children[0];
-        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(dashboard.type).toEqual('Dashboard');
-        expect(expProvider.children.length).toEqual(1);
         expect(
-          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+          dashboard.matches(shallow(<Dashboard />)),
         ).toEqual(true);
       });
     });
     describe('no network failure with optimizely url', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_URL: 'fake.url' });
+        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];
+        const dashboard = main.children[0];
-        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(dashboard.type).toEqual('Dashboard');
-        expect(expProvider.children.length).toEqual(1);
         expect(
-          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+          dashboard.matches(shallow(<Dashboard />)),
         ).toEqual(true);
       });
     });
     describe('no network failure with optimizely project id', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_PROJECT_ID: 'fakeId' });
+        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];
+        const dashboard = main.children[0];
-        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(dashboard.type).toEqual('Dashboard');
-        expect(expProvider.children.length).toEqual(1);
         expect(
-          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+          dashboard.matches(shallow(<Dashboard />)),
         ).toEqual(true);
       });
     });
     describe('initialize failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
         el = shallow(<App />);
       });
       runBasicTests();
@@ -150,7 +136,7 @@ describe('App router component', () => {
     describe('refresh failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
+        getConfig.mockReturnValue({});
         el = shallow(<App />);
       });
       runBasicTests();

src/ExperimentContext.jsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useWindowSize, breakpoints } from '@edx/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

@@ -1,123 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-import { waitFor } from '@testing-library/react';
-import { useWindowSize } from '@edx/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('successfull 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('unsuccessfull 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();
-
-      mount(
-        <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/__snapshots__/App.test.jsx.snap

@@ -17,7 +17,9 @@ exports[`App router component component initialize failure snapshot 1`] = `
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
+        id="main"
+      >
         <Alert
           variant="danger"
         >
@@ -27,10 +29,7 @@ exports[`App router component component initialize failure snapshot 1`] = `
         </Alert>
       </main>
     </AppWrapper>
-    <Footer
+    <FooterSlot />
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
   </div>
 </Fragment>
 `;
@@ -52,16 +51,13 @@ exports[`App router component component no network failure snapshot 1`] = `
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
-        <ExperimentProvider>
+        id="main"
-          <Dashboard />
+      >
-        </ExperimentProvider>
+        <Dashboard />
       </main>
     </AppWrapper>
-    <Footer
+    <FooterSlot />
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
   </div>
 </Fragment>
 `;
@@ -79,23 +75,17 @@ exports[`App router component component no network failure with optimizely proje
       rel="shortcut icon"
       type="image/x-icon"
     />
-    <script
-      src="undefined/optimizelyjs/fakeId.js"
-    />
   </HelmetWrapper>
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
-        <ExperimentProvider>
+        id="main"
-          <Dashboard />
+      >
-        </ExperimentProvider>
+        <Dashboard />
       </main>
     </AppWrapper>
-    <Footer
+    <FooterSlot />
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
   </div>
 </Fragment>
 `;
@@ -113,23 +103,17 @@ exports[`App router component component no network failure with optimizely url s
       rel="shortcut icon"
       type="image/x-icon"
     />
-    <script
-      src="fake.url"
-    />
   </HelmetWrapper>
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
-        <ExperimentProvider>
+        id="main"
-          <Dashboard />
+      >
-        </ExperimentProvider>
+        <Dashboard />
       </main>
     </AppWrapper>
-    <Footer
+    <FooterSlot />
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
   </div>
 </Fragment>
 `;
@@ -151,7 +135,9 @@ exports[`App router component component refresh failure snapshot 1`] = `
   <div>
     <AppWrapper>
       <LearnerDashboardHeader />
-      <main>
+      <main
+        id="main"
+      >
         <Alert
           variant="danger"
         >
@@ -161,10 +147,7 @@ exports[`App router component component refresh failure snapshot 1`] = `
         </Alert>
       </main>
     </AppWrapper>
-    <Footer
+    <FooterSlot />
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
   </div>
 </Fragment>
 `;

src/__snapshots__/index.test.jsx.snap

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

src/components/Banner.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
-import { Info } from '@edx/paragon/icons';
+import { Info } from '@openedx/paragon/icons';
 
 export const Banner = ({
   children, variant, icon, className,

src/components/Banner.test.jsx

@@ -1,6 +1,6 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { Alert } from '@edx/paragon';
+import { Alert } from '@openedx/paragon';
 
 import Banner from './Banner';
 
@@ -11,17 +11,17 @@ describe('Banner', () => {
   describe('snapshot', () => {
     test('renders default banner', () => {
       const wrapper = shallow(<Banner {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('renders with variants', () => {
       const wrapper = shallow(<Banner {...props} variant="success" />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
 
-      expect(wrapper.find(Alert).prop('variant')).toEqual('success');
+      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).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

src/components/NoticesWrapper/index.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import useNoticesWrapperData from './hooks';
 import NoticesWrapper from '.';
@@ -22,13 +22,15 @@ describe('NoticesWrapper component', () => {
     it('does not show children if redirected', () => {
       useNoticesWrapperData.mockReturnValueOnce({ isRedirected: true });
       el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
-      expect(el.children().length).toEqual(0);
+      expect(el.instance.children.length).toEqual(0);
     });
     it('shows children if not redirected', () => {
       el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
-      expect(el.children().length).toEqual(2);
+      expect(el.instance.children.length).toEqual(2);
-      expect(el.children().at(0).matchesElement(children[0])).toEqual(true);
+      expect(el.instance.children[0].type).toEqual(shallow(children[0]).type);
-      expect(el.children().at(1).matchesElement(children[1])).toEqual(true);
+      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

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

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

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

src/components/ZendeskFab/messages.js

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

src/config/index.js

@@ -12,11 +12,13 @@ const configuration = {
   // 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',
+  SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
+  ENABLE_PROGRAMS: process.env.ENABLE_PROGRAMS === 'true',
 };
 
 const features = {};

src/containers/CourseCard/CourseCard.scss

@@ -1,4 +1,4 @@
-@import "@edx/paragon/scss/core/core";
+@import "@openedx/paragon/scss/core/core";
 
 .course-card {
   .card {

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

@@ -1,4 +1,4 @@
-import { useWindowSize, breakpoints } from '@edx/paragon';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
 
 export const useIsCollapsed = () => {
   const { width } = useWindowSize();

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

@@ -1,4 +1,4 @@
-import { useWindowSize, breakpoints } from '@edx/paragon';
+import { useWindowSize, breakpoints } from '@openedx/paragon';
 import useIsCollapsed from './hooks';
 
 describe('useIsCollapsed', () => {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import useIsCollapsed from './hooks';
 

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import ActionButton from '.';
 
@@ -14,12 +14,12 @@ describe('ActionButton', () => {
     test('is collapsed', () => {
       useIsCollapsed.mockReturnValueOnce(true);
       const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is not collapsed', () => {
       useIsCollapsed.mockReturnValueOnce(false);
       const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
 });

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

@@ -1,6 +1,5 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
@@ -28,7 +27,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
 );
 
 describe('BeginCourseButton', () => {
@@ -59,10 +58,10 @@ describe('BeginCourseButton', () => {
         wrapper = shallow(<BeginCourseButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be disabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+        expect(wrapper.instance.props.disabled).toEqual(true);
       });
     });
     describe('enabled', () => {
@@ -70,13 +69,13 @@ describe('BeginCourseButton', () => {
         wrapper = shallow(<BeginCourseButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be enabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+        expect(wrapper.instance.props.disabled).toEqual(false);
       });
       it('should track enter course clicked event on click, with exec ed param', () => {
-        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
           track.course.enterCourseClicked,
           props.cardId,
           homeUrl + execEdPath(props.cardId),

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

@@ -1,6 +1,5 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
-import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
@@ -27,7 +26,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
 );
 
 let wrapper;
@@ -57,10 +56,10 @@ describe('ResumeButton', () => {
         wrapper = shallow(<ResumeButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be disabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+        expect(wrapper.instance.props.disabled).toEqual(true);
       });
     });
     describe('enabled', () => {
@@ -68,13 +67,13 @@ describe('ResumeButton', () => {
         wrapper = shallow(<ResumeButton {...props} />);
       });
       test('snapshot', () => {
-        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.snapshot).toMatchSnapshot();
       });
       it('should be enabled', () => {
-        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+        expect(wrapper.instance.props.disabled).toEqual(false);
       });
       it('should track enter course clicked event on click, with exec ed param', () => {
-        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
           track.course.enterCourseClicked,
           props.cardId,
           resumeUrl + execEdPath(props.cardId),

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

@@ -1,7 +1,6 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
-import { htmlProps } from 'data/constants/htmlKeys';
 import useActionDisabledState from '../hooks';
 
 import SelectSessionButton from './SelectSessionButton';
@@ -19,17 +18,17 @@ let wrapper;
 describe('SelectSessionButton', () => {
   const props = { cardId: 'cardId' };
   it('default render', () => {
-    expect(wrapper).toMatchSnapshot();
     wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.prop(htmlProps.onClick).getMockName()).toEqual(
+    expect(wrapper.instance.props.disabled).toEqual(false);
+    expect(wrapper.instance.props.onClick.getMockName()).toEqual(
       reduxHooks.useUpdateSelectSessionModalCallback().getMockName(),
     );
   });
   test('disabled states', () => {
     useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
-    expect(wrapper).toMatchSnapshot();
     wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    expect(wrapper.snapshot).toMatchSnapshot();
+    expect(wrapper.instance.props.disabled).toEqual(true);
   });
 });

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

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Locked } from '@edx/paragon/icons';
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
-import 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

@@ -1,50 +0,0 @@
-import { shallow } from 'enzyme';
-
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
-import { htmlProps } from 'data/constants/htmlKeys';
-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).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
-      expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
-        track.course.upgradeClicked,
-        props.cardId,
-        upgradeUrl,
-      ));
-    });
-    test('cannot upgrade', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableUpgradeCourse: true });
-      const wrapper = shallow(<UpgradeButton {...props} />);
-      expect(wrapper).toMatchSnapshot();
-      expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
-    });
-  });
-});

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

@@ -1,7 +1,6 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import track from 'tracking';
-import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ViewCourseButton from './ViewCourseButton';
@@ -16,7 +15,7 @@ jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
     useTrackCourseEvent: jest.fn(
-      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+      (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
     ),
   },
 }));
@@ -29,18 +28,18 @@ const homeUrl = 'homeUrl';
 describe('ViewCourseButton', () => {
   test('learner can view course', () => {
     const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
+    expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
       track.course.enterCourseClicked,
       defaultProps.cardId,
       homeUrl,
     ));
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+    expect(wrapper.instance.props.disabled).toEqual(false);
   });
   test('learner cannot view course', () => {
     useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
     const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
+    expect(wrapper.instance.props.disabled).toEqual(true);
   });
 });

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

@@ -6,11 +6,11 @@ exports[`BeginCourseButton snapshot disabled snapshot 1`] = `
   disabled={true}
   href="#"
   onClick={
-    Object {
+    {
-      "trackCourseEvent": Object {
+      "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
+        "url": "home-urlexec-ed-tracking-path=cardId",
       },
     }
   }
@@ -25,11 +25,11 @@ exports[`BeginCourseButton snapshot enabled snapshot 1`] = `
   disabled={false}
   href="#"
   onClick={
-    Object {
+    {
-      "trackCourseEvent": Object {
+      "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
+        "url": "home-urlexec-ed-tracking-path=cardId",
       },
     }
   }

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

@@ -6,11 +6,11 @@ exports[`ResumeButton snapshot disabled snapshot 1`] = `
   disabled={true}
   href="#"
   onClick={
-    Object {
+    {
-      "trackCourseEvent": Object {
+      "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
+        "url": "resume-urlexec-ed-tracking-path=cardId",
       },
     }
   }
@@ -25,11 +25,11 @@ exports[`ResumeButton snapshot enabled snapshot 1`] = `
   disabled={false}
   href="#"
   onClick={
-    Object {
+    {
-      "trackCourseEvent": Object {
+      "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
+        "url": "resume-urlexec-ed-tracking-path=cardId",
       },
     }
   }

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

@@ -1,8 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectSessionButton default render 1`] = `undefined`;
+exports[`SelectSessionButton default render 1`] = `
-
-exports[`SelectSessionButton disabled states 1`] = `
 <ActionButton
   disabled={false}
   onClick={[MockFunction mockOpenSessionModal]}
@@ -10,3 +8,12 @@ exports[`SelectSessionButton disabled states 1`] = `
   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

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

@@ -6,11 +6,11 @@ exports[`ViewCourseButton learner can view course 1`] = `
   disabled={false}
   href="#"
   onClick={
-    Object {
+    {
-      "trackCourseEvent": Object {
+      "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "homeUrl",
+        "url": "homeUrl",
       },
     }
   }
@@ -25,11 +25,11 @@ exports[`ViewCourseButton learner cannot view course 1`] = `
   disabled={true}
   href="#"
   onClick={
-    Object {
+    {
-      "trackCourseEvent": Object {
+      "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.enterCourseClicked],
-        "upgradeUrl": "homeUrl",
+        "url": "homeUrl",
       },
     }
   }

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { ActionRow } from '@edx/paragon';
+import { ActionRow } from '@openedx/paragon';
 
 import { reduxHooks } from 'hooks';
 
-import UpgradeButton from './UpgradeButton';
+import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -14,15 +14,13 @@ 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">
-      {!(isEntitlement || isVerified || isExecEd2UCourse) && <UpgradeButton cardId={cardId} />}
+      <CourseCardActionSlot cardId={cardId} />
       {isEntitlement && (isFulfilled
         ? <ViewCourseButton cardId={cardId} />
         : <SelectSessionButton cardId={cardId} />

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

@@ -2,7 +2,7 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
-import UpgradeButton from './UpgradeButton';
+import CourseCardActionSlot from 'plugin-slots/CourseCardActionSlot';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -19,7 +19,7 @@ jest.mock('hooks', () => ({
   },
 }));
 
-jest.mock('./UpgradeButton', () => 'UpgradeButton');
+jest.mock('plugin-slots/CourseCardActionSlot', () => 'CustomActionButton');
 jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
 jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
 jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
@@ -57,19 +57,7 @@ describe('CourseCardActions', () => {
     });
   });
   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 });
         render();
@@ -81,33 +69,26 @@ describe('CourseCardActions', () => {
         expect(el.instance.findByType(SelectSessionButton)[0].props.cardId).toEqual(cardId);
       });
     });
-    describe('verified course', () => {
+    describe('not entitlement, verified, or exec ed', () => {
-      it('does not render upgrade button', () => {
+      it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
-        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 });
         render();
-        expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+        expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
         expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
       });
       describe('unstarted courses', () => {
-        it('renders UpgradeButton and BeginCourseButton', () => {
+        it('renders CourseCardActionSlot and BeginCourseButton', () => {
           mockHooks();
           render();
-          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
           expect(el.instance.findByType(BeginCourseButton)[0].props.cardId).toEqual(cardId);
         });
       });
       describe('active courses (started, and not archived)', () => {
-        it('renders UpgradeButton and ResumeButton', () => {
+        it('renders CourseCardActionSlot and ResumeButton', () => {
           mockHooks({ hasStarted: true });
           render();
-          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
           expect(el.instance.findByType(ResumeButton)[0].props.cardId).toEqual(cardId);
         });
       });

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

@@ -1,11 +1,6 @@
-import { StrictDict } from 'utils';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
-export const messages = StrictDict({
+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

@@ -2,8 +2,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { MailtoLink, Hyperlink } from '@edx/paragon';
+import { MailtoLink, Hyperlink } from '@openedx/paragon';
-import { CheckCircle } from '@edx/paragon/icons';
+import { CheckCircle } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { utilHooks, reduxHooks } from 'hooks';

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import CertificateBanner from './CertificateBanner';
@@ -61,7 +61,7 @@ describe('CertificateBanner', () => {
           isRestricted: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted with support email', () => {
       const wrapper = createWrapper({
@@ -72,7 +72,7 @@ describe('CertificateBanner', () => {
           supportEmail: 'suport@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted with billing email', () => {
       const wrapper = createWrapper({
@@ -83,7 +83,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified', () => {
       const wrapper = createWrapper({
@@ -94,7 +94,7 @@ describe('CertificateBanner', () => {
           isVerified: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified with support email', () => {
       const wrapper = createWrapper({
@@ -108,7 +108,7 @@ describe('CertificateBanner', () => {
           supportEmail: 'suport@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified with billing email', () => {
       const wrapper = createWrapper({
@@ -122,7 +122,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is restricted and verified with support and billing email', () => {
       const wrapper = createWrapper({
@@ -137,21 +137,21 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is passing and is downloadable', () => {
       const wrapper = createWrapper({
         grade: { isPassing: true },
         certificate: { isDownloadable: true },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and is downloadable', () => {
       const wrapper = createWrapper({
         grade: { isPassing: false },
         certificate: { isDownloadable: true },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and audit', () => {
       const wrapper = createWrapper({
@@ -159,17 +159,17 @@ describe('CertificateBanner', () => {
           isAudit: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and has finished', () => {
       const wrapper = createWrapper({
         courseRun: { isArchived: true },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('not passing and not audit and not finished', () => {
       const wrapper = createWrapper({});
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is passing and is earned but unavailable', () => {
       const wrapper = createWrapper({
@@ -180,7 +180,7 @@ describe('CertificateBanner', () => {
           isEarnedButUnavailable: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
     test('is passing and not downloadable render empty', () => {
       const wrapper = createWrapper({
@@ -188,7 +188,7 @@ describe('CertificateBanner', () => {
           isPassing: true,
         },
       });
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
     });
   });
   describe('behavior', () => {
@@ -202,7 +202,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
+      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);
     });
@@ -219,7 +219,7 @@ describe('CertificateBanner', () => {
           billingEmail: 'billing@email',
         },
       });
-      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
+      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);
     });

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

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { utilHooks, reduxHooks } from 'hooks';
@@ -12,7 +12,6 @@ export const CourseBanner = ({ cardId }) => {
   const {
     isVerified,
     isAuditAccessExpired,
-    canUpgrade,
     coursewareAccess = {},
   } = reduxHooks.useCardEnrollmentData(cardId);
   const courseRun = reduxHooks.useCardCourseRunData(cardId);
@@ -26,13 +25,7 @@ export const CourseBanner = ({ cardId }) => {
   return (
     <>
       {isAuditAccessExpired
-        && (canUpgrade ? (
+        && (
-          <Banner>
-            {formatMessage(messages.auditAccessExpired)}
-            {'  '}
-            {formatMessage(messages.upgradeToAccess)}
-          </Banner>
-        ) : (
           <Banner>
             {formatMessage(messages.auditAccessExpired)}
             {'  '}
@@ -40,17 +33,7 @@ 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>
@@ -59,6 +42,7 @@ export const CourseBanner = ({ cardId }) => {
           })}
         </Banner>
       )}
+
       {(!isStaff && hasUnmetPrerequisites) && (
         <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
       )}

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 import { reduxHooks } from 'hooks';
 import { formatMessage } from 'testUtils';
@@ -25,7 +25,6 @@ let el;
 
 const enrollmentData = {
   isVerified: false,
-  canUpgrade: false,
   isAuditAccessExpired: false,
   coursewareAccess: {
     hasUnmetPrerequisites: false,
@@ -65,60 +64,27 @@ describe('CourseBanner', () => {
     render({ enrollment: { isVerified: true } });
     expect(el.isEmptyRender()).toEqual(true);
   });
-  describe('audit access expired, can upgrade', () => {
+  describe('audit access expired', () => {
-    beforeEach(() => {
-      render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } });
-    });
-    test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el).toMatchSnapshot();
-    });
-    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.text()).toContain(messages.upgradeToAccess.defaultMessage);
-    });
-  });
-  describe('audit access expired, cannot upgrade', () => {
     beforeEach(() => {
       render({ enrollment: { isAuditAccessExpired: true } });
     });
     test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
-    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+    test('messages: auditAccessExpired', () => {
-      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.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).toMatchSnapshot();
-    });
-    test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
-      expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage);
-      const link = el.find(Hyperlink);
-      expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage);
-      expect(link.props().destination).toEqual(courseRunData.marketingUrl);
-    });
-  });
-  test('no display if audit access not expired and (course is not active or can upgrade)', () => {
-    render();
-    // isEmptyRender() isn't true because the minimal is <Fragment />
-    expect(el.html()).toEqual('');
-    render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
-    expect(el.html()).toEqual('');
-  });
   describe('unmet prerequisites', () => {
     beforeEach(() => {
       render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
     });
     test('snapshot: unmetPrerequisites', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     test('messages: prerequisitesNotMet', () => {
-      expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage);
+      expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
     });
   });
   describe('too early', () => {
@@ -126,17 +92,17 @@ describe('CourseBanner', () => {
       beforeEach(() => {
         render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
       });
-      test('snapshot', () => expect(el).toMatchSnapshot());
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-      test('messages', () => expect(el.text()).toEqual(''));
+      test('messages', () => expect(el.instance.children).toEqual([]));
     });
     describe('has start date', () => {
       beforeEach(() => {
         render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
       });
-      test('snapshot', () => expect(el).toMatchSnapshot());
+      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
 
       test('messages: courseHasNotStarted', () => {
-        expect(el.text()).toContain(
+        expect(el.instance.children[0].children[0].el).toContain(
           formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
         );
       });
@@ -147,7 +113,7 @@ describe('CourseBanner', () => {
       render({ enrollment: { coursewareAccess: { isStaff: true } } });
     });
     test('snapshot: isStaff', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
   });
   test('snapshot: stacking banners', () => {
@@ -160,6 +126,6 @@ describe('CourseBanner', () => {
         },
       },
     });
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

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

@@ -6,17 +6,18 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
 >
   <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"
           >
@@ -38,6 +39,7 @@ exports[`CreditBanner component render with error state with no email snapshot 1
 >
   <p
     className="credit-error-msg"
+    data-testid="credit-error-msg"
   >
     An error occurred with this transaction.
   </p>

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

@@ -5,7 +5,7 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import Banner from 'components/Banner';
 
-import { MailtoLink } from '@edx/paragon';
+import { MailtoLink } from '@openedx/paragon';
 import hooks from './hooks';
 import messages from './messages';
 
@@ -21,7 +21,7 @@ export const CreditBanner = ({ cardId }) => {
   return (
     <Banner {...(error && { variant: 'danger' })}>
       {error && (
-        <p className="credit-error-msg">
+        <p className="credit-error-msg" data-testid="credit-error-msg">
           {supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}
         </p>
       )}

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
-import { MailtoLink } from '@edx/paragon';
+import { MailtoLink } from '@openedx/paragon';
 
 import hooks from './hooks';
 import messages from './messages';
@@ -44,20 +44,18 @@ describe('CreditBanner component', () => {
         el = shallow(<CreditBanner cardId={cardId} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('passes danger variant to Banner parent', () => {
-        expect(el.find('Banner').props().variant).toEqual('danger');
+        expect(el.instance.findByType('Banner')[0].props.variant).toEqual('danger');
       });
       it('includes credit-error-msg with support email link', () => {
-        expect(el.find('.credit-error-msg').containsMatchingElement(
+        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(shallow(formatMessage(messages.error, {
-          formatMessage(messages.error, {
+          supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
-            supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
+        })));
-          }),
-        )).toEqual(true);
       });
       it('loads ContentComponent with cardId', () => {
-        expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
+        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
       });
     });
 
@@ -70,12 +68,10 @@ describe('CreditBanner component', () => {
         el = shallow(<CreditBanner cardId={cardId} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('includes credit-error-msg without support email link', () => {
-        expect(el.find('.credit-error-msg').containsMatchingElement(
+        expect(el.instance.findByTestId('credit-error-msg')[0].children[0].el).toEqual(formatMessage(messages.errorNoEmail));
-          formatMessage(messages.errorNoEmail),
-        )).toEqual(true);
       });
     });
 
@@ -89,10 +85,10 @@ describe('CreditBanner component', () => {
         el = shallow(<CreditBanner cardId={cardId} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads ContentComponent with cardId', () => {
-        expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
+        expect(el.instance.findByType('ContentComponent')[0].props.cardId).toEqual(cardId);
       });
     });
   });

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

@@ -1,6 +1,6 @@
-import { StrictDict } from 'utils';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
-export const messages = StrictDict({
+const messages = defineMessages({
   error: {
     id: 'learner-dash.courseCard.banners.credit.error',
     description: '',

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { reduxHooks } from 'hooks';
@@ -38,19 +38,19 @@ describe('ApprovedContent component', () => {
     describe('rendered CreditContent component', () => {
       let component;
       beforeAll(() => {
-        component = el.find('CreditContent');
+        component = el.instance.findByType('CreditContent');
       });
       test('action.href from credit.providerStatusUrl', () => {
-        expect(component.props().action.href).toEqual(credit.providerStatusUrl);
+        expect(component[0].props.action.href).toEqual(credit.providerStatusUrl);
       });
       test('action.message is formatted viewCredit message', () => {
-        expect(component.props().action.message).toEqual(formatMessage(messages.viewCredit));
+        expect(component[0].props.action.message).toEqual(formatMessage(messages.viewCredit));
       });
       test('action.disabled is false', () => {
-        expect(component.props().action.disabled).toEqual(false);
+        expect(component[0].props.action.disabled).toEqual(false);
       });
       test('message is formatted approved message', () => {
-        expect(component.props().message).toEqual(formatMessage(
+        expect(component[0].props.message).toEqual(formatMessage(
           messages.approved,
           {
             congratulations: (<b>{formatMessage(messages.congratulations)}</b>),

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import { formatMessage } from 'testUtils';
@@ -36,7 +36,7 @@ const render = () => {
   el = shallow(<EligibleContent cardId={cardId} />);
 };
 const loadComponent = () => {
-  component = el.find('CreditContent');
+  component = el.instance.findByType('CreditContent');
 };
 describe('EligibleContent component', () => {
   beforeEach(() => {
@@ -56,24 +56,24 @@ describe('EligibleContent component', () => {
         loadComponent();
       });
       test('action.onClick sends credit purchase track event', () => {
-        expect(component.props().action.onClick).toEqual(
+        expect(component[0].props.action.onClick).toEqual(
           track.credit.purchase(courseId),
         );
       });
       test('action.message is formatted getCredit message', () => {
-        expect(component.props().action.message).toEqual(formatMessage(messages.getCredit));
+        expect(component[0].props.action.message).toEqual(formatMessage(messages.getCredit));
       });
       test('message is formatted eligible message if no provider', () => {
         reduxHooks.useCardCreditData.mockReturnValueOnce({});
         render();
         loadComponent();
-        expect(component.props().message).toEqual(formatMessage(
+        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.props().message).toEqual(
+        expect(component[0].props.message).toEqual(
           formatMessage(messages.eligibleFromProvider, { providerName: credit.providerName }),
         );
       });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 
@@ -45,21 +45,21 @@ describe('MustRequestContent component', () => {
   describe('render', () => {
     describe('rendered CreditContent component', () => {
       beforeEach(() => {
-        component = el.find('CreditContent');
+        component = el.instance.findByType('CreditContent');
       });
       test('action.onClick calls createCreditRequest from useCreditRequestData hook', () => {
-        expect(component.props().action.onClick).toEqual(createCreditRequest);
+        expect(component[0].props.action.onClick).toEqual(createCreditRequest);
       });
       test('action.message is formatted requestCredit message', () => {
-        expect(component.props().action.message).toEqual(
+        expect(component[0].props.action.message).toEqual(
           formatMessage(messages.requestCredit),
         );
       });
       test('action.disabled is false', () => {
-        expect(component.props().action.disabled).toEqual(false);
+        expect(component[0].props.action.disabled).toEqual(false);
       });
       test('message is formatted mustRequest message', () => {
-        expect(component.props().message).toEqual(
+        expect(component[0].props.message).toEqual(
           formatMessage(messages.mustRequest, {
             linkToProviderSite: <ProviderLink cardId={cardId} />,
             requestCredit: <b>{formatMessage(messages.requestCredit)}</b>,
@@ -67,7 +67,7 @@ describe('MustRequestContent component', () => {
         );
       });
       test('requestData drawn from useCreditRequestData hook', () => {
-        expect(component.props().requestData).toEqual(requestData);
+        expect(component[0].props.requestData).toEqual(requestData);
       });
     });
   });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { reduxHooks } from 'hooks';
@@ -40,21 +40,21 @@ describe('PendingContent component', () => {
   describe('render', () => {
     describe('rendered CreditContent component', () => {
       beforeEach(() => {
-        component = el.find('CreditContent');
+        component = el.instance.findByType('CreditContent');
       });
       test('action.href will go to provider status site', () => {
-        expect(component.props().action.href).toEqual(providerStatusUrl);
+        expect(component[0].props.action.href).toEqual(providerStatusUrl);
       });
       test('action.message is formatted requestCredit message', () => {
-        expect(component.props().action.message).toEqual(
+        expect(component[0].props.action.message).toEqual(
           formatMessage(messages.viewDetails),
         );
       });
       test('action.disabled is false', () => {
-        expect(component.props().action.disabled).toEqual(false);
+        expect(component[0].props.action.disabled).toEqual(false);
       });
       test('message is formatted pending message', () => {
-        expect(component.props().message).toEqual(
+        expect(component[0].props.message).toEqual(
           formatMessage(messages.received, { providerName }),
         );
       });

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { formatMessage } from 'testUtils';
 import { reduxHooks } from 'hooks';
@@ -25,7 +25,7 @@ reduxHooks.useCardCreditData.mockReturnValue(credit);
 let el;
 let component;
 const render = () => { el = shallow(<RejectedContent cardId={cardId} />); };
-const loadComponent = () => { component = el.find('CreditContent'); };
+const loadComponent = () => { component = el.instance.findByType('CreditContent'); };
 
 describe('RejectedContent component', () => {
   beforeEach(render);
@@ -38,10 +38,10 @@ describe('RejectedContent component', () => {
     describe('rendered CreditContent component', () => {
       beforeAll(loadComponent);
       test('no action is passed', () => {
-        expect(component.props().action).toEqual(undefined);
+        expect(component[0].props.action).toEqual(undefined);
       });
       test('message is formatted rejected message', () => {
-        expect(component.props().message).toEqual(formatMessage(
+        expect(component[0].props.message).toEqual(formatMessage(
           messages.rejected,
           {
             linkToProviderSite: <ProviderLink cardId={cardId} />,

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { ActionRow, Button } from '@edx/paragon';
+import { ActionRow, Button } from '@openedx/paragon';
 import CreditRequestForm from './CreditRequestForm';
 
 export const CreditContent = ({ action, message, requestData }) => (
   <>
-    <div className="message-copy credit-msg">
+    <div className="message-copy credit-msg" data-testid="credit-msg">
       {message}
     </div>
     {action && (
@@ -21,6 +21,7 @@ export const CreditContent = ({ action, message, requestData }) => (
           variant="outline-primary"
           className="border-gray-400"
           onClick={action.onClick}
+          data-testid="action-row-btn"
         >
           {action.message}
         </Button>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import CreditContent from './CreditContent';
 
@@ -22,24 +22,24 @@ describe('CreditContent component', () => {
         el = shallow(<CreditContent {...props} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads href, onClick, and message into action row button', () => {
-        const buttonEl = el.find('ActionRow Button');
+        const buttonEl = el.instance.findByTestId('action-row-btn')[0];
-        expect(buttonEl.props().href).toEqual(action.href);
+        expect(buttonEl.props.href).toEqual(action.href);
-        expect(buttonEl.props().onClick).toEqual(action.onClick);
+        expect(buttonEl.props.onClick).toEqual(action.onClick);
-        expect(buttonEl.props().disabled).toEqual(action.disabled);
+        expect(buttonEl.props.disabled).toEqual(action.disabled);
-        expect(buttonEl.text()).toEqual(action.message);
+        expect(buttonEl.children[0].el).toEqual(action.message);
       });
       it('loads message into credit-msg div', () => {
-        expect(el.find('div.credit-msg').text()).toEqual(message);
+        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData);
+        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
       });
       test('disables action button when action.disabled is true', () => {
-        el.setProps({ action: { ...action, disabled: true } });
+        el = shallow(<CreditContent {...props} action={{ ...action, disabled: true }} />);
-        expect(el.find('ActionRow Button').props().disabled).toEqual(true);
+        expect(el.instance.findByTestId('action-row-btn')[0].props.disabled).toEqual(true);
       });
     });
     describe('without action', () => {
@@ -47,13 +47,13 @@ describe('CreditContent component', () => {
         el = shallow(<CreditContent {...{ message, requestData }} />);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads message into credit-msg div', () => {
-        expect(el.find('div.credit-msg').text()).toEqual(message);
+        expect(el.instance.findByTestId('credit-msg')[0].children[0].el).toEqual(message);
       });
       it('loads CreditRequestForm with passed requestData', () => {
-        expect(el.find('CreditRequestForm').props().requestData).toEqual(requestData);
+        expect(el.instance.findByType('CreditRequestForm')[0].props.requestData).toEqual(requestData);
       });
     });
   });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button, Form, FormControl } from '@edx/paragon';
+import { Button, Form, FormControl } from '@openedx/paragon';
 
 import useCreditRequestFormData from './hooks';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { keyStore } from 'utils';
 
@@ -46,19 +46,19 @@ describe('CreditRequestForm component', () => {
         shallowRender(requestData);
       });
       test('snapshot', () => {
-        expect(el).toMatchSnapshot();
+        expect(el.snapshot).toMatchSnapshot();
       });
       it('loads Form with requestData url', () => {
-        expect(el.find('Form').props().action).toEqual(requestData.url);
+        expect(el.instance.findByType('Form')[0].props.action).toEqual(requestData.url);
       });
       it('loads a textarea form control for each requestData parameter', () => {
-        const controls = el.find('FormControl');
+        const controls = el.instance.findByType('FormControl');
-        expect(controls.at(0).props().name).toEqual(paramKeys.key1);
+        expect(controls[0].props.name).toEqual(paramKeys.key1);
-        expect(controls.at(0).props().value).toEqual(requestData.parameters.key1);
+        expect(controls[0].props.value).toEqual(requestData.parameters.key1);
-        expect(controls.at(1).props().name).toEqual(paramKeys.key2);
+        expect(controls[1].props.name).toEqual(paramKeys.key2);
-        expect(controls.at(1).props().value).toEqual(requestData.parameters.key2);
+        expect(controls[1].props.value).toEqual(requestData.parameters.key2);
-        expect(controls.at(2).props().name).toEqual(paramKeys.key3);
+        expect(controls[2].props.name).toEqual(paramKeys.key3);
-        expect(controls.at(2).props().value).toEqual(requestData.parameters.key3);
+        expect(controls[2].props.value).toEqual(requestData.parameters.key3);
       });
     });
   });

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

@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 import useCreditRequestFormData from './hooks';
 import CreditRequestForm from '.';
 
-jest.unmock('@edx/paragon');
+jest.unmock('@openedx/paragon');
 jest.unmock('react');
 
 jest.mock('./hooks', () => ({

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

@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { reduxHooks } from 'hooks';
-import { Hyperlink } from '@edx/paragon';
+import { Hyperlink } from '@openedx/paragon';
 
 export const ProviderLink = ({ cardId }) => {
   const credit = reduxHooks.useCardCreditData(cardId);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
@@ -30,13 +30,13 @@ describe('ProviderLink component', () => {
   });
   describe('render', () => {
     test('snapshot', () => {
-      expect(el).toMatchSnapshot();
+      expect(el.snapshot).toMatchSnapshot();
     });
     it('passes credit.providerStatusUrl to the hyperlink href', () => {
-      expect(el.find('Hyperlink').props().href).toEqual(credit.providerStatusUrl);
+      expect(el.instance.findByType('Hyperlink')[0].props.href).toEqual(credit.providerStatusUrl);
     });
     it('passes providerName for the link message', () => {
-      expect(el.find('Hyperlink').text()).toEqual(credit.providerName);
+      expect(el.instance.findByType('Hyperlink')[0].children[0].el).toEqual(credit.providerName);
     });
   });
 });

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

@@ -4,6 +4,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
 <Fragment>
   <div
     className="message-copy credit-msg"
+    data-testid="credit-msg"
   >
     test-message
   </div>
@@ -13,6 +14,7 @@ exports[`CreditContent component render with action snapshot 1`] = `
     <Button
       as="a"
       className="border-gray-400"
+      data-testid="action-row-btn"
       disabled={false}
       href="test-action-href"
       onClick={[MockFunction test-action-onClick]}
@@ -25,8 +27,8 @@ exports[`CreditContent component render with action snapshot 1`] = `
   </ActionRow>
   <CreditRequestForm
     requestData={
-      Object {
+      {
-        "parameters": Object {
+        "parameters": {
           "key1": "val1",
         },
         "url": "test-request-data-url",
@@ -40,13 +42,14 @@ exports[`CreditContent component render without action snapshot 1`] = `
 <Fragment>
   <div
     className="message-copy credit-msg"
+    data-testid="credit-msg"
   >
     test-message
   </div>
   <CreditRequestForm
     requestData={
-      Object {
+      {
-        "parameters": Object {
+        "parameters": {
           "key1": "val1",
         },
         "url": "test-request-data-url",

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

@@ -1,6 +1,6 @@
-import { StrictDict } from 'utils';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
-export const messages = StrictDict({
+const messages = defineMessages({
   approved: {
     id: 'learner-dash.courseCard.banners.credit.approved',
     description: '',

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Button, MailtoLink } from '@edx/paragon';
+import { Button, MailtoLink } from '@openedx/paragon';
 
 import { utilHooks, reduxHooks } from 'hooks';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import EntitlementBanner from './EntitlementBanner';
@@ -50,11 +50,11 @@ describe('EntitlementBanner', () => {
   });
   test('snapshot: no sessions available', () => {
     render({ entitlement: { isFulfilled: false, hasSessions: false } });
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('snapshot: expiration warning', () => {
     render({ entitlement: { showExpirationWarning: true } });
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
   test('no display if sessions available and not displaying warning', () => {
     render();

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { ProgramsList } from './ProgramsList';
 
@@ -16,8 +16,8 @@ describe('ProgramsList', () => {
 
   it('renders correctly', () => {
     const wrapper = shallow(<ProgramsList programs={programs} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
 
-    expect(wrapper.find('li').length).toEqual(programs.length);
+    expect(wrapper.instance.findByType('li').length).toEqual(programs.length);
   });
 });

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

@@ -13,12 +13,12 @@ exports[`RelatedProgramsBanner render with programs 1`] = `
   </span>
   <ProgramsList
     programs={
-      Array [
+      [
-        Object {
+        {
           "title": "Program 1",
           "url": "http://example.com/program1",
         },
-        Object {
+        {
           "title": "Program 2",
           "url": "http://example.com/program2",
         },

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Program } from '@edx/paragon/icons';
+import { Program } from '@openedx/paragon/icons';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
@@ -15,16 +15,20 @@ export const RelatedProgramsBanner = ({ cardId }) => {
 
   const programData = reduxHooks.useCardRelatedProgramsData(cardId);
 
+  if (!programData?.length) {
+    return null;
+  }
+
   return (
-    programData?.length > 0 && (
+    <Banner
-      <Banner
+      icon={Program}
-        icon={Program}
+      className="bg-white border-top border-bottom mb-0 related-programs-banner"
-        className="bg-white border-top border-bottom mb-0 related-programs-banner"
+    >
-      >
+      <span className="font-weight-bolder">
-        <span className="font-weight-bolder">{formatMessage(messages.relatedPrograms)}</span>
+        {formatMessage(messages.relatedPrograms)}
-        <ProgramList programs={programData.list} />
+      </span>
-      </Banner>
+      <ProgramList programs={programData.list} />
-    )
+    </Banner>
   );
 };
 RelatedProgramsBanner.propTypes = {

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import RelatedProgramsBanner from '.';
@@ -37,6 +37,6 @@ describe('RelatedProgramsBanner', () => {
       length: 2,
     });
     const el = shallow(<RelatedProgramsBanner cardId={cardId} />);
-    expect(el).toMatchSnapshot();
+    expect(el.snapshot).toMatchSnapshot();
   });
 });

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

@@ -1,6 +1,6 @@
-import { StrictDict } from 'utils';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
-export const messages = StrictDict({
+const messages = defineMessages({
   relatedPrograms: {
     id: 'learner-dash.courseCard.banners.relatedPrograms',
     description: 'title for related programs banner',

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

@@ -15,7 +15,7 @@ exports[`CertificateBanner snapshot is passing and is earned but unavailable 1`]
 </Banner>
 `;
 
-exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `""`;
+exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `null`;
 
 exports[`CertificateBanner snapshot is restricted 1`] = `
 <Banner
@@ -43,14 +43,14 @@ exports[`CertificateBanner snapshot is restricted and verified with billing emai
     
   <format-message-function
     message={
-      Object {
+      {
         "defaultMessage": "If you would like a refund on your Certificate of Achievement, please contact our billing address {billingEmail}",
         "description": "Message to learners to contact billing for certificate refunds",
         "id": "learner-dash.courseCard.banners.certificateRefundContactBilling",
       }
     }
     values={
-      Object {
+      {
         "billingEmail": <MailtoLink
           to="billing@email"
         >
@@ -68,14 +68,14 @@ exports[`CertificateBanner snapshot is restricted and verified with support and
 >
   <format-message-function
     message={
-      Object {
+      {
         "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
         "description": "Restricted certificate warning message",
         "id": "learner-dash.courseCard.banners.certificateRestricted",
       }
     }
     values={
-      Object {
+      {
         "supportEmail": <MailtoLink
           to="suport@email"
         >
@@ -87,14 +87,14 @@ exports[`CertificateBanner snapshot is restricted and verified with support and
     
   <format-message-function
     message={
-      Object {
+      {
         "defaultMessage": "If you would like a refund on your Certificate of Achievement, please contact our billing address {billingEmail}",
         "description": "Message to learners to contact billing for certificate refunds",
         "id": "learner-dash.courseCard.banners.certificateRefundContactBilling",
       }
     }
     values={
-      Object {
+      {
         "billingEmail": <MailtoLink
           to="billing@email"
         >
@@ -112,14 +112,14 @@ exports[`CertificateBanner snapshot is restricted and verified with support emai
 >
   <format-message-function
     message={
-      Object {
+      {
         "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
         "description": "Restricted certificate warning message",
         "id": "learner-dash.courseCard.banners.certificateRestricted",
       }
     }
     values={
-      Object {
+      {
         "supportEmail": <MailtoLink
           to="suport@email"
         >
@@ -147,14 +147,14 @@ exports[`CertificateBanner snapshot is restricted with support email 1`] = `
 >
   <format-message-function
     message={
-      Object {
+      {
         "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
         "description": "Restricted certificate warning message",
         "id": "learner-dash.courseCard.banners.certificateRestricted",
       }
     }
     values={
-      Object {
+      {
         "supportEmail": <MailtoLink
           to="suport@email"
         >

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

@@ -1,16 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CourseBanner audit access expired, can upgrade snapshot: (auditAccessExpired, upgradeToAccess) 1`] = `
+exports[`CourseBanner audit access expired snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
-<Fragment>
-  <Banner>
-    Your audit access to this course has expired.
-      
-    Upgrade now to access your course again.
-  </Banner>
-</Fragment>
-`;
-
-exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
 <Fragment>
   <Banner>
     Your audit access to this course has expired.
@@ -25,21 +15,6 @@ exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAcces
 </Fragment>
 `;
 
-exports[`CourseBanner course run active and cannot upgrade snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink) 1`] = `
-<Fragment>
-  <Banner>
-    Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.
-      
-    <Hyperlink
-      destination="marketing-url"
-      isInline={true}
-    >
-      Explore course details.
-    </Hyperlink>
-  </Banner>
-</Fragment>
-`;
-
 exports[`CourseBanner snapshot: stacking banners 1`] = `<Fragment />`;
 
 exports[`CourseBanner staff snapshot: isStaff 1`] = `<Fragment />`;

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

@@ -4,14 +4,14 @@ exports[`EntitlementBanner snapshot: expiration warning 1`] = `
 <Banner>
   <format-message-function
     message={
-      Object {
+      {
         "defaultMessage": "You must {selectSessionButton} by {changeDeadline} to access the course.",
         "description": "Entitlement course message when the entitlement is expiring soon.",
         "id": "learner-dash.courseCard.banners.entitlementExpiringSoon",
       }
     }
     values={
-      Object {
+      {
         "changeDeadline": "11/11/2022",
         "selectSessionButton": <Button
           className="m-0 p-0"
@@ -33,14 +33,14 @@ exports[`EntitlementBanner snapshot: no sessions available 1`] = `
 >
   <format-message-function
     message={
-      Object {
+      {
         "defaultMessage": "There are no sessions available at the moment.  The course team will create new sessions soon.  If no sessions appear, please contact {emailLink} for information.",
         "description": "Entitlement course message when no sessions are available",
         "id": "learner-dash.courseCard.banners.entitlementUnavailable",
       }
     }
     values={
-      Object {
+      {
         "emailLink": <MailtoLink
           to="test-support-email"
         >

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

@@ -8,7 +8,7 @@ exports[`CourseCardBanners render with isEnrolled false 1`] = `
   <RelatedProgramsBanner
     cardId="test-card-id"
   />
-  <CourseBanner
+  <CourseBannerSlot
     cardId="test-card-id"
   />
   <EntitlementBanner
@@ -25,7 +25,7 @@ exports[`CourseCardBanners renders default CourseCardBanners 1`] = `
   <RelatedProgramsBanner
     cardId="test-card-id"
   />
-  <CourseBanner
+  <CourseBannerSlot
     cardId="test-card-id"
   />
   <EntitlementBanner

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { reduxHooks } from 'hooks';
 
-import CourseBanner from './CourseBanner';
+import CourseBannerSlot from 'plugin-slots/CourseBannerSlot';
 import CertificateBanner from './CertificateBanner';
 import CreditBanner from './CreditBanner';
 import EntitlementBanner from './EntitlementBanner';
@@ -14,7 +14,7 @@ export const CourseCardBanners = ({ cardId }) => {
   return (
     <div className="course-card-banners" data-testid="CourseCardBanners">
       <RelatedProgramsBanner cardId={cardId} />
-      <CourseBanner cardId={cardId} />
+      <CourseBannerSlot cardId={cardId} />
       <EntitlementBanner cardId={cardId} />
       {isEnrolled && <CertificateBanner cardId={cardId} />}
       {isEnrolled && <CreditBanner cardId={cardId} />}

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
@@ -22,11 +22,11 @@ describe('CourseCardBanners', () => {
   };
   test('renders default CourseCardBanners', () => {
     const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
   test('render with isEnrolled false', () => {
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false });
     const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.snapshot).toMatchSnapshot();
   });
 });

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

@@ -1,31 +1,16 @@
-import { StrictDict } from 'utils';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
-export const messages = StrictDict({
+const messages = defineMessages({
   auditAccessExpired: {
     id: 'learner-dash.courseCard.banners.auditAccessExpired',
     description: 'Audit access expiration banner message',
     defaultMessage: 'Your audit access to this course has expired.',
   },
-  upgradeToAccess: {
-    id: 'learner-dash.courseCard.banners.upgradeToAccess',
-    description: 'Upgrade prompt for audit-expired learners that can still upgrade',
-    defaultMessage: 'Upgrade now to access your course again.',
-  },
   findAnotherCourse: {
     id: 'learner-dash.courseCard.banners.findAnotherCourse',
     description: 'Action prompt taking learners to course exploration',
     defaultMessage: 'Find another course',
   },
-  upgradeDeadlinePassed: {
-    id: 'learner-dash.courseCard.banners.upgradeDeadlinePassed',
-    description: 'Audit upgrade deadline passed banner message',
-    defaultMessage: 'Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.',
-  },
-  exploreCourseDetails: {
-    id: 'learner-dash.courseCard.banners.exploreCourseDetails',
-    description: 'Action prompt taking learners to course details page',
-    defaultMessage: 'Explore course details.',
-  },
   certRestricted: {
     id: 'learner-dash.courseCard.banners.certificateRestricted',
     description: 'Restricted certificate warning message',

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

@@ -1,54 +1,56 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CourseCard Details component does not have change session button on regular course 1`] = `
-<span
+<div>
-  className="small"
+  <span
-  data-testid="CourseCardDetails"
+    class="small"
->
+    data-testid="CourseCardDetails"
-  provider-name
+  >
-   • 
+    provider-name
-  test-course-number
+     • 
-   • access-message
+    test-course-number
-</span>
+     • access-message
+  </span>
+</div>
 `;
 
 exports[`CourseCard Details component has change session button on entitlement course 1`] = `
-<span
+<div>
-  className="small"
+  <span
-  data-testid="CourseCardDetails"
+    class="small"
->
+    data-testid="CourseCardDetails"
-  provider-name
-   • 
-  test-course-number
-   • access-message
-   • 
-  <Button
-    className="m-0 p-0"
-    onClick={[MockFunction useSelectSession.openSessionModal]}
-    size="inline"
-    variant="link"
   >
-    change-or-leave-session-message
+    provider-name
-  </Button>
+     • 
-</span>
+    test-course-number
+     • access-message
+     • 
+    <button
+      class="m-0 p-0"
+      variant="link"
+    >
+      change-or-leave-session-message
+    </button>
+  </span>
+</div>
 `;
 
 exports[`CourseCard Details component has change session button on entitlement course but no access message 1`] = `
-<span
+<div>
-  className="small"
+  <span
-  data-testid="CourseCardDetails"
+    class="small"
->
+    data-testid="CourseCardDetails"
-  provider-name
-   • 
-  test-course-number
-   • 
-  <Button
-    className="m-0 p-0"
-    onClick={[MockFunction useSelectSession.openSessionModal]}
-    size="inline"
-    variant="link"
   >
-    change-or-leave-session-message
+    provider-name
-  </Button>
+     • 
-</span>
+    test-course-number
+     • 
+    <button
+      class="m-0 p-0"
+      variant="link"
+    >
+      change-or-leave-session-message
+    </button>
+  </span>
+</div>
 `;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from '@edx/paragon';
+import { Button } from '@openedx/paragon';
 
 import useCardDetailsData from './hooks';
 import './index.scss';

src/containers/CourseCard/components/CourseCardDetails/index.scss

@@ -1,5 +1,5 @@
 @import "~@edx/brand/paragon/variables";
-@import "~@edx/paragon/scss/core/core";
+@import "~@openedx/paragon/scss/core/core";
 @import "~@edx/brand/paragon/overrides";
 
 a.course-card-title {

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import CourseCardDetails from '.';
 
@@ -28,27 +28,44 @@ describe('CourseCard Details component', () => {
       ...defaultHooks,
       ...hookOverrides,
     });
-    return shallow(<CourseCardDetails cardId={cardId} />);
+    return render(<CourseCardDetails cardId={cardId} />);
+  };
+
+  const fetchSeparators = (wrapper) => {
+    const elements = wrapper.container.querySelectorAll('*');
+    let separatorsCount = 0;
+
+    elements.forEach((element) => {
+      // Use a regular expression to find all occurrences of '•' in the text content
+      const separatorMatches = element.textContent.match(/•/g);
+
+      // If matches are found, add the count to the total
+      if (separatorMatches) {
+        separatorsCount += separatorMatches.length;
+      }
+    });
+
+    return separatorsCount;
   };
 
   test('has change session button on entitlement course', () => {
     const wrapper = createWrapper();
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container).toMatchSnapshot();
     // it has 3 separator, 4 column
-    expect(wrapper.text().match(/•/g)).toHaveLength(3);
+    expect(fetchSeparators(wrapper)).toBe(3);
   });
 
   test('has change session button on entitlement course but no access message', () => {
     const wrapper = createWrapper({ accessMessage: null });
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container).toMatchSnapshot();
     // it has 2 separator, 3 column
-    expect(wrapper.text().match(/•/g)).toHaveLength(2);
+    expect(fetchSeparators(wrapper)).toBe(2);
   });
 
   test('does not have change session button on regular course', () => {
     const wrapper = createWrapper({ isEntitlement: false });
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.container).toMatchSnapshot();
     // it has 2 separator, 3 column
-    expect(wrapper.text().match(/•/g)).toHaveLength(2);
+    expect(fetchSeparators(wrapper)).toBe(2);
   });
 });

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

@@ -1,6 +1,6 @@
-import { StrictDict } from 'utils';
+import { defineMessages } from '@edx/frontend-platform/i18n';
 
-export const messages = StrictDict({
+const messages = defineMessages({
   accessExpired: {
     id: 'learner-dash.courseCard.CourseCardDetails.accessExpired',
     description: 'Course access expiration date message on course card for expired access.',

src/containers/CourseCard/components/CourseCardImage.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
-import { Badge } from '@edx/paragon';
+import { Badge } from '@openedx/paragon';
 
 import track from 'tracking';
 import { reduxHooks } from 'hooks';
@@ -20,11 +20,13 @@ export const CourseCardImage = ({ cardId, orientation }) => {
   const { isVerified } = reduxHooks.useCardEnrollmentData(cardId);
   const { disableCourseTitle } = useActionDisabledState(cardId);
   const handleImageClicked = reduxHooks.useTrackCourseEvent(courseImageClicked, cardId, homeUrl);
-  const wrapperClassName = `pgn__card-wrapper-image-cap overflow-visible ${orientation}`;
+  const wrapperClassName = `pgn__card-wrapper-image-cap d-inline-block overflow-visible ${orientation}`;
   const image = (
     <>
       <img
-        className="pgn__card-image-cap show"
+        // w-100 is necessary for images on Safari, otherwise stretches full height of the image
+        // https://stackoverflow.com/a/44250830
+        className="pgn__card-image-cap w-100 show"
         src={bannerImgSrc}
         alt={formatMessage(messages.bannerAlt)}
       />

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

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
@@ -18,8 +18,8 @@ jest.mock('hooks', () => ({
     useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })),
     useCardCourseRunData: jest.fn(() => ({ homeUrl })),
     useCardEnrollmentData: jest.fn(() => ({ isVerified: true })),
-    useTrackCourseEvent: jest.fn((eventName, cardId, upgradeUrl) => ({
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
-      trackCourseEvent: { eventName, cardId, upgradeUrl },
+      trackCourseEvent: { eventName, cardId, url },
     })),
   },
 }));
@@ -36,9 +36,9 @@ describe('CourseCardImage', () => {
   describe('snapshot', () => {
     test('renders clickable link course Image', () => {
       const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.type()).toBe('a');
+      expect(wrapper.instance.type).toBe('a');
-      expect(wrapper.prop('onClick')).toEqual(
+      expect(wrapper.instance.props.onClick).toEqual(
         reduxHooks.useTrackCourseEvent(
           track.course.courseImageClicked,
           props.cardId,
@@ -49,8 +49,8 @@ describe('CourseCardImage', () => {
     test('renders disabled link', () => {
       useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
       const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper).toMatchSnapshot();
+      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.type()).toBe('div');
+      expect(wrapper.instance.type).toBe('div');
     });
   });
   describe('behavior', () => {