Ahtesham/VAN-1615/modal fixes (#194 )

fix: modal outside click fix
Description: Modal window should not closed when click outside the modal VAN-1615
2023-08-22 18:19:19 +05:00 · 2023-08-22 13:41:49 +05:00 · 2023-08-18 18:31:21 +05:00 · 2023-08-18 18:00:23 +05:00 · 2023-08-17 12:52:42 +05:00 · 2023-08-17 12:41:28 +05:00
466 changed files with 35223 additions and 25147 deletions
--- a/.dockerignore
+++ b/.dockerignore
@@ -0,0 +1,10 @@
+node_modules
+npm-debug.log
+README.md
+LICENSE
+.babelrc
+.eslintignore
+.eslintrc.json
+.gitignore
+.npmignore
+commitlint.config.js
--- a/.env
+++ b/.env
@@ -0,0 +1,43 @@
+NODE_ENV='production'
+NODE_PATH=./src
+BASE_URL=''
+LMS_BASE_URL=''
+ECOMMERCE_BASE_URL=''
+LOGIN_URL=''
+LOGOUT_URL=''
+CSRF_TOKEN_API_PATH=''
+REFRESH_ACCESS_TOKEN_ENDPOINT=''
+DATA_API_BASE_URL=''
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+ACCESS_TOKEN_COOKIE_NAME=''
+NEW_RELIC_APP_ID=''
+NEW_RELIC_LICENSE_KEY=''
+SITE_NAME=''
+MARKETING_SITE_BASE_URL=''
+SUPPORT_URL=''
+CONTACT_URL=''
+OPEN_SOURCE_URL=''
+TERMS_OF_SERVICE_URL=''
+PRIVACY_POLICY_URL=''
+FACEBOOK_URL=''
+TWITTER_URL=''
+YOU_TUBE_URL=''
+LINKED_IN_URL=''
+REDDIT_URL=''
+APPLE_APP_STORE_URL=''
+GOOGLE_PLAY_URL=''
+ENTERPRISE_MARKETING_URL=''
+ENTERPRISE_MARKETING_UTM_SOURCE=''
+ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
+LEARNING_BASE_URL=''
+ZENDESK_KEY=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL=''
+ACCOUNT_PROFILE_URL=''
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+OPTIMIZELY_FULL_STACK_SDK_KEY=''
--- a/.env.development
+++ b/.env.development
@@ -0,0 +1,50 @@
+NODE_ENV='development'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+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'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME=localhost
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+SUPPORT_URL='http://localhost:18000/support'
+CONTACT_URL='http://localhost:18000/contact'
+OPEN_SOURCE_URL='http://localhost:18000/openedx'
+TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+FACEBOOK_URL='https://www.facebook.com'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'
+LINKED_IN_URL='https://www.linkedin.com'
+REDDIT_URL='https://www.reddit.com'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+ENTERPRISE_MARKETING_URL='http://example.com'
+ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
+ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+LEARNING_BASE_URL='http://localhost:2000'
+SESSION_COOKIE_DOMAIN='localhost'
+ZENDESK_KEY=''
+HOTJAR_APP_ID=''
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL='http://localhost:1997'
+ACCOUNT_PROFILE_URL='http://localhost:1995'
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+OPTIMIZELY_FULL_STACK_SDK_KEY=''
--- a/.env.test
+++ b/.env.test
@@ -0,0 +1,49 @@
+NODE_ENV='test'
+PORT=1996
+BASE_URL='localhost:1996'
+LMS_BASE_URL='http://localhost:18000'
+ECOMMERCE_BASE_URL='http://localhost:18130'
+LOGIN_URL='http://localhost:18000/login'
+LOGOUT_URL='http://localhost:18000/logout'
+LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
+LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
+LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
+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'
+ACCESS_TOKEN_COOKIE_NAME='edx-jwt-cookie-header-payload'
+USER_INFO_COOKIE_NAME='edx-user-info'
+SITE_NAME=localhost
+DATA_API_BASE_URL='http://localhost:8000'
+// LMS_CLIENT_ID should match the lms DOT client application id your LMS containe
+LMS_CLIENT_ID='login-service-client-id'
+SEGMENT_KEY=''
+FEATURE_FLAGS={}
+MARKETING_SITE_BASE_URL='http://localhost:18000'
+SUPPORT_URL='http://localhost:18000/support'
+CONTACT_URL='http://localhost:18000/contact'
+OPEN_SOURCE_URL='http://localhost:18000/openedx'
+TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
+PRIVACY_POLICY_URL='http://localhost:18000/privacy-policy'
+FACEBOOK_URL='https://www.facebook.com'
+TWITTER_URL='https://twitter.com'
+YOU_TUBE_URL='https://www.youtube.com'
+LINKED_IN_URL='https://www.linkedin.com'
+REDDIT_URL='https://www.reddit.com'
+APPLE_APP_STORE_URL='https://www.apple.com/ios/app-store/'
+GOOGLE_PLAY_URL='https://play.google.com/store'
+ENTERPRISE_MARKETING_URL='http://example.com'
+ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
+ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
+ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
+LEARNING_BASE_URL='http://localhost:2000'
+ZENDESK_KEY='test-zendesk-key'
+HOTJAR_APP_ID='hot-jar-app-id'
+HOTJAR_VERSION='6'
+HOTJAR_DEBUG=''
+ACCOUNT_SETTINGS_URL='http://account-settings-url.test'
+ACCOUNT_PROFILE_URL='http://account-profile-url.test'
+ENABLE_NOTICES=''
+CAREER_LINK_URL=''
+OPTIMIZELY_FULL_STACK_SDK_KEY='SDK Key'
--- a/.eslintignore
+++ b/.eslintignore
@@ -0,0 +1,5 @@
+coverage/*
+dist/
+node_modules/
+src/postcss.config.js
+src/segment.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -0,0 +1,22 @@
+const { createConfig } = require('@edx/frontend-build');
+
+const config = createConfig('eslint', {
+  rules: {
+    'import/no-named-as-default': 'off',
+    'import/no-named-as-default-member': 'off',
+    'import/no-self-import': 'off',
+    'import/no-import-module-exports': 'off',
+    'spaced-comment': ['error', 'always', { 'block': { 'exceptions': ['*'] } }],
+  },
+});
+
+config.settings = {
+  "import/resolver": {
+    node: {
+      paths: ["src", "node_modules"],
+      extensions: [".js", ".jsx"],
+    },
+  },
+};
+
+module.exports = config;
--- a/.gitattributes
+++ b/.gitattributes
@@ -0,0 +1 @@
+*.snap linguist-generated=false
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@@ -1 +1,8 @@
-*   @openedx/2U-aperture
+# Root app is developed and owned by Aurora
+*   @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
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@@ -1,7 +0,0 @@
-version: 2
-updates:
-    # Adding new check for github-actions
-  - package-ecosystem: "github-actions"
-    directory: "/"
-    schedule:
-        interval: "weekly"
--- a/.github/renovate.json
+++ b/.github/renovate.json
@@ -1,33 +0,0 @@
-{
-    "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"
-  }
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -10,16 +10,18 @@ on:

 jobs:
  tests:
-    runs-on: ubuntu-latest
-
+    runs-on: ubuntu-20.04
    steps:
    - name: Checkout
-      uses: actions/checkout@v4
+      uses: actions/checkout@v3
+
+    - name: Setup Nodejs Env
+      run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV

    - name: Setup Nodejs
-      uses: actions/setup-node@v4
+      uses: actions/setup-node@v3
      with:
-        node-version-file: '.nvmrc'
+        node-version: ${{ env.NODE_VER }}

    - name: Install dependencies
      run: npm ci
@@ -37,7 +39,19 @@ jobs:
      run: npm run build

    - name: Run Coverage
-      uses: codecov/codecov-action@v5
+      uses: codecov/codecov-action@v3
+
+    - name: Send failure notification
+      if: ${{ failure() }}
+      uses: dawidd6/action-send-mail@v3
      with:
-        token: ${{ secrets.CODECOV_TOKEN }}
-        fail_ci_if_error: true
+        server_address: email-smtp.us-east-1.amazonaws.com
+        server_port: 465
+        username: ${{ secrets.EDX_SMTP_USERNAME }}
+        password: ${{ secrets.EDX_SMTP_PASSWORD }}
+        subject: CI workflow failed in ${{github.repository}}
+        to: masters-grades@edx.org
+        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
+          }}"
--- a/.github/workflows/npm-publish.yml
+++ b/.github/workflows/npm-publish.yml
@@ -0,0 +1,35 @@
+name: Release CI
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-20.04
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Setup Nodejs Env
+        run: echo "NODE_VER=`cat .nvmrc`" >> $GITHUB_ENV
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE_VER }}
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Create Build
+        run: npm run build
+
+      - name: Release Package
+        env:
+          GITHUB_TOKEN: ${{ secrets.SEMANTIC_RELEASE_GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.SEMANTIC_RELEASE_NPM_TOKEN }}
+        run: npm semantic-release
--- a/.gitignore
+++ b/.gitignore
@@ -1,15 +1,27 @@
+.DS_Store
+.eslintcache
 node_modules
 npm-debug.log
 coverage
-module.config.js
+
 dist/
-/*.tgz
+public/samples/

-### i18n ###
-src/i18n/transifex_input.json
+### pyenv ###
+.python-version

-### Editors ###
-.DS_Store
+### Emacs ###
 *~
-/temp
-/.vscode
+*.swo
+*.swp
+
+### Development environments ###
+.idea
+.vscode
+
+# Local package dependencies
+module.config.js
+
+### transifex ###
+src/i18n/transifex_input.json
+temp
--- a/.husky/pre-push
+++ b/.husky/pre-push
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npm run lint
--- a/.npmignore
+++ b/.npmignore
@@ -1,6 +1,12 @@
-__mocks__
+.eslintignore
+.eslintrc.json
+.gitignore
+docker-compose.yml
+Dockerfile
+Makefile
+npm-debug.log
+
+config
+coverage
 node_modules
-*.test.js
-*.test.jsx
-*.test.ts
-*.test.tsx
+public
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-20
+18.15
--- a/.releaserc
+++ b/.releaserc
@@ -0,0 +1,27 @@
+{
+  "branch": "master",
+  "tagFormat": "v${version}",
+  "verifyConditions": [
+    "@semantic-release/npm",
+    {
+      "path": "@semantic-release/github",
+      "assets": {
+        "path": "dist/*"
+      }
+    }
+  ],
+  "analyzeCommits": "@semantic-release/commit-analyzer",
+  "generateNotes": "@semantic-release/release-notes-generator",
+  "prepare": "@semantic-release/npm",
+  "publish": [
+    "@semantic-release/npm",
+    {
+      "path": "@semantic-release/github",
+      "assets": {
+        "path": "dist/*"
+      }
+    }
+  ],
+  "success": [],
+  "fail": []
+}
--- a/.tx/config
+++ b/.tx/config
@@ -0,0 +1,9 @@
+[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
+
--- a/28
+++ b/28
@@ -1,6 +1,8 @@
 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
@@ -8,7 +10,7 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json

 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl

 NPM_TESTS=build i18n_extract lint test

@@ -40,16 +42,34 @@ 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 $(ATLAS_OPTIONS) \
-               translations/frontend-base/src/i18n/messages:frontend-base \
+      && atlas pull --filter=$(transifex_langs) \
               translations/paragon/src/i18n/messages:paragon \
+               translations/frontend-component-footer/src/i18n/messages:frontend-component-footer \
               translations/frontend-app-learner-dashboard/src/i18n/messages:frontend-app-learner-dashboard

-	$(intl_imports) frontend-base paragon frontend-app-learner-dashboard
+	$(intl_imports) paragon frontend-component-footer frontend-app-learner-dashboard
+endif

 # This target is used by CI.
 validate-no-uncommitted-package-lock-changes:
--- a/README.md
+++ b/README.md
@@ -0,0 +1,26 @@
+# 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.
+
+## Resources
+
+* [Learner Home project info at the Open edX Wiki](https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575906333/Learner+Home)
--- a/README.rst
+++ b/README.rst
@@ -1,86 +0,0 @@
-|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 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.
-
-Widgets
-------
-This MFE can be customized with widgets.  The parts of this MFE that can be customized in that manner are documented
-`here </src/slots>`_.
-
-License
-------
-
-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.
--- a/app.d.ts
+++ b/app.d.ts
@@ -1,10 +0,0 @@
-/// <reference types="@openedx/frontend-base" />
-
-declare module 'site.config' {
-  export default SiteConfig;
-}
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +0,0 @@
-const { createConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createConfig('babel');
--- a/catalog-info.yaml
+++ b/catalog-info.yaml
@@ -1,25 +0,0 @@
-# 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.
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -1,22 +0,0 @@
-// @ts-check
-
-const { createLintConfig } = require('@openedx/frontend-base/config');
-
-module.exports = createLintConfig(
-  {
-    files: [
-      'src/**/*',
-      'site.config.*',
-    ],
-  },
-  {
-    ignores: [
-      'coverage/*',
-      'dist/*',
-      'documentation/*',
-      'node_modules/*',
-      '**/__mocks__/*',
-      '**/__snapshots__/*',
-    ],
-  },
-);
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,21 +1,21 @@
-const { createConfig } = require('@openedx/frontend-base/config');
+const { createConfig } = require('@edx/frontend-build');

-module.exports = createConfig('test', {
+module.exports = createConfig('jest', {
  setupFilesAfterEnv: [
    'jest-expect-message',
    '<rootDir>/src/setupTest.jsx',
  ],
+  modulePaths: ['<rootDir>/src/'],
+  snapshotSerializers: [
+    'enzyme-to-json/serializer',
+  ],
  coveragePathIgnorePatterns: [
    'src/segment.js',
    'src/postcss.config.js',
    'testUtils', // don't unit test jest mocking tools
    'src/data/services/lms/fakeData', // don't unit test mock data
    'src/test', // don't unit test integration test utils
-    'src/__mocks__',
  ],
-  moduleNameMapper: {
-    '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
-  },
  testTimeout: 120000,
+  testEnvironment: 'jsdom',
 });
--- a/openedx.yaml
+++ b/openedx.yaml
@@ -0,0 +1,9 @@
+# This file describes this Open edX repo, as described in OEP-2:
+# http://open-edx-proposals.readthedocs.io/en/latest/oeps/oep-0002.html#specification
+
+tags:
+  - frontend-app
+  - masters
+oeps:
+  oep-2: true    # Repository metadata
+openedx-release: {ref: master}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,84 +1,99 @@
 {
-  "name": "@openedx/frontend-app-learner-dashboard",
-  "version": "1.0.0-alpha.2",
+  "name": "@edx/frontend-app-learner-dashboard",
+  "version": "0.0.1",
  "description": "",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/edx/frontend-app-learner-dashboard.git"
  },
-  "main": "src/index.ts",
-  "files": [
-    "/src"
-  ],
-  "browserslist": [
-    "extends @edx/browserslist-config"
-  ],
-  "sideEffects": [
-    "*.css",
-    "*.scss"
-  ],
  "scripts": {
-    "dev": "PORT=1996 PUBLIC_PATH=/learner-dashboard openedx dev",
-    "i18n_extract": "openedx formatjs extract",
-    "lint": "openedx lint .",
-    "lint:fix": "openedx lint --fix .",
-    "snapshot": "openedx test --updateSnapshot",
-    "test": "openedx test --coverage --passWithNoTests"
+    "build": "fedx-scripts webpack",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
+    "lint": "fedx-scripts eslint --ext .jsx,.js src/",
+    "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
+    "semantic-release": "semantic-release",
+    "start": "fedx-scripts webpack-dev-server --progress",
+    "test": "TZ=GMT fedx-scripts jest --coverage --passWithNoTests",
+    "quality": "npm run lint-fix && npm run test",
+    "watch-tests": "jest --watch",
+    "snapshot": "fedx-scripts jest --updateSnapshot",
+    "prepare": "husky install"
  },
-  "author": "Open edX",
+  "author": "edX",
  "license": "AGPL-3.0",
-  "homepage": "https://github.com/openedx/frontend-app-learner-dashboard#readme",
+  "homepage": "",
  "publishConfig": {
    "access": "public"
  },
-  "bugs": {
-    "url": "https://github.com/openedx/frontend-app-learner-dashboard/issues"
-  },
  "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/openedx-atlas": "^0.7.0",
+    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
+    "@edx/browserslist-config": "^1.1.0",
+    "@edx/frontend-component-footer": "^12.0.0",
+    "@edx/frontend-enterprise-hotjar": "^1.2.0",
+    "@edx/frontend-platform": "^4.2.0",
+    "@edx/paragon": "^20.32.0",
+    "@edx/react-unit-test-utils": "^1.7.0",
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/free-brands-svg-icons": "^5.15.4",
    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.2.0",
-    "@redux-devtools/extension": "3.3.0",
-    "@reduxjs/toolkit": "^2.0.0",
+    "@fortawesome/react-fontawesome": "^0.1.15",
+    "@optimizely/react-sdk": "^2.9.2",
+    "@redux-beacon/segment": "^1.1.0",
+    "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^0.21.4",
    "classnames": "^2.3.1",
-    "filesize": "^10.0.0",
+    "core-js": "3.16.2",
+    "dompurify": "^2.3.1",
+    "email-prop-type": "^3.0.1",
+    "enzyme": "^3.11.0",
+    "enzyme-to-json": "^3.6.2",
+    "file-saver": "^2.0.5",
+    "filesize": "^8.0.6",
    "font-awesome": "4.7.0",
+    "history": "5.0.1",
+    "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.8.1",
+    "prop-types": "15.7.2",
+    "query-string": "7.0.1",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
+    "react-helmet": "^6.1.0",
+    "react-intl": "^5.20.9",
+    "react-pdf": "^5.5.0",
+    "react-redux": "^7.2.4",
+    "react-router-dom": "5.3.3",
    "react-share": "^4.4.0",
+    "react-zendesk": "^0.1.13",
+    "redux": "4.1.1",
+    "redux-beacon": "^2.1.0",
+    "redux-devtools-extension": "2.13.9",
    "redux-logger": "3.0.6",
-    "redux-thunk": "2.4.2",
-    "reselect": "^4.0.0"
+    "redux-thunk": "2.3.0",
+    "regenerator-runtime": "^0.13.9",
+    "reselect": "^4.0.0",
+    "universal-cookie": "^4.0.4",
+    "util": "^0.12.4",
+    "whatwg-fetch": "^3.6.2"
  },
  "devDependencies": {
-    "@edx/browserslist-config": "^1.5.0",
-    "@edx/react-unit-test-utils": "^4.0.0",
-    "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.3.0",
+    "@edx/frontend-build": "12.8.27",
+    "@edx/reactifex": "^2.1.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
+    "axios-mock-adapter": "^1.20.0",
+    "copy-webpack-plugin": "^11.0.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "fetch-mock": "^9.11.0",
+    "husky": "^7.0.0",
    "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-expect-message": "^1.1.3",
-    "jest-when": "^3.6.0",
-    "react-dev-utils": "^12.0.0",
-    "react-test-renderer": "^18.3.1",
-    "redux-mock-store": "^1.5.4"
-  },
-  "peerDependencies": {
-    "@openedx/frontend-base": "^1.0.0-alpha.2",
-    "@openedx/paragon": "^22",
-    "@tanstack/react-query": "^5",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
-    "react": "^18",
-    "react-dom": "^18",
-    "react-redux": "^8",
-    "react-router": "^6",
-    "react-router-dom": "^6",
-    "redux": "^4"
+    "jest-expect-message": "^1.0.2",
+    "react-dev-utils": "^11.0.4",
+    "react-test-renderer": "^16.14.0",
+    "redux-mock-store": "^1.5.4",
+    "semantic-release": "^20.1.3"
  }
 }
--- a/public/index.html
+++ b/public/index.html
@@ -1,9 +1,19 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
  <head>
-      <title>Learner Dashboard Development Site></title>
+      <title>Learner Dashboard | <%= process.env.SITE_NAME %></title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
+      <% if (process.env.OPTIMIZELY_URL) { %>
+        <script
+          src="<%= process.env.OPTIMIZELY_URL %>"
+        ></script>
+      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+        <script
+          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
+        ></script>
+      <% } %>
  </head>
  <body>
    <div id="root"></div>
--- a/public/robots.txt
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow: /
--- a/site.config.dev.tsx
+++ b/site.config.dev.tsx
@@ -1,41 +0,0 @@
-import { EnvironmentTypes, SiteConfig, footerApp, headerApp, shellApp } from '@openedx/frontend-base';
-
-import { learnerDashboardApp } from './src';
-
-import './src/app.scss';
-
-const siteConfig: SiteConfig = {
-  siteId: 'learner-dashboard-dev',
-  siteName: 'Learner Dashboard Dev',
-  baseUrl: 'http://apps.local.openedx.io:1996',
-  lmsBaseUrl: 'http://local.openedx.io:8000',
-  loginUrl: 'http://local.openedx.io:8000/login',
-  logoutUrl: 'http://local.openedx.io:8000/logout',
-
-  environment: EnvironmentTypes.DEVELOPMENT,
-  basename: '/learner-dashboard',
-  apps: [
-    shellApp,
-    headerApp,
-    footerApp,
-    learnerDashboardApp
-  ],
-  externalRoutes: [
-    {
-      role: 'profile',
-      url: 'http://apps.local.openedx.io:1995/profile/'
-    },
-    {
-      role: 'account',
-      url: 'http://apps.local.openedx.io:1997/account/'
-    },
-    {
-      role: 'logout',
-      url: 'http://local.openedx.io:8000/logout'
-    },
-  ],
-
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-};
-
-export default siteConfig;
--- a/site.config.test.tsx
+++ b/site.config.test.tsx
@@ -1,28 +0,0 @@
-import { EnvironmentTypes, SiteConfig } from '@openedx/frontend-base';
-
-import { appId } from './src/constants';
-
-const siteConfig: SiteConfig = {
-  siteId: 'learner-dashboard-test-site',
-  siteName: 'Learner Dashboard Test Site',
-  baseUrl: 'http://localhost:1996',
-  lmsBaseUrl: 'http://localhost:8000',
-  loginUrl: 'http://localhost:8000/login',
-  logoutUrl: 'http://localhost:8000/logout',
-
-  environment: EnvironmentTypes.TEST,
-  basename: '/learner-dashboard',
-  apps: [{
-    appId,
-    config: {
-      ECOMMERCE_BASE_URL: 'http://localhost:18130',
-      FAVICON_URL: 'https://edx-cdn.org/v3/default/favicon.ico',
-      LEARNING_BASE_URL: 'http://localhost:2000',
-    },
-  }],
-
-  accessTokenCookieName: 'edx-jwt-cookie-header-payload',
-  segmentKey: '',
-};
-
-export default siteConfig;
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -0,0 +1,104 @@
+import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Helmet } from 'react-helmet';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { logError } from '@edx/frontend-platform/logging';
+import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
+
+import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
+import Footer from '@edx/frontend-component-footer';
+import { Alert } from '@edx/paragon';
+
+import { RequestKeys } from 'data/constants/requests';
+import store from 'data/store';
+import {
+  selectors,
+  actions,
+} from 'data/redux';
+import { reduxHooks } from 'hooks';
+import Dashboard from 'containers/Dashboard';
+import ZendeskFab from 'components/ZendeskFab';
+import { ExperimentProvider } from 'ExperimentContext';
+
+import track from 'tracking';
+
+import fakeData from 'data/services/lms/fakeData/courses';
+import LearnerDashboardHeader from './containers/LearnerDashboardHeader';
+
+import messages from './messages';
+
+import './App.scss';
+import { PaintedDoorExperimentProvider } from './RecsPaintedDoorExpContext';
+
+export const App = () => {
+  const { authenticatedUser } = React.useContext(AppContext);
+  const { formatMessage } = useIntl();
+  const isFailed = {
+    initialize: reduxHooks.useRequestIsFailed(RequestKeys.initialize),
+    refreshList: reduxHooks.useRequestIsFailed(RequestKeys.refreshList),
+  };
+  const hasNetworkFailure = isFailed.initialize || isFailed.refreshList;
+  const { supportEmail } = reduxHooks.usePlatformSettingsData();
+  const loadData = reduxHooks.useLoadData();
+
+  React.useEffect(() => {
+    if (authenticatedUser?.administrator || process.env.NODE_ENV === 'development') {
+      window.loadEmptyData = () => {
+        loadData({ ...fakeData.globalData, courses: [] });
+      };
+      window.loadMockData = () => {
+        loadData({
+          ...fakeData.globalData,
+          courses: [
+            ...fakeData.courseRunData,
+            ...fakeData.entitlementData,
+          ],
+        });
+      };
+      window.store = store;
+      window.selectors = selectors;
+      window.actions = actions;
+      window.track = track;
+    }
+    if (process.env.HOTJAR_APP_ID) {
+      try {
+        initializeHotjar({
+          hotjarId: process.env.HOTJAR_APP_ID,
+          hotjarVersion: process.env.HOTJAR_VERSION,
+          hotjarDebug: !!process.env.HOTJAR_DEBUG,
+        });
+      } catch (error) {
+        logError(error);
+      }
+    }
+  }, [authenticatedUser, loadData]);
+  return (
+    <Router>
+      <Helmet>
+        <title>{formatMessage(messages.pageTitle)}</title>
+      </Helmet>
+      <div>
+        <PaintedDoorExperimentProvider>
+          <LearnerDashboardHeader />
+          <main>
+            {hasNetworkFailure
+              ? (
+                <Alert variant="danger">
+                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+                </Alert>
+              ) : (
+                <ExperimentProvider>
+                  <Dashboard />
+                </ExperimentProvider>
+              )}
+          </main>
+          <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+          <ZendeskFab />
+        </PaintedDoorExperimentProvider>
+      </div>
+    </Router>
+  );
+};
+
+export default App;
--- a/src/App.scss
+++ b/src/App.scss
@@ -0,0 +1,68 @@
+// frontend-app-*/src/index.scss
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
+
+$fa-font-path: "~font-awesome/fonts";
+@import "~font-awesome/scss/font-awesome";
+
+$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
+
+@import "~@edx/frontend-component-footer/dist/_footer";
+
+.text-ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.alert.alert-info .alert-icon {
+  color: black;
+}
+
+#root {
+  // Removing a odd 1.5 scaling on checkboxes.:
+  input[type=checkbox] {
+    transform: none;
+  }
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+
+  main {
+    flex-grow: 1;
+  }
+
+  header {
+    flex: 0 0 auto;
+
+    .logo {
+      display: block;
+      box-sizing: content-box;
+      position: relative;
+      top: 0.1em;
+      height: 1.75rem;
+      margin-right: 1rem;
+      img {
+        display: block;
+        height: 100%;
+      }
+    }
+  }
+
+  footer {
+    flex: 0;
+  }
+}
+
+#paragon-portal-root {
+  .pgn__modal-layer {
+    .pgn__modal-close-container {
+      right: 1rem !important;
+    }
+  }
+  .confirm-modal .pgn__modal-body {
+    overflow: hidden;
+  }
+}
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Helmet } from 'react-helmet';
+import { ErrorPage } from '@edx/frontend-platform/react';
+
+import { BrowserRouter as Router } from 'react-router-dom';
+
+import Footer from '@edx/frontend-component-footer';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Alert } from '@edx/paragon';
+
+import { RequestKeys } from 'data/constants/requests';
+import { reduxHooks } from 'hooks';
+import Dashboard from 'containers/Dashboard';
+import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+import { ExperimentProvider } from 'ExperimentContext';
+import { App } from './App';
+import messages from './messages';
+
+jest.mock('@edx/frontend-component-footer', () => 'Footer');
+
+jest.mock('containers/Dashboard', () => 'Dashboard');
+jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
+jest.mock('components/ZendeskFab', () => 'ZendeskFab');
+jest.mock('ExperimentContext', () => ({
+  ExperimentProvider: 'ExperimentProvider',
+}));
+jest.mock('RecsPaintedDoorExpContext', () => ({
+  PaintedDoorExperimentProvider: 'PaintedDoorExperimentProvider',
+}));
+jest.mock('data/redux', () => ({
+  selectors: 'redux.selectors',
+  actions: 'redux.actions',
+  thunkActions: 'redux.thunkActions',
+}));
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useRequestIsFailed: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+    useLoadData: jest.fn(),
+  },
+}));
+jest.mock('data/store', () => 'data/store');
+
+const loadData = jest.fn();
+reduxHooks.useLoadData.mockReturnValue(loadData);
+
+const logo = 'fakeLogo.png';
+let el;
+
+const supportEmail = 'test-support-url';
+reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
+
+describe('App router component', () => {
+  process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
+  const { formatMessage } = useIntl();
+  describe('component', () => {
+    const runBasicTests = () => {
+      test('snapshot', () => { expect(el).toMatchSnapshot(); });
+      it('displays title in helmet component', () => {
+        expect(el.find(Helmet).find('title').text()).toEqual(useIntl().formatMessage(messages.pageTitle));
+      });
+      it('displays learner dashboard header', () => {
+        expect(el.find(LearnerDashboardHeader).length).toEqual(1);
+      });
+      it('wraps the page in a browser router', () => {
+        expect(el.find(Router)).toMatchObject(el);
+      });
+      test('Footer logo drawn from env variable', () => {
+        expect(el.find(Footer).props().logo).toEqual(logo);
+      });
+    };
+    describe('no network failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockReturnValue(false);
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads dashboard', () => {
+        expect(el.find('main')).toMatchObject(shallow(
+          <main><ExperimentProvider><Dashboard /></ExperimentProvider></main>,
+        ));
+      });
+    });
+    describe('initialize failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        expect(el.find('main')).toEqual(shallow(
+          <main>
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          </main>,
+        ));
+      });
+    });
+    describe('refresh failure', () => {
+      beforeAll(() => {
+        reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
+        el = shallow(<App />);
+      });
+      runBasicTests();
+      it('loads error page', () => {
+        expect(el.find('main')).toEqual(shallow(
+          <main>
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          </main>,
+        ));
+      });
+    });
+  });
+});
--- a/src/ExperimentContext.jsx
+++ b/src/ExperimentContext.jsx
@@ -0,0 +1,64 @@
+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 };
--- a/src/ExperimentContext.test.jsx
+++ b/src/ExperimentContext.test.jsx
@@ -0,0 +1,123 @@
+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 });
+    });
+  });
+});
--- a/src/Main.jsx
+++ b/src/Main.jsx
@@ -1,20 +0,0 @@
-import { Provider as ReduxProvider } from 'react-redux';
-import { CurrentAppProvider, PageWrap } from '@openedx/frontend-base';
-
-import { appId } from './constants';
-import store from './data/store';
-import Dashboard from './containers/Dashboard';
-
-import './app.scss';
-
-const Main = () => (
-  <CurrentAppProvider appId={appId}>
-    <ReduxProvider store={store}>
-      <PageWrap>
-        <Dashboard />
-      </PageWrap>
-    </ReduxProvider>
-  </CurrentAppProvider>
-);
-
-export default Main;
--- a/src/RecsPaintedDoorExpContext.jsx
+++ b/src/RecsPaintedDoorExpContext.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StrictDict } from 'utils';
+import * as module from './RecsPaintedDoorExpContext';
+import {
+  useEmailConfirmationData,
+  useHasAvailableDashboards,
+  useRequestIsPending,
+} from './data/redux/hooks';
+import { RequestKeys } from './data/constants/requests';
+import { trackPaintedDoorVariationGroup } from './widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
+
+export const state = StrictDict({
+  enterpriseUser: (val) => React.useState(val), // eslint-disable-line
+  experimentData: (val) => React.useState(val), // eslint-disable-line
+});
+
+const PAINTED_DOOR_RECOMMENDATIONS_EXP_ID = 25116810832;
+const PAINTED_DOOR_RECOMMENDATIONS_PAGE = 'url_targeting_for_van1604_recommendations_painted_door_exp';
+const PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION = 'btn_navbar';
+const PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION = 'btn_widget';
+
+export function getPaintedDoorRecommendationsExperimentVariation() {
+  try {
+    if (window.optimizely && window.optimizely.get('data').experiments[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID]) {
+      const selectedVariant = window.optimizely.get('state').getVariationMap()[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID];
+      return selectedVariant?.name;
+    }
+  } catch (e) { /* empty */ }
+  return '';
+}
+
+export function activatePaintedDoorRecommendationsExperiment() {
+  window.optimizely = window.optimizely || [];
+  window.optimizely.push({
+    type: 'page',
+    pageName: PAINTED_DOOR_RECOMMENDATIONS_PAGE,
+  });
+}
+
+const useIsEnterpriseUser = () => {
+  const [enterpriseUser, setEnterpriseUser] = module.state.enterpriseUser({
+    isEnterpriseUser: false,
+    isLoading: true,
+  });
+
+  const initIsPending = useRequestIsPending(RequestKeys.initialize);
+  const hasAvailableDashboards = useHasAvailableDashboards();
+  const confirmationData = useEmailConfirmationData();
+
+  React.useEffect(() => {
+    if (!initIsPending && Object.keys(confirmationData).length && hasAvailableDashboards) {
+      setEnterpriseUser(prev => ({
+        ...prev,
+        isEnterpriseUser: true,
+        isLoading: false,
+      }));
+    } else if (!initIsPending && Object.keys(confirmationData).length && !hasAvailableDashboards) {
+      setEnterpriseUser(prev => ({
+        ...prev,
+        isEnterpriseUser: false,
+        isLoading: false,
+      }));
+    }
+  }, [initIsPending]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return enterpriseUser;
+};
+
+export const PaintedDoorExperimentContext = React.createContext();
+
+export const PaintedDoorExperimentProvider = ({ children }) => {
+  const [experimentData, setExperimentData] = module.state.experimentData({
+    experimentVariation: '',
+    isPaintedDoorNavbarBtnVariation: false,
+    isPaintedDoorWidgetBtnVariation: false,
+    experimentLoading: true,
+  });
+  const enterpriseUser = useIsEnterpriseUser();
+
+  const contextValue = React.useMemo(
+    () => ({
+      ...experimentData,
+    }),
+    [experimentData],
+  );
+
+  React.useEffect(() => {
+    let timer = null;
+    if (!enterpriseUser.isLoading && !enterpriseUser.isEnterpriseUser) {
+      activatePaintedDoorRecommendationsExperiment();
+      timer = setTimeout(() => {
+        const variation = getPaintedDoorRecommendationsExperimentVariation();
+        setExperimentData(prev => ({
+          ...prev,
+          experimentVariation: variation,
+          isPaintedDoorNavbarBtnVariation: variation === PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION,
+          isPaintedDoorWidgetBtnVariation: variation === PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION,
+          experimentLoading: false,
+        }));
+        trackPaintedDoorVariationGroup(variation);
+      }, 500);
+    }
+    return () => clearTimeout(timer);
+  }, [enterpriseUser]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <PaintedDoorExperimentContext.Provider value={contextValue}>
+      {children}
+    </PaintedDoorExperimentContext.Provider>
+  );
+};
+
+export const usePaintedDoorExperimentContext = () => React.useContext(PaintedDoorExperimentContext);
+
+PaintedDoorExperimentProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default usePaintedDoorExperimentContext;
--- a/src/mocks/file.js
+++ b/src/mocks/file.js
@@ -1 +0,0 @@
-module.exports = 'FileMock';
--- a/src/mocks/svg.js
+++ b/src/mocks/svg.js
@@ -1 +0,0 @@
-module.exports = 'SvgURL';
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -1,12 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`App router component component initialize failure snapshot 1`] = `
-<Fragment>
+<BrowserRouter>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+  </HelmetWrapper>
  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
+    <PaintedDoorExperimentProvider>
+      <LearnerDashboardHeader />
+      <main>
        <Alert
          variant="danger"
        >
@@ -15,60 +22,56 @@ exports[`App router component component initialize failure snapshot 1`] = `
          />
        </Alert>
      </main>
-    </AppWrapper>
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
  </div>
-</Fragment>
+</BrowserRouter>
 `;

 exports[`App router component component no network failure snapshot 1`] = `
-<Fragment>
+<BrowserRouter>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+  </HelmetWrapper>
  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
+    <PaintedDoorExperimentProvider>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
      </main>
-    </AppWrapper>
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely url snapshot 1`] = `
-<Fragment>
-  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
-        <Dashboard />
-      </main>
-    </AppWrapper>
-  </div>
-</Fragment>
+</BrowserRouter>
 `;

 exports[`App router component component refresh failure snapshot 1`] = `
-<Fragment>
+<BrowserRouter>
+  <HelmetWrapper
+    defer={true}
+    encodeSpecialCharacters={true}
+  >
+    <title>
+      Learner Home
+    </title>
+  </HelmetWrapper>
  <div>
-    <AppWrapper>
-      <main
-        id="main"
-      >
+    <PaintedDoorExperimentProvider>
+      <LearnerDashboardHeader />
+      <main>
        <Alert
          variant="danger"
        >
@@ -77,7 +80,11 @@ exports[`App router component component refresh failure snapshot 1`] = `
          />
        </Alert>
      </main>
-    </AppWrapper>
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
  </div>
-</Fragment>
+</BrowserRouter>
 `;
--- a/src/snapshots/index.test.jsx.snap
+++ b/src/snapshots/index.test.jsx.snap
@@ -1,43 +1,30 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`app registry subscribe: APP_INIT_ERROR.  snapshot: displays an ErrorPage to root element 1`] = `
-<UNDEFINED>
-  <ErrorPage
-    message="test-error-message"
-  />
-</UNDEFINED>
+<ErrorPage
+  message="test-error-message"
+/>
 `;

 exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
-<UNDEFINED>
-  <SiteProvider
-    store={
-      {
-        "redux": "store",
-      }
+<AppProvider
+  store={
+    Object {
+      "redux": "store",
    }
-  >
-    <NoticesWrapper>
-      <Routes>
-        <Route
-          element={
-            <PageWrap>
-              <App />
-            </PageWrap>
-          }
-          path="/"
-        />
-        <Route
-          element={
-            <Navigate
-              replace={true}
-              to="/"
-            />
-          }
-          path="*"
-        />
-      </Routes>
-    </NoticesWrapper>
-  </SiteProvider>
-</UNDEFINED>
+  }
+>
+  <NoticesWrapper>
+    <Switch>
+      <PageRoute
+        path="/"
+      >
+        <App />
+      </PageRoute>
+      <Redirect
+        to="/"
+      />
+    </Switch>
+  </NoticesWrapper>
+</AppProvider>
 `;
--- a/src/app.scss
+++ b/src/app.scss
@@ -1,41 +0,0 @@
-@import "~@edx/brand/paragon/fonts";
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
-$fa-font-path: "~font-awesome/fonts";
-@import "~font-awesome/scss/font-awesome";
-
-$input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.0.0 to work
-
-#learnerDashboardRoot {
-  main {
-    flex-grow: 1;
-  }
-
-  // Removing a odd 1.5 scaling on checkboxes.:
-  input[type=checkbox] {
-    transform: none;
-  }
-
-  .text-ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .alert.alert-info .alert-icon {
-    color: black;
-  }
-
-  #paragon-portal-root {
-    .pgn__modal-layer {
-      .pgn__modal-close-container {
-        right: 1rem !important;
-      }
-    }
-    .confirm-modal .pgn__modal-body {
-      overflow: hidden;
-    }
-  }
-}
--- a/src/app.ts
+++ b/src/app.ts
@@ -1,23 +0,0 @@
-import { App } from '@openedx/frontend-base';
-import { appId } from './constants';
-import routes from './routes';
-import providers from './providers';
-import messages from './i18n';
-import slots from './slots';
-
-const app: App = {
-  appId,
-  routes,
-  providers,
-  messages,
-  slots,
-  config: {
-    LEARNING_BASE_URL: 'http://apps.local.openedx.io:2000',
-    ENABLE_PROGRAMS: false,
-    ECOMMERCE_BASE_URL: '',
-    ORDER_HISTORY_URL: '',
-    SUPPORT_URL: '',
-  }
-};
-
-export default app;
--- a/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/assets/confirm-email.svg
+++ b/src/widgets/LearnerDashboardHeader/ConfirmEmailBanner/assets/confirm-email.svg
--- a/src/assets/top_stripe.svg
+++ b/src/assets/top_stripe.svg
@@ -0,0 +1,15 @@
+<svg width="1350" height="7" viewBox="0 0 1350 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3302_26079)">
+<rect width="1350" height="6.75" transform="translate(0 -0.375)" fill="#03C7E8"/>
+<rect y="-0.375" width="585.562" height="6.75" fill="#D23228"/>
+<path d="M549.281 -0.375H933.188L929.491 6.375H549.281V-0.375Z" fill="#002121"/>
+<path d="M550.129 13.125L545.062 -10.5L555.188 -10.5L550.129 13.125Z" fill="#D23228"/>
+<path d="M931.082 13.125L925.594 -6.28125L936.563 -6.28125L931.082 13.125Z" fill="#002121"/>
+<path d="M0 -0.375H106.312L105.289 6.375H0V-0.375Z" fill="#921108"/>
+</g>
+<defs>
+<clipPath id="clip0_3302_26079">
+<rect width="1350" height="6.75" fill="white" transform="translate(0 -0.375)"/>
+</clipPath>
+</defs>
+</svg>
--- a/src/components/Banner.jsx
+++ b/src/components/Banner.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { Alert } from '@openedx/paragon';
-import { Info } from '@openedx/paragon/icons';
+import { Alert } from '@edx/paragon';
+import { Info } from '@edx/paragon/icons';

 export const Banner = ({
  children, variant, icon, className,
--- a/src/components/Banner.test.jsx
+++ b/src/components/Banner.test.jsx
@@ -1,6 +1,6 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

-import { Alert } from '@openedx/paragon';
+import { Alert } from '@edx/paragon';

 import Banner from './Banner';

@@ -11,17 +11,17 @@ describe('Banner', () => {
  describe('snapshot', () => {
    test('renders default banner', () => {
      const wrapper = shallow(<Banner {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('renders with variants', () => {
      const wrapper = shallow(<Banner {...props} variant="success" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();

-      expect(wrapper.instance.findByType(Alert)[0].props.variant).toEqual('success');
+      expect(wrapper.find(Alert).prop('variant')).toEqual('success');
    });
    test('renders with custom class', () => {
      const wrapper = shallow(<Banner {...props} className="custom-class" />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
  });
 });
--- a/src/components/EmailLink.jsx
+++ b/src/components/EmailLink.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MailtoLink } from '@edx/paragon';
+
+export const EmailLink = ({ address }) => {
+  if (!address) {
+    return null;
+  }
+  return (
+    <MailtoLink to={address}>{address}</MailtoLink>
+  );
+};
+EmailLink.defaultProps = { address: null };
+EmailLink.propTypes = { address: PropTypes.string };
+
+export default EmailLink;
--- a/src/components/EmailLink.test.jsx
+++ b/src/components/EmailLink.test.jsx
@@ -0,0 +1,16 @@
+import { shallow } from 'enzyme';
+
+import EmailLink from './EmailLink';
+
+describe('EmailLink', () => {
+  it('renders null when no address is provided', () => {
+    const wrapper = shallow(<EmailLink />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toEqual(true);
+  });
+  it('renders a MailtoLink when an address is provided', () => {
+    const wrapper = shallow(<EmailLink address="test@email.com" />);
+    expect(wrapper.find('MailtoLink').length).toEqual(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/components/ModalView/snapshots/index.test.jsx.snap
+++ b/src/components/ModalView/snapshots/index.test.jsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalView snapshot should renders default ModalView 1`] = `
+<div
+  className="containers"
+>
+  <ModalDialog
+    hasCloseButton={false}
+    isBlocking={true}
+    isFullscreenScroll={true}
+    isOpen={true}
+    onClose={[MockFunction]}
+    title=""
+  >
+    <ModalDialog.Header>
+      <Component>
+        <h3
+          className="mt-2"
+        >
+          Thank you for your interest!
+        </h3>
+      </Component>
+    </ModalDialog.Header>
+    <ModalDialog.Body>
+      <div>
+        <p
+          className="mt-2"
+        >
+          Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.
+        </p>
+        <p>
+          Would you like to be alerted when it becomes available?
+        </p>
+      </div>
+    </ModalDialog.Body>
+    <Component>
+      <ActionRow>
+        <Component
+          onClick={[Function]}
+          variant="tertiary"
+        >
+          Skip for now
+        </Component>
+        <Component
+          onClick={[Function]}
+          variant="primary"
+        >
+          Count me in!
+        </Component>
+      </ActionRow>
+    </Component>
+  </ModalDialog>
+</div>
+`;
--- a/src/components/ModalView/hooks.js
+++ b/src/components/ModalView/hooks.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { StrictDict } from 'utils';
+
+import * as module from './hooks';
+
+export const state = StrictDict({
+  isRecommendationsModalOpen: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useRecommendationsModal = () => {
+  const [isRecommendationsModalOpen, setIsRecommendationsModalOpen] = module.state.isRecommendationsModalOpen(false);
+  const toggleRecommendationsModal = () => setIsRecommendationsModalOpen(!isRecommendationsModalOpen);
+
+  return {
+    isRecommendationsModalOpen,
+    toggleRecommendationsModal,
+  };
+};
--- a/src/components/ModalView/hooks.test.js
+++ b/src/components/ModalView/hooks.test.js
@@ -0,0 +1,21 @@
+import { MockUseState } from 'testUtils';
+
+import * as hooks from './hooks';
+
+const state = new MockUseState(hooks);
+
+const {
+  useRecommendationsModal,
+} = hooks;
+
+describe('LearnerDashboardHeader hooks', () => {
+  describe('useRecommendationsModal', () => {
+    test('default state', () => {
+      state.mock();
+      const out = useRecommendationsModal();
+      state.expectInitializedWith(state.keys.isRecommendationsModalOpen, false);
+      out.toggleRecommendationsModal();
+      expect(state.values.isRecommendationsModalOpen).toEqual(true);
+    });
+  });
+});
--- a/src/components/ModalView/index.jsx
+++ b/src/components/ModalView/index.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ModalDialog, ActionRow } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+import './index.scss';
+import {
+  trackPaintedDoorRecommendationHomeInterestBtnClicked,
+  trackPaintedDoorRecommendationHomeSkipBtnClicked,
+} from '../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
+
+export const ModalView = ({
+  isOpen,
+  onClose,
+  variation,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const handleSkipBtnClick = () => trackPaintedDoorRecommendationHomeSkipBtnClicked(variation);
+  const handleInterestBtnClick = () => trackPaintedDoorRecommendationHomeInterestBtnClicked(variation);
+
+  return (
+    <div className="containers">
+      <ModalDialog
+        title=""
+        isOpen={isOpen}
+        onClose={onClose}
+        hasCloseButton={false}
+        isFullscreenScroll
+        isBlocking
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            <h3 className="mt-2">{formatMessage(messages.recommendationsModalHeading)}</h3>
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          <div>
+            <p className="mt-2">{formatMessage(messages.recommendationsFeatureText)}</p>
+            <p>{formatMessage(messages.recommendationsAlertText)}</p>
+          </div>
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary" onClick={handleSkipBtnClick}>
+              {formatMessage(messages.modalSkipButton)}
+            </ModalDialog.CloseButton>
+            <ModalDialog.CloseButton variant="primary" onClick={handleInterestBtnClick}>
+              {formatMessage(messages.modalCountMeButton)}
+            </ModalDialog.CloseButton>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </div>
+  );
+};
+
+ModalView.defaultProps = {
+  isOpen: false,
+};
+
+ModalView.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool,
+  variation: PropTypes.string.isRequired,
+};
+
+export default ModalView;
--- a/src/components/ModalView/index.scss
+++ b/src/components/ModalView/index.scss
@@ -0,0 +1,13 @@
+@import "@edx/paragon/scss/core/core";
+
+@media (max-width: 464px) {
+    .pgn__action-row{
+        flex-direction: column;
+        gap: 5px;
+        button {
+            width: 100%;
+        }
+    }
+}
+
+
--- a/src/components/ModalView/index.test.jsx
+++ b/src/components/ModalView/index.test.jsx
@@ -0,0 +1,16 @@
+import { shallow } from 'enzyme';
+
+import ModalView from '.';
+
+describe('ModalView', () => {
+  const props = {
+    isOpen: true,
+    onClose: jest.fn(),
+  };
+  describe('snapshot', () => {
+    test('should renders default ModalView', () => {
+      const wrapper = shallow(<ModalView {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
--- a/src/components/ModalView/messages.js
+++ b/src/components/ModalView/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  recommendationsFeatureText: {
+    id: 'RecommendationsPanel.recommendationsFeatureText',
+    defaultMessage: 'Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.',
+    description: 'recommendations feature text',
+  },
+  recommendationsAlertText: {
+    id: 'RecommendationsPanel.recommendationsAlertText',
+    defaultMessage: 'Would you like to be alerted when it becomes available?',
+    description: 'recommendations alerted text',
+  },
+  recommendationsModalHeading: {
+    id: 'RecommendationsPanel.recommendationsModalHeading',
+    defaultMessage: 'Thank you for your interest!',
+    description: 'Heading of modal',
+  },
+  modalSkipButton: {
+    id: 'RecommendationsPanel.modalSkipButton',
+    defaultMessage: 'Skip for now',
+    description: 'button for Skip for now',
+  },
+  modalCountMeButton: {
+    id: 'RecommendationsPanel.modalCountMeButton',
+    defaultMessage: 'Count me in!',
+    description: 'button for Count me in!',
+  },
+});
+
+export default messages;
--- a/src/components/NoticesWrapper/api.js
+++ b/src/components/NoticesWrapper/api.js
@@ -0,0 +1,26 @@
+import { getConfig } from '@edx/frontend-platform';
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+
+export const noticesUrl = `${getConfig().LMS_BASE_URL}/notices/api/v1/unacknowledged`;
+export const error404Message = 'This probably happened because the notices plugin is not installed on platform.';
+
+export const getNotices = ({ onLoad }) => {
+  const authenticatedUser = getAuthenticatedUser();
+
+  const handleError = async (e) => {
+    // Error probably means that notices is not installed, which is fine.
+    const { customAttributes: { httpErrorStatus } } = e;
+    if (httpErrorStatus === 404) {
+      logInfo(`${e}. ${error404Message}`);
+    } else {
+      logError(e);
+    }
+  };
+  if (authenticatedUser) {
+    return getAuthenticatedHttpClient().get(noticesUrl, {}).then(onLoad).catch(handleError);
+  }
+  return null;
+};
+
+export default { getNotices };
--- a/src/components/NoticesWrapper/api.test.js
+++ b/src/components/NoticesWrapper/api.test.js
@@ -0,0 +1,65 @@
+import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { logError, logInfo } from '@edx/frontend-platform/logging';
+
+import * as api from './api';
+
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
+    LMS_BASE_URL: 'test-lms-url',
+  })),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedHttpClient: jest.fn(),
+  getAuthenticatedUser: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/logging', () => ({
+  logError: jest.fn(),
+  logInfo: jest.fn(),
+}));
+
+const testData = 'test-data';
+const successfulGet = () => Promise.resolve(testData);
+const error404 = { customAttributes: { httpErrorStatus: 404 }, test: 'error' };
+const error404Get = () => Promise.reject(error404);
+const error500 = { customAttributes: { httpErrorStatus: 500 }, test: 'error' };
+const error500Get = () => Promise.reject(error500);
+
+const get = jest.fn().mockImplementation(successfulGet);
+getAuthenticatedHttpClient.mockReturnValue({ get });
+const authenticatedUser = { fake: 'user' };
+getAuthenticatedUser.mockReturnValue(authenticatedUser);
+
+const onLoad = jest.fn();
+describe('getNotices api method', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('behavior', () => {
+    describe('not authenticated', () => {
+      it('does not fetch anything', () => {
+        getAuthenticatedUser.mockReturnValueOnce(null);
+        api.getNotices({ onLoad });
+        expect(get).not.toHaveBeenCalled();
+      });
+    });
+    describe('authenticated', () => {
+      it('fetches noticesUrl with onLoad behavior', async () => {
+        await api.getNotices({ onLoad });
+        expect(get).toHaveBeenCalledWith(api.noticesUrl, {});
+        expect(onLoad).toHaveBeenCalledWith(testData);
+      });
+      it('calls logInfo if fetch fails with 404', async () => {
+        get.mockImplementation(error404Get);
+        await api.getNotices({ onLoad });
+        expect(logInfo).toHaveBeenCalledWith(`${error404}. ${api.error404Message}`);
+      });
+      it('calls logError if fetch fails with non-404 error', async () => {
+        get.mockImplementation(error500Get);
+        await api.getNotices({ onLoad });
+        expect(logError).toHaveBeenCalledWith(error500);
+      });
+    });
+  });
+});
--- a/src/components/NoticesWrapper/hooks.js
+++ b/src/components/NoticesWrapper/hooks.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import { getConfig } from '@edx/frontend-platform';
+
+import { StrictDict } from 'utils';
+import { getNotices } from './api';
+import * as module from './hooks';
+
+/**
+ * This component uses the platform-plugin-notices plugin to function.
+ * If the user has an unacknowledged notice, they will be rerouted off
+ * course home and onto a full-screen notice page. If the plugin is not
+ * installed, or there are no notices, we just passthrough this component.
+ */
+export const state = StrictDict({
+  isRedirected: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useNoticesWrapperData = () => {
+  const [isRedirected, setIsRedirected] = module.state.isRedirected();
+  React.useEffect(() => {
+    if (getConfig().ENABLE_NOTICES) {
+      getNotices({
+        onLoad: (data) => {
+          if (data?.data?.results?.length > 0) {
+            setIsRedirected(true);
+            window.location.replace(`${data.data.results[0]}?next=${window.location.href}`);
+          }
+        },
+      });
+    }
+  }, [setIsRedirected]);
+  return { isRedirected };
+};
+
+export default useNoticesWrapperData;
--- a/src/components/NoticesWrapper/hooks.test.js
+++ b/src/components/NoticesWrapper/hooks.test.js
@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { MockUseState } from 'testUtils';
+
+import { getConfig } from '@edx/frontend-platform';
+import { getNotices } from './api';
+import * as hooks from './hooks';
+
+jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn() }));
+jest.mock('./api', () => ({ getNotices: jest.fn() }));
+
+getConfig.mockReturnValue({ ENABLE_NOTICES: true });
+const state = new MockUseState(hooks);
+
+let hook;
+describe('NoticesWrapper hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  describe('state hooks', () => {
+    state.testGetter(state.keys.isRedirected);
+  });
+  describe('useNoticesWrapperData', () => {
+    beforeEach(() => {
+      state.mock();
+    });
+    describe('behavior', () => {
+      it('initializes state hooks', () => {
+        hooks.useNoticesWrapperData();
+        expect(hooks.state.isRedirected).toHaveBeenCalledWith();
+      });
+      describe('effects', () => {
+        it('does not call notices if not enabled', () => {
+          getConfig.mockReturnValueOnce({ ENABLE_NOTICES: false });
+          hooks.useNoticesWrapperData();
+          const [cb, prereqs] = React.useEffect.mock.calls[0];
+          expect(prereqs).toEqual([state.setState.isRedirected]);
+          cb();
+          expect(getNotices).not.toHaveBeenCalled();
+        });
+        describe('getNotices call (if enabled) onLoad behavior', () => {
+          it('does not redirect if there are no results', () => {
+            hooks.useNoticesWrapperData();
+            expect(React.useEffect).toHaveBeenCalled();
+            const [cb, prereqs] = React.useEffect.mock.calls[0];
+            expect(prereqs).toEqual([state.setState.isRedirected]);
+            cb();
+            expect(getNotices).toHaveBeenCalled();
+            const { onLoad } = getNotices.mock.calls[0][0];
+            onLoad({});
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+            onLoad({ data: {} });
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+            onLoad({ data: { results: [] } });
+            expect(state.setState.isRedirected).not.toHaveBeenCalled();
+          });
+          it('redirects and set isRedirected if results are returned', () => {
+            delete window.location;
+            window.location = { replace: jest.fn(), href: 'test-old-href' };
+            hooks.useNoticesWrapperData();
+            const [cb, prereqs] = React.useEffect.mock.calls[0];
+            expect(prereqs).toEqual([state.setState.isRedirected]);
+            cb();
+            expect(getNotices).toHaveBeenCalled();
+            const { onLoad } = getNotices.mock.calls[0][0];
+            const target = 'url-target';
+            onLoad({ data: { results: [target] } });
+            expect(state.setState.isRedirected).toHaveBeenCalledWith(true);
+            expect(window.location.replace).toHaveBeenCalledWith(
+              `${target}?next=${window.location.href}`,
+            );
+          });
+        });
+      });
+    });
+    describe('output', () => {
+      it('forwards isRedirected from state call', () => {
+        hook = hooks.useNoticesWrapperData();
+        expect(hook.isRedirected).toEqual(state.stateVals.isRedirected);
+      });
+    });
+  });
+});
--- a/src/components/NoticesWrapper/index.jsx
+++ b/src/components/NoticesWrapper/index.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import useNoticesWrapperData from './hooks';
+
+/**
+ * This component uses the platform-plugin-notices plugin to function.
+ * If the user has an unacknowledged notice, they will be rerouted off
+ * course home and onto a full-screen notice page. If the plugin is not
+ * installed, or there are no notices, we just passthrough this component.
+ */
+const NoticesWrapper = ({ children }) => {
+  const { isRedirected } = useNoticesWrapperData();
+  return (
+    <div>
+      {isRedirected === true ? null : children}
+    </div>
+  );
+};
+
+NoticesWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default NoticesWrapper;
--- a/src/components/NoticesWrapper/index.test.jsx
+++ b/src/components/NoticesWrapper/index.test.jsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import useNoticesWrapperData from './hooks';
+import NoticesWrapper from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = { isRedirected: false };
+useNoticesWrapperData.mockReturnValue(hookProps);
+
+let el;
+const children = [<b key={1}>some</b>, <i key={2}>children</i>];
+describe('NoticesWrapper component', () => {
+  describe('behavior', () => {
+    it('initializes hooks', () => {
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(useNoticesWrapperData).toHaveBeenCalledWith();
+    });
+  });
+  describe('output', () => {
+    it('does not show children if redirected', () => {
+      useNoticesWrapperData.mockReturnValueOnce({ isRedirected: true });
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(el.children().length).toEqual(0);
+    });
+    it('shows children if not redirected', () => {
+      el = shallow(<NoticesWrapper>{children}</NoticesWrapper>);
+      expect(el.children().length).toEqual(2);
+      expect(el.children().at(0).matchesElement(children[0])).toEqual(true);
+      expect(el.children().at(1).matchesElement(children[1])).toEqual(true);
+    });
+  });
+});
--- a/src/components/ZendeskFab/snapshots/index.test.jsx.snap
+++ b/src/components/ZendeskFab/snapshots/index.test.jsx.snap
@@ -0,0 +1,65 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ZendeskFab snapshot 1`] = `
+<Zendesk
+  cookies={true}
+  defer={true}
+  webWidget={
+    Object {
+      "answerBot": Object {
+        "avatar": Object {
+          "name": Object {
+            "*": "edX Support",
+          },
+          "url": "https://edx-cdn.org/v3/prod/favicon.ico",
+        },
+        "contactOnlyAfterQuery": true,
+        "suppress": false,
+        "title": Object {
+          "*": "edX Support",
+        },
+      },
+      "chat": Object {
+        "departments": Object {
+          "enabled": Array [
+            "account settings",
+            "billing and payments",
+            "certificates",
+            "deadlines",
+            "errors and technical issues",
+            "other",
+            "proctoring",
+          ],
+        },
+        "suppress": false,
+      },
+      "contactForm": Object {
+        "attachments": true,
+        "selectTicketForm": Object {
+          "*": "Please choose your request type:",
+        },
+        "ticketForms": Array [
+          Object {
+            "fields": Array [
+              Object {
+                "id": "description",
+                "prefill": Object {
+                  "*": "",
+                },
+              },
+            ],
+            "id": 360003368814,
+            "subject": false,
+          },
+        ],
+      },
+      "contactOptions": Object {
+        "enabled": false,
+      },
+      "helpCenter": Object {
+        "originalArticleButton": true,
+      },
+    }
+  }
+/>
+`;
--- a/src/components/ZendeskFab/index.jsx
+++ b/src/components/ZendeskFab/index.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+
+import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import Zendesk from 'react-zendesk';
+import messages from './messages';
+
+const ZendeskFab = () => {
+  const { formatMessage } = useIntl();
+  const setting = {
+    cookies: true,
+    webWidget: {
+      contactOptions: {
+        enabled: false,
+      },
+      chat: {
+        suppress: false,
+        departments: {
+          enabled: ['account settings', 'billing and payments', 'certificates', 'deadlines', 'errors and technical issues', 'other', 'proctoring'],
+        },
+      },
+      contactForm: {
+        ticketForms: [
+          {
+            id: 360003368814,
+            subject: false,
+            fields: [{ id: 'description', prefill: { '*': '' } }],
+          },
+        ],
+        selectTicketForm: {
+          '*': formatMessage(messages.selectTicketForm),
+        },
+        attachments: true,
+      },
+      helpCenter: {
+        originalArticleButton: true,
+      },
+      answerBot: {
+        suppress: false,
+        contactOnlyAfterQuery: true,
+        title: { '*': formatMessage(messages.supportTitle) },
+        avatar: {
+          url: 'https://edx-cdn.org/v3/prod/favicon.ico',
+          name: { '*': formatMessage(messages.supportTitle) },
+        },
+      },
+    },
+  };
+
+  return (
+    <Zendesk defer zendeskKey={getConfig().ZENDESK_KEY} {...setting} />
+  );
+};
+
+export default ZendeskFab;
--- a/src/components/ZendeskFab/index.test.jsx
+++ b/src/components/ZendeskFab/index.test.jsx
@@ -0,0 +1,12 @@
+import { shallow } from 'enzyme';
+
+import ZendeskFab from '.';
+
+jest.mock('react-zendesk', () => 'Zendesk');
+
+describe('ZendeskFab', () => {
+  test('snapshot', () => {
+    const wrapper = shallow(<ZendeskFab />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
--- a/src/components/ZendeskFab/messages.js
+++ b/src/components/ZendeskFab/messages.js
@@ -0,0 +1,16 @@
+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;
--- a/src/components/snapshots/EmailLink.test.jsx.snap
+++ b/src/components/snapshots/EmailLink.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmailLink renders a MailtoLink when an address is provided 1`] = `
+<MailtoLink
+  to="test@email.com"
+>
+  test@email.com
+</MailtoLink>
+`;
+
+exports[`EmailLink renders null when no address is provided 1`] = `""`;
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -0,0 +1,23 @@
+const configuration = {
+  // BASE_URL: process.env.BASE_URL,
+  LMS_BASE_URL: process.env.LMS_BASE_URL,
+  ECOMMERCE_BASE_URL: process.env.ECOMMERCE_BASE_URL,
+  // LOGIN_URL: process.env.LOGIN_URL,
+  // LOGOUT_URL: process.env.LOGOUT_URL,
+  // CSRF_TOKEN_API_PATH: process.env.CSRF_TOKEN_API_PATH,
+  // REFRESH_ACCESS_TOKEN_ENDPOINT: process.env.REFRESH_ACCESS_TOKEN_ENDPOINT,
+  // DATA_API_BASE_URL: process.env.DATA_API_BASE_URL,
+  // SECURE_COOKIES: process.env.NODE_ENV !== 'development',
+  SEGMENT_KEY: process.env.SEGMENT_KEY,
+  // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
+  LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
+  SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN || '',
+  ZENDESK_KEY: process.env.ZENDESK_KEY,
+  SUPPORT_URL: process.env.SUPPORT_URL || null,
+  ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
+  CAREER_LINK_URL: process.env.CAREER_LINK_URL || null,
+};
+
+const features = {};
+
+export { configuration, features };
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1 +0,0 @@
-export const appId = 'org.openedx.frontend.app.learnerDashboard';
--- a/src/containers/CourseCard/CourseCard.scss
+++ b/src/containers/CourseCard/CourseCard.scss
@@ -1,4 +1,4 @@
-@import "@openedx/paragon/scss/core/core";
+@import "@edx/paragon/scss/core/core";

 .course-card {
  .card {
--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.js
@@ -1,4 +1,4 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { useWindowSize, breakpoints } from '@edx/paragon';

 export const useIsCollapsed = () => {
  const { width } = useWindowSize();
--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/hooks.test.js
@@ -1,4 +1,4 @@
-import { useWindowSize, breakpoints } from '@openedx/paragon';
+import { useWindowSize, breakpoints } from '@edx/paragon';
 import useIsCollapsed from './hooks';

 describe('useIsCollapsed', () => {
--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from '@openedx/paragon';
+import { Button } from '@edx/paragon';

 import useIsCollapsed from './hooks';

--- a/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ActionButton/index.test.jsx
@@ -1,4 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

 import ActionButton from '.';

@@ -14,12 +14,12 @@ describe('ActionButton', () => {
    test('is collapsed', () => {
      useIsCollapsed.mockReturnValueOnce(true);
      const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('is not collapsed', () => {
      useIsCollapsed.mockReturnValueOnce(false);
      const wrapper = shallow(<ActionButton {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
  });
 });
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';

+import track from 'tracking';
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx
@@ -1,5 +1,6 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

+import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
@@ -27,7 +28,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
 );

 describe('BeginCourseButton', () => {
@@ -58,10 +59,10 @@ describe('BeginCourseButton', () => {
        wrapper = shallow(<BeginCourseButton {...props} />);
      });
      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
+        expect(wrapper).toMatchSnapshot();
      });
      it('should be disabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(true);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
      });
    });
    describe('enabled', () => {
@@ -69,13 +70,13 @@ describe('BeginCourseButton', () => {
        wrapper = shallow(<BeginCourseButton {...props} />);
      });
      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
+        expect(wrapper).toMatchSnapshot();
      });
      it('should be enabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(false);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
      });
      it('should track enter course clicked event on click, with exec ed param', () => {
-        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
          track.course.enterCourseClicked,
          props.cardId,
          homeUrl + execEdPath(props.cardId),
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';

+import track from 'tracking';
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx
@@ -1,5 +1,6 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

+import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import track from 'tracking';
 import useActionDisabledState from '../hooks';
@@ -26,7 +27,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
 );

 let wrapper;
@@ -56,10 +57,10 @@ describe('ResumeButton', () => {
        wrapper = shallow(<ResumeButton {...props} />);
      });
      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
+        expect(wrapper).toMatchSnapshot();
      });
      it('should be disabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(true);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
      });
    });
    describe('enabled', () => {
@@ -67,13 +68,13 @@ describe('ResumeButton', () => {
        wrapper = shallow(<ResumeButton {...props} />);
      });
      test('snapshot', () => {
-        expect(wrapper.snapshot).toMatchSnapshot();
+        expect(wrapper).toMatchSnapshot();
      });
      it('should be enabled', () => {
-        expect(wrapper.instance.props.disabled).toEqual(false);
+        expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
      });
      it('should track enter course clicked event on click, with exec ed param', () => {
-        expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+        expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
          track.course.enterCourseClicked,
          props.cardId,
          resumeUrl + execEdPath(props.cardId),
--- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.jsx
@@ -1,10 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';

+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx
@@ -1,6 +1,7 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

 import { reduxHooks } from 'hooks';
+import { htmlProps } from 'data/constants/htmlKeys';
 import useActionDisabledState from '../hooks';

 import SelectSessionButton from './SelectSessionButton';
@@ -18,17 +19,17 @@ let wrapper;
 describe('SelectSessionButton', () => {
  const props = { cardId: 'cardId' };
  it('default render', () => {
+    expect(wrapper).toMatchSnapshot();
    wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(false);
-    expect(wrapper.instance.props.onClick.getMockName()).toEqual(
+    expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
+    expect(wrapper.prop(htmlProps.onClick).getMockName()).toEqual(
      reduxHooks.useUpdateSelectSessionModalCallback().getMockName(),
    );
  });
  test('disabled states', () => {
    useActionDisabledState.mockReturnValueOnce({ disableSelectSession: true });
+    expect(wrapper).toMatchSnapshot();
    wrapper = shallow(<SelectSessionButton {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(true);
+    expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
  });
 });
--- a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.jsx
@@ -0,0 +1,45 @@
+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;
--- a/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx
@@ -0,0 +1,50 @@
+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);
+    });
+  });
+});
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.jsx
@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { useIntl } from '@openedx/frontend-base';
-
-import track from '../../../../tracking';
-import { reduxHooks } from '../../../../hooks';
+import { useIntl } from '@edx/frontend-platform/i18n';

+import track from 'tracking';
+import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ActionButton from './ActionButton';
 import messages from './messages';
--- a/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx
@@ -1,6 +1,7 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

 import track from 'tracking';
+import { htmlProps } from 'data/constants/htmlKeys';
 import { reduxHooks } from 'hooks';
 import useActionDisabledState from '../hooks';
 import ViewCourseButton from './ViewCourseButton';
@@ -15,7 +16,7 @@ jest.mock('hooks', () => ({
  reduxHooks: {
    useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
    useTrackCourseEvent: jest.fn(
-      (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
+      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
    ),
  },
 }));
@@ -28,18 +29,18 @@ const homeUrl = 'homeUrl';
 describe('ViewCourseButton', () => {
  test('learner can view course', () => {
    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.onClick).toEqual(reduxHooks.useTrackCourseEvent(
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.prop(htmlProps.onClick)).toEqual(reduxHooks.useTrackCourseEvent(
      track.course.enterCourseClicked,
      defaultProps.cardId,
      homeUrl,
    ));
-    expect(wrapper.instance.props.disabled).toEqual(false);
+    expect(wrapper.prop(htmlProps.disabled)).toEqual(false);
  });
  test('learner cannot view course', () => {
    useActionDisabledState.mockReturnValueOnce({ disableViewCourse: true });
    const wrapper = shallow(<ViewCourseButton {...defaultProps} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.props.disabled).toEqual(true);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.prop(htmlProps.disabled)).toEqual(true);
  });
 });
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/BeginCourseButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/BeginCourseButton.test.jsx.snap
@@ -6,11 +6,11 @@ exports[`BeginCourseButton snapshot disabled snapshot 1`] = `
  disabled={true}
  href="#"
  onClick={
-    {
-      "trackCourseEvent": {
+    Object {
+      "trackCourseEvent": Object {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "home-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
      },
    }
  }
@@ -25,11 +25,11 @@ exports[`BeginCourseButton snapshot enabled snapshot 1`] = `
  disabled={false}
  href="#"
  onClick={
-    {
-      "trackCourseEvent": {
+    Object {
+      "trackCourseEvent": Object {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "home-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "home-urlexec-ed-tracking-path=cardId",
      },
    }
  }
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/ResumeButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/ResumeButton.test.jsx.snap
@@ -6,11 +6,11 @@ exports[`ResumeButton snapshot disabled snapshot 1`] = `
  disabled={true}
  href="#"
  onClick={
-    {
-      "trackCourseEvent": {
+    Object {
+      "trackCourseEvent": Object {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "resume-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
      },
    }
  }
@@ -25,11 +25,11 @@ exports[`ResumeButton snapshot enabled snapshot 1`] = `
  disabled={false}
  href="#"
  onClick={
-    {
-      "trackCourseEvent": {
+    Object {
+      "trackCourseEvent": Object {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "resume-urlexec-ed-tracking-path=cardId",
+        "upgradeUrl": "resume-urlexec-ed-tracking-path=cardId",
      },
    }
  }
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/SelectSessionButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/SelectSessionButton.test.jsx.snap
@@ -1,6 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`SelectSessionButton default render 1`] = `
+exports[`SelectSessionButton default render 1`] = `undefined`;
+
+exports[`SelectSessionButton disabled states 1`] = `
 <ActionButton
  disabled={false}
  onClick={[MockFunction mockOpenSessionModal]}
@@ -8,12 +10,3 @@ exports[`SelectSessionButton default render 1`] = `
  Select Session
 </ActionButton>
 `;
-
-exports[`SelectSessionButton disabled states 1`] = `
-<ActionButton
-  disabled={true}
-  onClick={[MockFunction mockOpenSessionModal]}
->
-  Select Session
-</ActionButton>
-`;
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/UpgradeButton.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardActions/snapshots/UpgradeButton.test.jsx.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UpgradeButton snapshot can upgrade 1`] = `
+<ActionButton
+  as="a"
+  disabled={false}
+  href="upgradeUrl"
+  iconBefore={[MockFunction icons.Locked]}
+  onClick={
+    Object {
+      "trackCourseEvent": Object {
+        "cardId": "cardId",
+        "eventName": [MockFunction segment.trackUpgradeClicked],
+        "upgradeUrl": "upgradeUrl",
+      },
+    }
+  }
+  variant="outline-primary"
+>
+  Upgrade
+</ActionButton>
+`;
+
+exports[`UpgradeButton snapshot cannot upgrade 1`] = `
+<ActionButton
+  disabled={true}
+  iconBefore={[MockFunction icons.Locked]}
+  variant="outline-primary"
+>
+  Upgrade
+</ActionButton>
+`;
--- a/src/containers/CourseCard/components/CourseCardActions/snapshots/ViewCourseButton.test.jsx.snap
+++ b/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={
-    {
-      "trackCourseEvent": {
+    Object {
+      "trackCourseEvent": Object {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "homeUrl",
+        "upgradeUrl": "homeUrl",
      },
    }
  }
@@ -25,11 +25,11 @@ exports[`ViewCourseButton learner cannot view course 1`] = `
  disabled={true}
  href="#"
  onClick={
-    {
-      "trackCourseEvent": {
+    Object {
+      "trackCourseEvent": Object {
        "cardId": "cardId",
        "eventName": [MockFunction segment.enterCourseClicked],
-        "url": "homeUrl",
+        "upgradeUrl": "homeUrl",
      },
    }
  }
--- a/src/containers/CourseCard/components/CourseCardActions/index.jsx
+++ b/src/containers/CourseCard/components/CourseCardActions/index.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { ActionRow } from '@openedx/paragon';
+import { ActionRow } from '@edx/paragon';

-import { reduxHooks } from '../../../../hooks';
-import CourseCardActionSlot from '../../../../slots/CourseCardActionSlot';
+import { reduxHooks } from 'hooks';

+import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -14,13 +14,15 @@ import ViewCourseButton from './ViewCourseButton';
 export const CourseCardActions = ({ cardId }) => {
  const { isEntitlement, isFulfilled } = reduxHooks.useCardEntitlementData(cardId);
  const {
+    isVerified,
    hasStarted,
+    isExecEd2UCourse,
  } = reduxHooks.useCardEnrollmentData(cardId);
  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);

  return (
    <ActionRow data-test-id="CourseCardActions">
-      <CourseCardActionSlot cardId={cardId} />
+      {!(isEntitlement || isVerified || isExecEd2UCourse) && <UpgradeButton cardId={cardId} />}
      {isEntitlement && (isFulfilled
        ? <ViewCourseButton cardId={cardId} />
        : <SelectSessionButton cardId={cardId} />
--- a/src/containers/CourseCard/components/CourseCardActions/index.test.jsx
+++ b/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 CourseCardActionSlot from 'slots/CourseCardActionSlot';
+import UpgradeButton from './UpgradeButton';
 import SelectSessionButton from './SelectSessionButton';
 import BeginCourseButton from './BeginCourseButton';
 import ResumeButton from './ResumeButton';
@@ -19,7 +19,7 @@ jest.mock('hooks', () => ({
  },
 }));

-jest.mock('slots/CourseCardActionSlot', () => 'CustomActionButton');
+jest.mock('./UpgradeButton', () => 'UpgradeButton');
 jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
 jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
 jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
@@ -57,7 +57,19 @@ 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();
@@ -69,26 +81,33 @@ describe('CourseCardActions', () => {
        expect(el.instance.findByType(SelectSessionButton)[0].props.cardId).toEqual(cardId);
      });
    });
-    describe('not entitlement, verified, or exec ed', () => {
-      it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
+    describe('verified course', () => {
+      it('does not render upgrade button', () => {
+        mockHooks({ isVerified: true });
+        render();
+        expect(el.instance.findByType(UpgradeButton).length).toEqual(0);
+      });
+    });
+    describe('not entielement, verified, or exec ed', () => {
+      it('renders UpgradeButton and ViewCourseButton for archived courses', () => {
        mockHooks({ isArchived: true });
        render();
-        expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
+        expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
      });
      describe('unstarted courses', () => {
-        it('renders CourseCardActionSlot and BeginCourseButton', () => {
+        it('renders UpgradeButton and BeginCourseButton', () => {
          mockHooks();
          render();
-          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
          expect(el.instance.findByType(BeginCourseButton)[0].props.cardId).toEqual(cardId);
        });
      });
      describe('active courses (started, and not archived)', () => {
-        it('renders CourseCardActionSlot and ResumeButton', () => {
+        it('renders UpgradeButton and ResumeButton', () => {
          mockHooks({ hasStarted: true });
          render();
-          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
+          expect(el.instance.findByType(UpgradeButton)[0].props.cardId).toEqual(cardId);
          expect(el.instance.findByType(ResumeButton)[0].props.cardId).toEqual(cardId);
        });
      });
--- a/src/containers/CourseCard/components/CourseCardActions/messages.js
+++ b/src/containers/CourseCard/components/CourseCardActions/messages.js
@@ -1,6 +1,11 @@
-import { defineMessages } from '@openedx/frontend-base';
+import { StrictDict } from 'utils';

-const messages = defineMessages({
+export const messages = StrictDict({
+  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',
--- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx
@@ -2,12 +2,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';

-import { MailtoLink, Hyperlink } from '@openedx/paragon';
-import { CheckCircle } from '@openedx/paragon/icons';
-import { useIntl } from '@openedx/frontend-base';
+import { MailtoLink, Hyperlink } from '@edx/paragon';
+import { CheckCircle } from '@edx/paragon/icons';
+import { useIntl } from '@edx/frontend-platform/i18n';

-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { utilHooks, reduxHooks } from 'hooks';
+import Banner from 'components/Banner';

 import messages from './messages';

@@ -26,14 +26,17 @@ export const CertificateBanner = ({ cardId }) => {
  const { formatMessage } = useIntl();
  const formatDate = useFormatDate();

-  const emailLink = address => <MailtoLink to={address}>{address}</MailtoLink>;
+  const emailLink = address => address && <MailtoLink to={address}>{address}</MailtoLink>;

  if (certificate.isRestricted) {
    return (
      <Banner variant="danger">
-        {supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
+        {formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) })}
        {isVerified && '  '}
-        {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
+        {isVerified && formatMessage(
+          messages.certRefundContactBilling,
+          { billingEmail: emailLink(billingEmail) },
+        )}
      </Banner>
    );
  }
--- a/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx
@@ -1,4 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { shallow } from 'enzyme';

 import { reduxHooks } from 'hooks';
 import CertificateBanner from './CertificateBanner';
@@ -21,6 +21,10 @@ jest.mock('components/Banner', () => 'Banner');

 describe('CertificateBanner', () => {
  const props = { cardId: 'cardId' };
+  reduxHooks.usePlatformSettingsData.mockReturnValue({
+    supportEmail: 'suport@email',
+    billingEmail: 'billing@email',
+  });
  reduxHooks.useCardCourseRunData.mockReturnValue({
    minPassingGrade: 0.8,
    progressUrl: 'progressUrl',
@@ -38,19 +42,16 @@ describe('CertificateBanner', () => {
  };
  const defaultCourseRun = { isArchived: false };
  const defaultGrade = { isPassing: false };
-  const defaultPlatformSettings = {};
  const createWrapper = ({
    certificate = {},
    enrollment = {},
    grade = {},
    courseRun = {},
-    platformSettings = {},
  }) => {
    reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
    reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
-    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
    return shallow(<CertificateBanner {...props} />);
  };
  /** TODO: Update tests to validate snapshots **/
@@ -61,29 +62,7 @@ describe('CertificateBanner', () => {
          isRestricted: true,
        },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('is restricted and verified', () => {
      const wrapper = createWrapper({
@@ -94,64 +73,21 @@ describe('CertificateBanner', () => {
          isVerified: true,
        },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with support and billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('is passing and is downloadable', () => {
      const wrapper = createWrapper({
        grade: { isPassing: true },
        certificate: { isDownloadable: true },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('not passing and is downloadable', () => {
      const wrapper = createWrapper({
        grade: { isPassing: false },
        certificate: { isDownloadable: true },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('not passing and audit', () => {
      const wrapper = createWrapper({
@@ -159,17 +95,17 @@ describe('CertificateBanner', () => {
          isAudit: true,
        },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('not passing and has finished', () => {
      const wrapper = createWrapper({
        courseRun: { isArchived: true },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('not passing and not audit and not finished', () => {
      const wrapper = createWrapper({});
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('is passing and is earned but unavailable', () => {
      const wrapper = createWrapper({
@@ -180,7 +116,7 @@ describe('CertificateBanner', () => {
          isEarnedButUnavailable: true,
        },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
    test('is passing and not downloadable render empty', () => {
      const wrapper = createWrapper({
@@ -188,7 +124,7 @@ describe('CertificateBanner', () => {
          isPassing: true,
        },
      });
-      expect(wrapper.snapshot).toMatchSnapshot();
+      expect(wrapper).toMatchSnapshot();
    });
  });
  describe('behavior', () => {
@@ -197,12 +133,8 @@ describe('CertificateBanner', () => {
        certificate: {
          isRestricted: true,
        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
      });
-      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
+      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
      expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
    });
@@ -214,12 +146,8 @@ describe('CertificateBanner', () => {
        enrollment: {
          isVerified: true,
        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
      });
-      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
+      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
      expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
    });
--- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx
@@ -1,18 +1,18 @@
 /* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Hyperlink } from '@openedx/paragon';
-import { useIntl } from '@openedx/frontend-base';
-
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
+import { Hyperlink } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';

+import { utilHooks, reduxHooks } from 'hooks';
+import Banner from 'components/Banner';
 import messages from './messages';

 export const CourseBanner = ({ cardId }) => {
  const {
    isVerified,
    isAuditAccessExpired,
+    canUpgrade,
    coursewareAccess = {},
  } = reduxHooks.useCardEnrollmentData(cardId);
  const courseRun = reduxHooks.useCardCourseRunData(cardId);
@@ -26,7 +26,13 @@ export const CourseBanner = ({ cardId }) => {
  return (
    <>
      {isAuditAccessExpired
-        && (
+        && (canUpgrade ? (
+          <Banner>
+            {formatMessage(messages.auditAccessExpired)}
+            {'  '}
+            {formatMessage(messages.upgradeToAccess)}
+          </Banner>
+        ) : (
          <Banner>
            {formatMessage(messages.auditAccessExpired)}
            {'  '}
@@ -34,7 +40,17 @@ export const CourseBanner = ({ cardId }) => {
              {formatMessage(messages.findAnotherCourse)}
            </Hyperlink>
          </Banner>
-        )}
+        ))}
+
+      {courseRun.isActive && !canUpgrade && (
+        <Banner>
+          {formatMessage(messages.upgradeDeadlinePassed)}
+          {'  '}
+          <Hyperlink isInline destination={courseRun.marketingUrl || ''}>
+            {formatMessage(messages.exploreCourseDetails)}
+          </Hyperlink>
+        </Banner>
+      )}

      {(!isStaff && isTooEarly && courseRun.startDate) && (
        <Banner>
@@ -43,7 +59,6 @@ export const CourseBanner = ({ cardId }) => {
          })}
        </Banner>
      )}
-
      {(!isStaff && hasUnmetPrerequisites) && (
        <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
      )}
--- a/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx
+++ b/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { Hyperlink } from '@openedx/paragon';
+import { shallow } from 'enzyme';
+import { Hyperlink } from '@edx/paragon';

 import { reduxHooks } from 'hooks';
 import { formatMessage } from 'testUtils';
@@ -25,6 +25,7 @@ let el;

 const enrollmentData = {
  isVerified: false,
+  canUpgrade: false,
  isAuditAccessExpired: false,
  coursewareAccess: {
    hasUnmetPrerequisites: false,
@@ -64,27 +65,60 @@ describe('CourseBanner', () => {
    render({ enrollment: { isVerified: true } });
    expect(el.isEmptyRender()).toEqual(true);
  });
-  describe('audit access expired', () => {
+  describe('audit access expired, can upgrade', () => {
+    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.snapshot).toMatchSnapshot();
+      expect(el).toMatchSnapshot();
    });
-    test('messages: auditAccessExpired', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.defaultMessage);
    });
  });
+  describe('course run active and cannot upgrade', () => {
+    beforeEach(() => {
+      render({ courseRun: { isActive: true } });
+    });
+    test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage);
+      const link = el.find(Hyperlink);
+      expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage);
+      expect(link.props().destination).toEqual(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.snapshot).toMatchSnapshot();
+      expect(el).toMatchSnapshot();
    });
    test('messages: prerequisitesNotMet', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
+      expect(el.text()).toContain(messages.prerequisitesNotMet.defaultMessage);
    });
  });
  describe('too early', () => {
@@ -92,17 +126,17 @@ describe('CourseBanner', () => {
      beforeEach(() => {
        render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
      });
-      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-      test('messages', () => expect(el.instance.children).toEqual([]));
+      test('snapshot', () => expect(el).toMatchSnapshot());
+      test('messages', () => expect(el.text()).toEqual(''));
    });
    describe('has start date', () => {
      beforeEach(() => {
        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
      });
-      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
+      test('snapshot', () => expect(el).toMatchSnapshot());

      test('messages: courseHasNotStarted', () => {
-        expect(el.instance.children[0].children[0].el).toContain(
+        expect(el.text()).toContain(
          formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
        );
      });
@@ -113,7 +147,7 @@ describe('CourseBanner', () => {
      render({ enrollment: { coursewareAccess: { isStaff: true } } });
    });
    test('snapshot: isStaff', () => {
-      expect(el.snapshot).toMatchSnapshot();
+      expect(el).toMatchSnapshot();
    });
  });
  test('snapshot: stacking banners', () => {
@@ -126,6 +160,6 @@ describe('CourseBanner', () => {
        },
      },
    });
-    expect(el.snapshot).toMatchSnapshot();
+    expect(el).toMatchSnapshot();
  });
 });
--- a/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/snapshots/index.test.jsx.snap
+++ b/src/containers/CourseCard/components/CourseCardBanners/CreditBanner/snapshots/index.test.jsx.snap
@@ -6,23 +6,20 @@ 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={
-        {
-          "supportEmailLink": <MailtoLink
-            to="test-support-email"
-          >
-            test-support-email
-          </MailtoLink>,
+        Object {
+          "supportEmailLink": <EmailLink
+            address="test-support-email"
+          />,
        }
      }
    />
@@ -33,22 +30,6 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
 </Banner>
 `;

-exports[`CreditBanner component render with error state with no email snapshot 1`] = `
-<Banner
-  variant="danger"
->
-  <p
-    className="credit-error-msg"
-    data-testid="credit-error-msg"
-  >
-    An error occurred with this transaction.
-  </p>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;
-
 exports[`CreditBanner component render with no error state snapshot 1`] = `
 <Banner>
  <ContentComponent
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Blue	a20ec2c3e6	Ahtesham/VAN-1615/modal fixes (#194 )	2023-08-22 18:19:19 +05:00
ahtesham-quraish	362d2406d3	fix: modal outside click fix Description: Modal window should not closed when click outside the modal VAN-1615	2023-08-22 13:41:49 +05:00
Syed Sajjad Hussain Shah	736abb4247	feat: add experiment and eventing to recommendations painted door exp (#191 )	2023-08-18 18:31:21 +05:00
Syed Sajjad Hussain Shah	05bdf4ee02	feat: add experiment and eventing to recommendations painted door exp VAN-1604	2023-08-18 18:00:23 +05:00
Blue	30fadadb26	Ahtesham/van 1601/stack buttons (#190 ) Stacked the button for modal window for mobile screen	2023-08-17 12:52:42 +05:00
ahtesham-quraish	825cca2d8d	fix: buttons are stacked in modal window Description: We have stacked the buttons those come in modal window VAN-1601	2023-08-17 12:41:28 +05:00
Blue	3bad4897ba	feat: add recommendations modal (#189 )	2023-08-16 21:23:44 +05:00
Blue	743c233f6d	Merge branch 'master' into ahtesham/VAN-1601/design	2023-08-16 21:13:25 +05:00
ahtesham-quraish	6cecc38e85	feat: add recommendations modal Description: Add recommendations buttons and modal for painted door experiment VAN-1601	2023-08-16 12:52:54 +05:00
@@ -1 +1 @@
 
 .15
				`@@ -1 +0,0 @@`
				`export const appId = 'org.openedx.frontend.app.learnerDashboard';`