feat!: remove custom header settings

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

.env

@@ -32,7 +32,6 @@ ENTERPRISE_MARKETING_UTM_SOURCE=''
 ENTERPRISE_MARKETING_UTM_CAMPAIGN=''
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM=''
 LEARNING_BASE_URL=''
-ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
@@ -40,5 +39,6 @@ ACCOUNT_SETTINGS_URL=''
 ACCOUNT_PROFILE_URL=''
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
-OPTIMIZELY_FULL_STACK_SDK_KEY=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false

.env.development

@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -21,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -39,7 +38,6 @@ ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 LEARNING_BASE_URL='http://localhost:2000'
 SESSION_COOKIE_DOMAIN='localhost'
-ZENDESK_KEY=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
@@ -47,5 +45,6 @@ ACCOUNT_SETTINGS_URL='http://localhost:1997'
 ACCOUNT_PROFILE_URL='http://localhost:1995'
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
-OPTIMIZELY_FULL_STACK_SDK_KEY=''
 ENABLE_EDX_PERSONAL_DASHBOARD=false
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false

.env.test

@@ -8,7 +8,6 @@ LOGOUT_URL='http://localhost:18000/logout'
 LOGO_URL=https://edx-cdn.org/v3/default/logo.svg
 LOGO_TRADEMARK_URL=https://edx-cdn.org/v3/default/logo-trademark.svg
 LOGO_WHITE_URL=https://edx-cdn.org/v3/default/logo-white.svg
-LOGO_POWERED_BY_OPEN_EDX_URL_SVG=https://edx-cdn.org/v3/stage/open-edx-tag.svg
 FAVICON_URL=https://edx-cdn.org/v3/default/favicon.ico
 CSRF_TOKEN_API_PATH='/csrf/api/v1/token'
 REFRESH_ACCESS_TOKEN_ENDPOINT='http://localhost:18000/login_refresh'
@@ -21,7 +20,7 @@ LMS_CLIENT_ID='login-service-client-id'
 SEGMENT_KEY=''
 FEATURE_FLAGS={}
 MARKETING_SITE_BASE_URL='http://localhost:18000'
-SUPPORT_URL='http://localhost:18000/support'
+SUPPORT_URL=''
 CONTACT_URL='http://localhost:18000/contact'
 OPEN_SOURCE_URL='http://localhost:18000/openedx'
 TERMS_OF_SERVICE_URL='http://localhost:18000/terms-of-service'
@@ -38,7 +37,6 @@ ENTERPRISE_MARKETING_UTM_SOURCE='example.com'
 ENTERPRISE_MARKETING_UTM_CAMPAIGN='example.com Referral'
 ENTERPRISE_MARKETING_FOOTER_UTM_MEDIUM='Footer'
 LEARNING_BASE_URL='http://localhost:2000'
-ZENDESK_KEY='test-zendesk-key'
 HOTJAR_APP_ID='hot-jar-app-id'
 HOTJAR_VERSION='6'
 HOTJAR_DEBUG=''
@@ -46,5 +44,6 @@ ACCOUNT_SETTINGS_URL='http://account-settings-url.test'
 ACCOUNT_PROFILE_URL='http://account-profile-url.test'
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
-OPTIMIZELY_FULL_STACK_SDK_KEY='SDK Key'
 ENABLE_EDX_PERSONAL_DASHBOARD=true
+ENABLE_PROGRAMS=false
+NON_BROWSABLE_COURSES=false

.github/CODEOWNERS

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

.github/dependabot.yml

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

.github/workflows/ci.yml

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

.github/workflows/npm-publish.yml

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

.husky/pre-push

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

.nvmrc

@@ -1 +1 @@
-18.20
+20

.releaserc

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

README.rst

@@ -30,6 +30,12 @@ To start the MFE and enable the feature in LMS:
 From there, simply load the configured address/port.  You should be prompted to log into your LMS if you are not
 already, and then redirected to your home page.
 
+Plugins
+-------
+This MFE can be customized using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
+
+The parts of this MFE that can be customized in that manner are documented `here </src/plugin-slots>`_.
+
 Contributing
 ------------
 

catalog-info.yaml

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

example.env.config.js

@@ -29,7 +29,6 @@ module.exports = {
   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',
@@ -60,7 +59,6 @@ module.exports = {
   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: '',
@@ -70,6 +68,5 @@ module.exports = {
   ACCOUNT_PROFILE_URL: 'http://localhost:1995',
   ENABLE_NOTICES: '',
   CAREER_LINK_URL: '',
-  OPTIMIZELY_FULL_STACK_SDK_KEY: '',
   EXPERIMENT_08_23_VAN_PAINTED_DOOR: true,
 };

openedx.yaml

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

package.json

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

src/App.jsx

@@ -6,7 +6,7 @@ import { logError } from '@edx/frontend-platform/logging';
 import { initializeHotjar } from '@edx/frontend-enterprise-hotjar';
 
 import { ErrorPage, AppContext } from '@edx/frontend-platform/react';
-import Footer from '@edx/frontend-component-footer';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import { Alert } from '@openedx/paragon';
 
 import { RequestKeys } from 'data/constants/requests';
@@ -17,8 +17,6 @@ import {
 } from 'data/redux';
 import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
-import ZendeskFab from 'components/ZendeskFab';
-import { ExperimentProvider } from 'ExperimentContext';
 
 import track from 'tracking';
 
@@ -42,19 +40,6 @@ export const App = () => {
   const { supportEmail } = reduxHooks.usePlatformSettingsData();
   const loadData = reduxHooks.useLoadData();
 
-  const optimizelyScript = () => {
-    if (getConfig().OPTIMIZELY_URL) {
-      return <script src={getConfig().OPTIMIZELY_URL} />;
-    } if (getConfig().OPTIMIZELY_PROJECT_ID) {
-      return (
-        <script
-          src={`${getConfig().MARKETING_SITE_BASE_URL}/optimizelyjs/${getConfig().OPTIMIZELY_PROJECT_ID}.js`}
-        />
-      );
-    }
-    return null;
-  };
-
   React.useEffect(() => {
     if (authenticatedUser?.administrator || getConfig().NODE_ENV === 'development') {
       window.loadEmptyData = () => {
@@ -91,26 +76,22 @@ export const App = () => {
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
         <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-        {optimizelyScript()}
       </Helmet>
       <div>
         <AppWrapper>
           <LearnerDashboardHeader />
-          <main>
+          <main id="main">
             {hasNetworkFailure
               ? (
                 <Alert variant="danger">
                   <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
                 </Alert>
               ) : (
-                <ExperimentProvider>
-                  <Dashboard />
-                </ExperimentProvider>
+                <Dashboard />
               )}
           </main>
         </AppWrapper>
-        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-        <ZendeskFab />
+        <FooterSlot />
       </div>
     </>
   );

src/App.scss

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

src/App.test.jsx

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

src/ExperimentContext.jsx

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

src/ExperimentContext.test.jsx

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

src/__snapshots__/App.test.jsx.snap

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

src/__snapshots__/index.test.jsx.snap

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

src/components/NoticesWrapper/api.js

@@ -3,16 +3,15 @@ import { getAuthenticatedHttpClient, getAuthenticatedUser } from '@edx/frontend-
 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 }) => {
+export const getNotices = ({ onLoad, notFoundMessage }) => {
   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}`);
+      logInfo(`${e}. ${notFoundMessage}`);
     } else {
       logError(e);
     }

src/components/NoticesWrapper/hooks.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { getConfig } from '@edx/frontend-platform';
+import { useIntl } from 'react-intl';
 
 import { StrictDict } from 'utils';
 import { getNotices } from './api';
 import * as module from './hooks';
+import messages from './messages';
 
 /**
  * This component uses the platform-plugin-notices plugin to function.
@@ -17,6 +19,8 @@ export const state = StrictDict({
 
 export const useNoticesWrapperData = () => {
   const [isRedirected, setIsRedirected] = module.state.isRedirected();
+  const { formatMessage } = useIntl();
+
   React.useEffect(() => {
     if (getConfig().ENABLE_NOTICES) {
       getNotices({
@@ -26,9 +30,10 @@ export const useNoticesWrapperData = () => {
             window.location.replace(`${data.data.results[0]}?next=${window.location.href}`);
           }
         },
+        notFoundMessage: formatMessage(messages.error404Message),
       });
     }
-  }, [setIsRedirected]);
+  }, [setIsRedirected, formatMessage]);
   return { isRedirected };
 };
 

src/components/NoticesWrapper/hooks.test.js

@@ -8,6 +8,12 @@ import * as hooks from './hooks';
 
 jest.mock('@edx/frontend-platform', () => ({ getConfig: jest.fn() }));
 jest.mock('./api', () => ({ getNotices: jest.fn() }));
+const mockFormatMessage = jest.fn(message => message.defaultMessage || 'translated-string');
+jest.mock('react-intl', () => ({
+  useIntl: () => ({
+    formatMessage: mockFormatMessage,
+  }),
+}));
 
 getConfig.mockReturnValue({ ENABLE_NOTICES: true });
 const state = new MockUseState(hooks);
@@ -34,7 +40,7 @@ describe('NoticesWrapper hooks', () => {
           getConfig.mockReturnValueOnce({ ENABLE_NOTICES: false });
           hooks.useNoticesWrapperData();
           const [cb, prereqs] = React.useEffect.mock.calls[0];
-          expect(prereqs).toEqual([state.setState.isRedirected]);
+          expect(prereqs).toEqual([state.setState.isRedirected, mockFormatMessage]);
           cb();
           expect(getNotices).not.toHaveBeenCalled();
         });
@@ -43,7 +49,7 @@ describe('NoticesWrapper hooks', () => {
             hooks.useNoticesWrapperData();
             expect(React.useEffect).toHaveBeenCalled();
             const [cb, prereqs] = React.useEffect.mock.calls[0];
-            expect(prereqs).toEqual([state.setState.isRedirected]);
+            expect(prereqs).toEqual([state.setState.isRedirected, mockFormatMessage]);
             cb();
             expect(getNotices).toHaveBeenCalled();
             const { onLoad } = getNotices.mock.calls[0][0];
@@ -59,7 +65,7 @@ describe('NoticesWrapper hooks', () => {
             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]);
+            expect(prereqs).toEqual([state.setState.isRedirected, mockFormatMessage]);
             cb();
             expect(getNotices).toHaveBeenCalled();
             const { onLoad } = getNotices.mock.calls[0][0];

src/components/NoticesWrapper/messages.js

@@ -0,0 +1,11 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  error404Message: {
+    id: 'learner-dash.notices.error404Message',
+    defaultMessage: 'This probably happened because the notices plugin is not installed on platform.',
+    description: 'Error message when notices API returns 404',
+  },
+});
+
+export default messages;

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

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

src/components/ZendeskFab/index.jsx

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

src/components/ZendeskFab/index.test.jsx

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

src/components/ZendeskFab/messages.js

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

src/config/index.js

@@ -12,12 +12,14 @@ const configuration = {
   // ACCESS_TOKEN_COOKIE_NAME: process.env.ACCESS_TOKEN_COOKIE_NAME,
   LEARNING_BASE_URL: process.env.LEARNING_BASE_URL,
   SESSION_COOKIE_DOMAIN: process.env.SESSION_COOKIE_DOMAIN || '',
-  ZENDESK_KEY: process.env.ZENDESK_KEY,
   SUPPORT_URL: process.env.SUPPORT_URL || null,
   ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
   CAREER_LINK_URL: process.env.CAREER_LINK_URL || null,
   LOGO_URL: process.env.LOGO_URL,
   ENABLE_EDX_PERSONAL_DASHBOARD: process.env.ENABLE_EDX_PERSONAL_DASHBOARD === 'true',
+  SEARCH_CATALOG_URL: process.env.SEARCH_CATALOG_URL || null,
+  ENABLE_PROGRAMS: process.env.ENABLE_PROGRAMS === 'true',
+  NON_BROWSABLE_COURSES: process.env.NON_BROWSABLE_COURSES === 'true',
 };
 
 const features = {};

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

@@ -27,7 +27,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
 );
 
 describe('BeginCourseButton', () => {

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

@@ -26,7 +26,7 @@ reduxHooks.useCardCourseRunData.mockReturnValue({ resumeUrl });
 const execEdPath = (cardId) => `exec-ed-tracking-path=${cardId}`;
 reduxHooks.useCardExecEdTrackingParam.mockImplementation(execEdPath);
 reduxHooks.useTrackCourseEvent.mockImplementation(
-  (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+  (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
 );
 
 let wrapper;

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

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

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

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

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

@@ -15,7 +15,7 @@ jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseRunData: jest.fn(() => ({ homeUrl: 'homeUrl' })),
     useTrackCourseEvent: jest.fn(
-      (eventName, cardId, upgradeUrl) => ({ trackCourseEvent: { eventName, cardId, upgradeUrl } }),
+      (eventName, cardId, url) => ({ trackCourseEvent: { eventName, cardId, url } }),
     ),
   },
 }));

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -25,7 +25,6 @@ let el;
 
 const enrollmentData = {
   isVerified: false,
-  canUpgrade: false,
   isAuditAccessExpired: false,
   coursewareAccess: {
     hasUnmetPrerequisites: false,
@@ -65,51 +64,18 @@ describe('CourseBanner', () => {
     render({ enrollment: { isVerified: true } });
     expect(el.isEmptyRender()).toEqual(true);
   });
-  describe('audit access expired, can upgrade', () => {
-    beforeEach(() => {
-      render({ enrollment: { isAuditAccessExpired: true, canUpgrade: true } });
-    });
-    test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.instance.children[0].children[2].el).toContain(messages.upgradeToAccess.defaultMessage);
-    });
-  });
-  describe('audit access expired, cannot upgrade', () => {
+  describe('audit access expired', () => {
     beforeEach(() => {
       render({ enrollment: { isAuditAccessExpired: true } });
     });
     test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
       expect(el.snapshot).toMatchSnapshot();
     });
-    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+    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);
     });
   });
-  describe('course run active and cannot upgrade', () => {
-    beforeEach(() => {
-      render({ courseRun: { isActive: true } });
-    });
-    test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.upgradeDeadlinePassed.defaultMessage);
-      const link = el.instance.findByType(Hyperlink);
-      expect(link[0].children[0].el).toEqual(messages.exploreCourseDetails.defaultMessage);
-      expect(link[0].props.destination).toEqual(courseRunData.marketingUrl);
-    });
-  });
-  test('no display if audit access not expired and (course is not active or can upgrade)', () => {
-    render();
-    // isEmptyRender() isn't true because the minimal is <Fragment />
-    expect(el.instance.children).toEqual([]);
-    render({ enrollment: { canUpgrade: true }, courseRun: { isActive: true } });
-    expect(el.instance.children).toEqual([]);
-  });
   describe('unmet prerequisites', () => {
     beforeEach(() => {
       render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });

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

@@ -10,14 +10,14 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
   >
     <format-message-function
       message={
-        Object {
+        {
           "defaultMessage": "An error occurred with this transaction.  For help, contact {supportEmailLink}.",
           "description": "",
           "id": "learner-dash.courseCard.banners.credit.error",
         }
       }
       values={
-        Object {
+        {
           "supportEmailLink": <MailtoLink
             to="test-support-email"
           >

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

@@ -27,8 +27,8 @@ exports[`CreditContent component render with action snapshot 1`] = `
   </ActionRow>
   <CreditRequestForm
     requestData={
-      Object {
-        "parameters": Object {
+      {
+        "parameters": {
           "key1": "val1",
         },
         "url": "test-request-data-url",
@@ -48,8 +48,8 @@ exports[`CreditContent component render without action snapshot 1`] = `
   </div>
   <CreditRequestForm
     requestData={
-      Object {
-        "parameters": Object {
+      {
+        "parameters": {
           "key1": "val1",
         },
         "url": "test-request-data-url",

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -10,8 +10,8 @@ export const useAccessMessage = ({ cardId }) => {
   const courseRun = reduxHooks.useCardCourseRunData(cardId);
   const formatDate = utilHooks.useFormatDate();
   if (!courseRun.isStarted) {
-    if (!courseRun.startDate) { return null; }
-    const startDate = formatDate(courseRun.startDate);
+    if (!courseRun.startDate && !courseRun.advertisedStart) { return null; }
+    const startDate = courseRun.advertisedStart ? courseRun.advertisedStart : formatDate(courseRun.startDate);
     return formatMessage(messages.courseStarts, { startDate });
   }
   if (enrollment.isEnrolled) {

src/containers/CourseCard/components/CourseCardImage.jsx

@@ -20,11 +20,13 @@ export const CourseCardImage = ({ cardId, orientation }) => {
   const { isVerified } = reduxHooks.useCardEnrollmentData(cardId);
   const { disableCourseTitle } = useActionDisabledState(cardId);
   const handleImageClicked = reduxHooks.useTrackCourseEvent(courseImageClicked, cardId, homeUrl);
-  const wrapperClassName = `pgn__card-wrapper-image-cap overflow-visible ${orientation}`;
+  const wrapperClassName = `pgn__card-wrapper-image-cap d-inline-block overflow-visible ${orientation}`;
   const image = (
     <>
       <img
-        className="pgn__card-image-cap show"
+        // w-100 is necessary for images on Safari, otherwise stretches full height of the image
+        // https://stackoverflow.com/a/44250830
+        className="pgn__card-image-cap w-100 show"
         src={bannerImgSrc}
         alt={formatMessage(messages.bannerAlt)}
       />

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

@@ -18,8 +18,8 @@ jest.mock('hooks', () => ({
     useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })),
     useCardCourseRunData: jest.fn(() => ({ homeUrl })),
     useCardEnrollmentData: jest.fn(() => ({ isVerified: true })),
-    useTrackCourseEvent: jest.fn((eventName, cardId, upgradeUrl) => ({
-      trackCourseEvent: { eventName, cardId, upgradeUrl },
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
+      trackCourseEvent: { eventName, cardId, url },
     })),
   },
 }));

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

@@ -17,7 +17,7 @@ exports[`CourseCardMenu render show dropdown hide unenroll item and disable emai
       <SocialShareMenu
         cardId="test-card-id"
         emailSettings={
-          Object {
+          {
             "hide": [MockFunction emailSettingHide],
             "isVisible": false,
             "show": [MockFunction emailSettingShow],
@@ -58,7 +58,7 @@ exports[`CourseCardMenu render show dropdown show unenroll and enable email snap
       <SocialShareMenu
         cardId="test-card-id"
         emailSettings={
-          Object {
+          {
             "hide": [MockFunction emailSettingHide],
             "isVisible": false,
             "show": [MockFunction emailSettingShow],

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

@@ -17,8 +17,8 @@ jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseData: jest.fn(() => ({ courseName: 'course-name' })),
     useCardCourseRunData: jest.fn(() => ({ homeUrl })),
-    useTrackCourseEvent: jest.fn((eventName, cardId, upgradeUrl) => ({
-      trackCourseEvent: { eventName, cardId, upgradeUrl },
+    useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
+      trackCourseEvent: { eventName, cardId, url },
     })),
   },
 }));

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

@@ -2,14 +2,14 @@
 
 exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
 <a
-  className="pgn__card-wrapper-image-cap overflow-visible orientation"
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
   href="home-url"
   onClick={
-    Object {
-      "trackCourseEvent": Object {
+    {
+      "trackCourseEvent": {
         "cardId": "cardId",
         "eventName": [MockFunction segment.courseImageClicked],
-        "upgradeUrl": "home-url",
+        "url": "home-url",
       },
     }
   }
@@ -18,7 +18,7 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
   <Fragment>
     <img
       alt="Course thumbnail"
-      className="pgn__card-image-cap show"
+      className="pgn__card-image-cap w-100 show"
       src="banner-img-src"
     />
     <span
@@ -43,12 +43,12 @@ exports[`CourseCardImage snapshot renders clickable link course Image 1`] = `
 
 exports[`CourseCardImage snapshot renders disabled link 1`] = `
 <div
-  className="pgn__card-wrapper-image-cap overflow-visible orientation"
+  className="pgn__card-wrapper-image-cap d-inline-block overflow-visible orientation"
 >
   <Fragment>
     <img
       alt="Course thumbnail"
-      className="pgn__card-image-cap show"
+      className="pgn__card-image-cap w-100 show"
       src="banner-img-src"
     />
     <span

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

@@ -7,11 +7,11 @@ exports[`CourseCardTitle snapshot renders clickable link course title 1`] = `
     data-testid="CourseCardTitle"
     href="home-url"
     onClick={
-      Object {
-        "trackCourseEvent": Object {
+      {
+        "trackCourseEvent": {
           "cardId": "cardId",
           "eventName": [MockFunction segment.courseTitleClicked],
-          "upgradeUrl": "home-url",
+          "url": "home-url",
         },
       }
     }

src/containers/CourseCard/components/hooks.js

@@ -3,19 +3,18 @@ import { reduxHooks } from 'hooks';
 export const useActionDisabledState = (cardId) => {
   const { isMasquerading } = reduxHooks.useMasqueradeData();
   const {
-    canUpgrade, hasAccess, isAudit, isAuditAccessExpired,
+    hasAccess, isAudit, isAuditAccessExpired,
   } = reduxHooks.useCardEnrollmentData(cardId);
   const {
     isEntitlement, isFulfilled, canChange, hasSessions,
   } = reduxHooks.useCardEntitlementData(cardId);
 
-  const { resumeUrl, homeUrl, upgradeUrl } = reduxHooks.useCardCourseRunData(cardId);
+  const { resumeUrl, homeUrl } = reduxHooks.useCardCourseRunData(cardId);
 
   const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
   const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
   const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);
   const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);
-  const disableUpgradeCourse = !upgradeUrl || (isMasquerading && !canUpgrade);
 
   const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
 
@@ -23,7 +22,6 @@ export const useActionDisabledState = (cardId) => {
     disableBeginCourse,
     disableResumeCourse,
     disableViewCourse,
-    disableUpgradeCourse,
     disableSelectSession,
     disableCourseTitle,
   };

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

@@ -16,7 +16,6 @@ const cardId = 'my-test-course-number';
 describe('useActionDisabledState', () => {
   const defaultData = {
     isMasquerading: false,
-    canUpgrade: false,
     isEntitlement: false,
     isFulfilled: false,
     canChange: false,
@@ -26,12 +25,10 @@ describe('useActionDisabledState', () => {
     isAuditAccessExpired: false,
     resumeUrl: 'resume.url',
     homeUrl: 'home.url',
-    upgradeUrl: 'upgrade.url',
   };
   const mockHooksData = (args) => {
     const {
       isMasquerading,
-      canUpgrade,
       isEntitlement,
       isFulfilled,
       canChange,
@@ -41,11 +38,9 @@ describe('useActionDisabledState', () => {
       isAuditAccessExpired,
       resumeUrl,
       homeUrl,
-      upgradeUrl,
     } = { ...defaultData, ...args };
     reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
-      canUpgrade,
       hasAccess,
       isAudit,
       isAuditAccessExpired,
@@ -59,7 +54,6 @@ describe('useActionDisabledState', () => {
     reduxHooks.useCardCourseRunData.mockReturnValueOnce({
       resumeUrl,
       homeUrl,
-      upgradeUrl,
     });
   };
 
@@ -121,21 +115,6 @@ describe('useActionDisabledState', () => {
       testDisabled({ hasAccess: true }, false);
     });
   });
-  describe('disableUpgradeCourse', () => {
-    const testDisabled = (data, expected) => {
-      mockHooksData(data);
-      expect(runHook().disableUpgradeCourse).toBe(expected);
-    };
-    it('disable when upgradeUrl is invalid', () => {
-      testDisabled({ upgradeUrl: null }, true);
-    });
-    it('disable when isMasquerading is true and canUpgrade is false', () => {
-      testDisabled({ isMasquerading: true, canUpgrade: false }, true);
-    });
-    it('enable when all conditions are met', () => {
-      testDisabled({ canUpgrade: true }, false);
-    });
-  });
   describe('disableSelectSession', () => {
     const testDisabled = (data, expected) => {
       mockHooksData(data);

src/containers/CourseFilterControls/__snapshots__/CourseFilterControls.test.jsx.snap

@@ -28,7 +28,7 @@ exports[`CourseFilterControls is not mobile snapshot 1`] = `
         >
           <FilterForm
             filters={
-              Array [
+              [
                 "test-filter",
               ]
             }
@@ -84,7 +84,7 @@ exports[`CourseFilterControls mobile snapshot 1`] = `
       >
         <FilterForm
           filters={
-            Array [
+            [
               "test-filter",
             ]
           }
@@ -144,7 +144,7 @@ exports[`CourseFilterControls no courses snapshot 1`] = `
         >
           <FilterForm
             filters={
-              Array [
+              [
                 "test-filter",
               ]
             }

src/containers/CourseFilterControls/components/__snapshots__/FilterForm.test.jsx.snap

@@ -11,7 +11,7 @@ exports[`FilterForm snapshot renders 1`] = `
     name="course-status-filters"
     onChange={[MockFunction handleFilterChange]}
     value={
-      Array [
+      [
         "test-filter",
       ]
     }

src/containers/CoursesPanel/CourseList/index.jsx

@@ -9,9 +9,10 @@ import CourseCard from 'containers/CourseCard';
 
 import { useIsCollapsed } from './hooks';
 
-export const CourseList = ({
-  filterOptions, setPageNumber, numPages, showFilters, visibleList,
-}) => {
+export const CourseList = ({ courseListData }) => {
+  const {
+    filterOptions, setPageNumber, numPages, showFilters, visibleList,
+  } = courseListData;
   const isCollapsed = useIsCollapsed();
   return (
     <>
@@ -38,14 +39,16 @@ export const CourseList = ({
   );
 };
 
-CourseList.propTypes = {
+export const courseListDataShape = PropTypes.shape({
   showFilters: PropTypes.bool.isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  visibleList: PropTypes.arrayOf(PropTypes.object).isRequired,
-  // eslint-disable-next-line react/forbid-prop-types
-  filterOptions: PropTypes.object.isRequired,
+  visibleList: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  filterOptions: PropTypes.shape().isRequired,
   numPages: PropTypes.number.isRequired,
   setPageNumber: PropTypes.func.isRequired,
+});
+
+CourseList.propTypes = {
+  courseListData: courseListDataShape,
 };
 
 export default CourseList;

src/containers/CoursesPanel/CourseList/index.test.jsx

@@ -23,7 +23,7 @@ describe('CourseList', () => {
   useIsCollapsed.mockReturnValue(false);
 
   const createWrapper = (courseListData = defaultCourseListData) => (
-    shallow(<CourseList {...courseListData} />)
+    shallow(<CourseList courseListData={courseListData} />)
   );
 
   describe('no courses or filters', () => {

src/containers/CoursesPanel/NoCoursesView/__snapshots__/index.test.jsx.snap

@@ -9,9 +9,11 @@ exports[`NoCoursesView snapshot 1`] = `
     alt="No Courses view banner"
     src="icon/mock/path"
   />
-  <h1>
+  <h3
+    className="h1"
+  >
     Looking for a new challenge?
-  </h1>
+  </h3>
   <p>
     Explore our courses to add them to your dashboard.
   </p>

src/containers/CoursesPanel/NoCoursesView/index.jsx

@@ -19,9 +19,9 @@ export const NoCoursesView = () => {
       className="d-flex align-items-center justify-content-center mb-4.5"
     >
       <Image src={emptyCourseSVG} alt={formatMessage(messages.bannerAlt)} />
-      <h1>
+      <h3 className="h1">
         {formatMessage(messages.lookingForChallengePrompt)}
-      </h1>
+      </h3>
       <p>
         {formatMessage(messages.exploreCoursesPrompt)}
       </p>

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

@@ -18,11 +18,7 @@ exports[`CoursesPanel no courses snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
-  <PluginSlot
-    id="no_courses_view"
-  >
-    <NoCoursesView />
-  </PluginSlot>
+  <NoCoursesViewSlot />
 </div>
 `;
 
@@ -44,16 +40,16 @@ exports[`CoursesPanel with courses snapshot 1`] = `
       <CourseFilterControls />
     </div>
   </div>
-  <PluginSlot
-    id="course_list"
-  >
-    <CourseList
-      filterOptions={Object {}}
-      numPages={1}
-      setPageNumber={[MockFunction setPageNumber]}
-      showFilters={false}
-      visibleList={Array []}
-    />
-  </PluginSlot>
+  <CourseListSlot
+    courseListData={
+      {
+        "filterOptions": {},
+        "numPages": 1,
+        "setPageNumber": [MockFunction setPageNumber],
+        "showFilters": false,
+        "visibleList": [],
+      }
+    }
+  />
 </div>
 `;

src/containers/CoursesPanel/hooks.js

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import queryString from 'query-string';
-
 import { ListPageSize, SortKeys } from 'data/constants/app';
 import { reduxHooks } from 'hooks';
 import { StrictDict } from 'utils';
@@ -27,12 +25,13 @@ export const useCourseListData = () => {
 
   const [sortBy, setSortBy] = module.state.sortBy(SortKeys.enrolled);
 
-  const querySearch = queryString.parse(window.location.search, { parseNumbers: true });
+  const querySearch = new URLSearchParams(window.location.search);
+  const disablePagination = querySearch.get('disable_pagination');
 
   const { numPages, visibleList } = reduxHooks.useCurrentCourseList({
     sortBy,
     filters,
-    pageSize: querySearch?.disable_pagination === 1 ? 0 : ListPageSize,
+    pageSize: Number(disablePagination) === 1 ? 0 : ListPageSize,
   });
 
   const handleRemoveFilter = (filter) => () => removeFilter(filter);

src/containers/CoursesPanel/hooks.test.js

@@ -1,5 +1,3 @@
-import queryString from 'query-string';
-
 import { MockUseState } from 'testUtils';
 import { reduxHooks } from 'hooks';
 import { ListPageSize, SortKeys } from 'data/constants/app';
@@ -15,8 +13,10 @@ jest.mock('hooks', () => ({
   },
 }));
 
-jest.mock('query-string', () => ({
-  parse: jest.fn(() => ({})),
+const mockGet = jest.fn(() => ({}));
+
+global.URLSearchParams = jest.fn().mockImplementation(() => ({
+  get: mockGet,
 }));
 
 const state = new MockUseState(hooks);
@@ -67,7 +67,7 @@ describe('CourseList hooks', () => {
       it('loads current course list with page size 0 if/when there is query param disable_pagination=1', () => {
         state.mock();
         state.mockVal(state.keys.sortBy, testSortBy);
-        queryString.parse.mockReturnValueOnce({ disable_pagination: 1 });
+        mockGet.mockReturnValueOnce('1');
         out = hooks.useCourseListData();
         expect(reduxHooks.useCurrentCourseList).toHaveBeenCalledWith({
           sortBy: testSortBy,

src/containers/CoursesPanel/index.jsx

@@ -1,15 +1,13 @@
 import React from 'react';
 
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 import {
   CourseFilterControls,
 } from 'containers/CourseFilterControls';
-import NoCoursesView from './NoCoursesView';
-
-import CourseList from './CourseList';
+import CourseListSlot from 'plugin-slots/CourseListSlot';
+import NoCoursesViewSlot from 'plugin-slots/NoCoursesViewSlot';
 
 import { useCourseListData } from './hooks';
 
@@ -34,19 +32,7 @@ export const CoursesPanel = () => {
           <CourseFilterControls {...courseListData.filterOptions} />
         </div>
       </div>
-      {hasCourses ? (
-        <PluginSlot
-          id="course_list"
-        >
-          <CourseList {...courseListData} />
-        </PluginSlot>
-      ) : (
-        <PluginSlot
-          id="no_courses_view"
-        >
-          <NoCoursesView />
-        </PluginSlot>
-      )}
+      {hasCourses ? <CourseListSlot courseListData={courseListData} /> : <NoCoursesViewSlot />}
     </div>
   );
 };

src/containers/Dashboard/DashboardLayout.jsx

@@ -3,7 +3,8 @@ import PropTypes from 'prop-types';
 
 import { Container, Col, Row } from '@openedx/paragon';
 
-import WidgetFooter from 'containers/WidgetContainers/WidgetFooter';
+import WidgetSidebarSlot from 'plugin-slots/WidgetSidebarSlot';
+
 import hooks from './hooks';
 
 export const columnConfig = {
@@ -23,11 +24,10 @@ export const columnConfig = {
   },
 };
 
-export const DashboardLayout = ({ children, sidebar: Sidebar }) => {
+export const DashboardLayout = ({ children }) => {
   const {
     isCollapsed,
     sidebarShowing,
-    setSidebarShowing,
   } = hooks.useDashboardLayoutData();
 
   const courseListColumnProps = sidebarShowing
@@ -40,14 +40,8 @@ export const DashboardLayout = ({ children, sidebar: Sidebar }) => {
         <Col {...courseListColumnProps} className="course-list-column">
           {children}
         </Col>
-        <Col {...columnConfig.sidebar} className="sidebar-column">
-          {!isCollapsed && (<h2 className="course-list-title">&nbsp;</h2>)}
-          <Sidebar setSidebarShowing={setSidebarShowing} />
-        </Col>
-      </Row>
-      <Row>
-        <Col>
-          <WidgetFooter />
+        <Col {...columnConfig.sidebar} className={['sidebar-column', !isCollapsed && 'not-collapsed']}>
+          <WidgetSidebarSlot />
         </Col>
       </Row>
     </Container>
@@ -55,7 +49,6 @@ export const DashboardLayout = ({ children, sidebar: Sidebar }) => {
 };
 DashboardLayout.propTypes = {
   children: PropTypes.node.isRequired,
-  sidebar: PropTypes.func.isRequired,
 };
 
 export default DashboardLayout;

src/containers/Dashboard/DashboardLayout.test.jsx

@@ -16,17 +16,13 @@ const hookProps = {
 };
 hooks.useDashboardLayoutData.mockReturnValue(hookProps);
 
-const props = {
-  sidebar: jest.fn(() => 'test-sidebar-content'),
-};
-
 const children = 'test-children';
 
 let el;
 describe('DashboardLayout', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    el = shallow(<DashboardLayout {...props}>{children}</DashboardLayout>);
+    el = shallow(<DashboardLayout>{children}</DashboardLayout>);
   });
 
   const testColumns = () => {
@@ -40,17 +36,13 @@ describe('DashboardLayout', () => {
       const columns = el.instance.findByType(Row)[0].findByType(Col);
       expect(columns[0].children).not.toHaveLength(0);
     });
-    it('displays sidebar prop in second column', () => {
+    it('displays WidgetSidebarSlot in second column', () => {
       const columns = el.instance.findByType(Row)[0].findByType(Col);
-      expect(columns[1].findByType(props.sidebar)).toHaveLength(1);
-    });
-    it('displays a footer in the second row', () => {
-      const columns = el.instance.findByType(Row)[1].findByType(Col);
-      expect(columns[0].children[0].type).toEqual('WidgetFooter');
+      expect(columns[1].findByType('WidgetSidebarSlot')).toHaveLength(1);
     });
   };
   const testSidebarLayout = () => {
-    it('displays widthSidebar width for course list column', () => {
+    it('displays withSidebar width for course list column', () => {
       const columns = el.instance.findByType(Row)[0].findByType(Col);
       Object.keys(columnConfig.courseList.withSidebar).forEach(size => {
         expect(columns[0].props[size]).toEqual(columnConfig.courseList.withSidebar[size]);
@@ -92,10 +84,9 @@ describe('DashboardLayout', () => {
 
   describe('not collapsed', () => {
     const testWidgetSpacing = () => {
-      it('shows a blank (nbsp) h2 spacer component above widget sidebar', () => {
+      it('shows not-collapsed class on widget sidebar', () => {
         const columns = el.instance.findByType(Col);
-        // nonbreaking space equivalent
-        expect(columns[1].findByType('h2')[0].children[0].el).toEqual('\xA0');
+        expect(columns[1].props.className).toContain('not-collapsed');
       });
     };
     describe('sidebar showing', () => {

src/containers/Dashboard/__snapshots__/DashboardLayout.test.jsx.snap

@@ -9,13 +9,13 @@ exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = `
     <Col
       className="course-list-column"
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
@@ -24,28 +24,26 @@ exports[`DashboardLayout collapsed sidebar not showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          false,
+        ]
+      }
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 4,
         }
       }
     >
-      <mockConstructor
-        setSidebarShowing={[MockFunction hooks.setSidebarShowing]}
-      />
-    </Col>
-  </Row>
-  <Row>
-    <Col>
-      <WidgetFooter />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>
@@ -60,13 +58,13 @@ exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = `
     <Col
       className="course-list-column"
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 8,
         }
@@ -75,28 +73,26 @@ exports[`DashboardLayout collapsed sidebar showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          false,
+        ]
+      }
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 4,
         }
       }
     >
-      <mockConstructor
-        setSidebarShowing={[MockFunction hooks.setSidebarShowing]}
-      />
-    </Col>
-  </Row>
-  <Row>
-    <Col>
-      <WidgetFooter />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>
@@ -111,13 +107,13 @@ exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
     <Col
       className="course-list-column"
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
@@ -126,33 +122,26 @@ exports[`DashboardLayout not collapsed sidebar not showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          "not-collapsed",
+        ]
+      }
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 4,
         }
       }
     >
-      <h2
-        className="course-list-title"
-      >
-         
-      </h2>
-      <mockConstructor
-        setSidebarShowing={[MockFunction hooks.setSidebarShowing]}
-      />
-    </Col>
-  </Row>
-  <Row>
-    <Col>
-      <WidgetFooter />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>
@@ -167,13 +156,13 @@ exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
     <Col
       className="course-list-column"
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 8,
         }
@@ -182,33 +171,26 @@ exports[`DashboardLayout not collapsed sidebar showing snapshot 1`] = `
       test-children
     </Col>
     <Col
-      className="sidebar-column"
+      className={
+        [
+          "sidebar-column",
+          "not-collapsed",
+        ]
+      }
       lg={
-        Object {
+        {
           "offset": 0,
           "span": 12,
         }
       }
       xl={
-        Object {
+        {
           "offset": 0,
           "span": 4,
         }
       }
     >
-      <h2
-        className="course-list-title"
-      >
-         
-      </h2>
-      <mockConstructor
-        setSidebarShowing={[MockFunction hooks.setSidebarShowing]}
-      />
-    </Col>
-  </Row>
-  <Row>
-    <Col>
-      <WidgetFooter />
+      <WidgetSidebarSlot />
     </Col>
   </Row>
 </Container>

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Dashboard snapshots courses loaded, show select session modal, no available dashboards snapshot 1`] = `
+exports[`Dashboard snapshots courses loaded, show select session modal snapshot 1`] = `
 <div
   className="d-flex flex-column p-2 pt-0"
   id="dashboard-container"
@@ -11,15 +11,14 @@ exports[`Dashboard snapshots courses loaded, show select session modal, no avail
     test-page-title
   </h1>
   <Fragment>
+    <DashboardModalSlot />
     <SelectSessionModal />
   </Fragment>
   <div
     data-testid="dashboard-content"
     id="dashboard-content"
   >
-    <DashboardLayout
-      sidebar="LoadedWidgetSidebar"
-    >
+    <DashboardLayout>
       <CoursesPanel />
     </DashboardLayout>
   </div>
@@ -45,7 +44,7 @@ exports[`Dashboard snapshots courses still loading snapshot 1`] = `
 </div>
 `;
 
-exports[`Dashboard snapshots there are no courses, there ARE available dashboards snapshot 1`] = `
+exports[`Dashboard snapshots there are no courses snapshot 1`] = `
 <div
   className="d-flex flex-column p-2 pt-0"
   id="dashboard-container"
@@ -56,15 +55,13 @@ exports[`Dashboard snapshots there are no courses, there ARE available dashboard
     test-page-title
   </h1>
   <Fragment>
-    <EnterpriseDashboardModal />
+    <DashboardModalSlot />
   </Fragment>
   <div
     data-testid="dashboard-content"
     id="dashboard-content"
   >
-    <DashboardLayout
-      sidebar="NoCoursesWidgetSidebar"
-    >
+    <DashboardLayout>
       <CoursesPanel />
     </DashboardLayout>
   </div>

src/containers/Dashboard/hooks.js

@@ -26,7 +26,8 @@ export const useDashboardMessages = () => {
 
 export const useDashboardLayoutData = () => {
   const { width } = useWindowSize();
-  const [sidebarShowing, setSidebarShowing] = module.state.sidebarShowing(false);
+
+  const [sidebarShowing, setSidebarShowing] = module.state.sidebarShowing(true);
   return {
     isDashboardCollapsed: width < breakpoints.large.maxWidth,
     sidebarShowing,

src/containers/Dashboard/hooks.test.js

@@ -40,9 +40,9 @@ describe('CourseCard hooks', () => {
   describe('useDashboardLayoutData', () => {
     beforeEach(() => { state.mock(); });
     describe('behavior', () => {
-      it('initializes sidebarShowing to default false value', () => {
+      it('initializes sidebarShowing to default true value', () => {
         hooks.useDashboardLayoutData();
-        state.expectInitializedWith(state.keys.sidebarShowing, false);
+        state.expectInitializedWith(state.keys.sidebarShowing, true);
       });
     });
     describe('output', () => {

src/containers/Dashboard/index.jsx

@@ -2,12 +2,9 @@ import React from 'react';
 
 import { reduxHooks } from 'hooks';
 import { RequestKeys } from 'data/constants/requests';
-import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CoursesPanel from 'containers/CoursesPanel';
-
-import LoadedSidebar from 'containers/WidgetContainers/LoadedSidebar';
-import NoCoursesSidebar from 'containers/WidgetContainers/NoCoursesSidebar';
+import DashboardModalSlot from 'plugin-slots/DashboardModalSlot';
 
 import LoadingView from './LoadingView';
 import DashboardLayout from './DashboardLayout';
@@ -18,7 +15,6 @@ export const Dashboard = () => {
   hooks.useInitializeDashboard();
   const { pageTitle } = hooks.useDashboardMessages();
   const hasCourses = reduxHooks.useHasCourses();
-  const hasAvailableDashboards = reduxHooks.useHasAvailableDashboards();
   const initIsPending = reduxHooks.useRequestIsPending(RequestKeys.initialize);
   const showSelectSessionModal = reduxHooks.useShowSelectSessionModal();
 
@@ -27,7 +23,7 @@ export const Dashboard = () => {
       <h1 className="sr-only">{pageTitle}</h1>
       {!initIsPending && (
         <>
-          {hasAvailableDashboards && <EnterpriseDashboardModal />}
+          <DashboardModalSlot />
           {(hasCourses && showSelectSessionModal) && <SelectSessionModal />}
         </>
       )}
@@ -35,7 +31,7 @@ export const Dashboard = () => {
         {initIsPending
           ? (<LoadingView />)
           : (
-            <DashboardLayout sidebar={hasCourses ? LoadedSidebar : NoCoursesSidebar}>
+            <DashboardLayout>
               <CoursesPanel />
             </DashboardLayout>
           )}

src/containers/Dashboard/index.scss

@@ -6,6 +6,14 @@
 
 .sidebar-column {
   padding: 0 map-get($spacers, 3) 0 map-get($spacers, 1);
+
+  &.not-collapsed {
+    padding-top: map-get($spacers, 2);
+
+    & >:first-child {
+      margin-top: map-get($spacers, 5\.5);
+    }
+  }
 }
 
 @include media-breakpoint-down(lg) {

src/containers/Dashboard/index.test.jsx

@@ -2,13 +2,9 @@ import { shallow } from '@edx/react-unit-test-utils';
 
 import { reduxHooks } from 'hooks';
 
-import EnterpriseDashboardModal from 'containers/EnterpriseDashboardModal';
 import SelectSessionModal from 'containers/SelectSessionModal';
 import CoursesPanel from 'containers/CoursesPanel';
 
-import LoadedWidgetSidebar from 'containers/WidgetContainers/LoadedSidebar';
-import NoCoursesWidgetSidebar from 'containers/WidgetContainers/NoCoursesSidebar';
-
 import DashboardLayout from './DashboardLayout';
 import LoadingView from './LoadingView';
 import hooks from './hooks';
@@ -17,16 +13,13 @@ import Dashboard from '.';
 jest.mock('hooks', () => ({
   reduxHooks: {
     useHasCourses: jest.fn(),
-    useHasAvailableDashboards: jest.fn(),
     useShowSelectSessionModal: jest.fn(),
     useRequestIsPending: jest.fn(),
   },
 }));
 
-jest.mock('containers/EnterpriseDashboardModal', () => 'EnterpriseDashboardModal');
+jest.mock('plugin-slots/DashboardModalSlot', () => 'DashboardModalSlot');
 jest.mock('containers/CoursesPanel', () => 'CoursesPanel');
-jest.mock('containers/WidgetContainers/LoadedSidebar', () => 'LoadedWidgetSidebar');
-jest.mock('containers/WidgetContainers/NoCoursesSidebar', () => 'NoCoursesWidgetSidebar');
 jest.mock('./LoadingView', () => 'LoadingView');
 jest.mock('./DashboardLayout', () => 'DashboardLayout');
 
@@ -43,12 +36,10 @@ describe('Dashboard', () => {
   });
   const createWrapper = ({
     hasCourses,
-    hasAvailableDashboards,
     initIsPending,
     showSelectSessionModal,
   }) => {
     reduxHooks.useHasCourses.mockReturnValueOnce(hasCourses);
-    reduxHooks.useHasAvailableDashboards.mockReturnValueOnce(hasAvailableDashboards);
     reduxHooks.useRequestIsPending.mockReturnValueOnce(initIsPending);
     reduxHooks.useShowSelectSessionModal.mockReturnValueOnce(showSelectSessionModal);
     return shallow(<Dashboard />);
@@ -76,7 +67,6 @@ describe('Dashboard', () => {
     const testView = ({
       props,
       content: [contentName, contentEl],
-      showEnterpriseModal,
       showSelectSessionModal,
     }) => {
       beforeEach(() => { wrapper = createWrapper(props); });
@@ -85,10 +75,6 @@ describe('Dashboard', () => {
       it(`renders ${contentName}`, () => {
         testContent(contentEl);
       });
-      it(`${renderString(showEnterpriseModal)} dashbaord modal`, () => {
-        expect(wrapper.instance.findByType(EnterpriseDashboardModal).length)
-          .toEqual(showEnterpriseModal ? 1 : 0);
-      });
       it(`${renderString(showSelectSessionModal)} select session modal`, () => {
         expect(wrapper.instance.findByType(SelectSessionModal).length).toEqual(showSelectSessionModal ? 1 : 0);
       });
@@ -97,44 +83,38 @@ describe('Dashboard', () => {
       testView({
         props: {
           hasCourses: false,
-          hasAvailableDashboards: false,
           initIsPending: true,
           showSelectSessionModal: false,
         },
         content: ['LoadingView', <LoadingView />],
-        showEnterpriseModal: false,
         showSelectSessionModal: false,
       });
     });
 
-    describe('courses loaded, show select session modal, no available dashboards', () => {
+    describe('courses loaded, show select session modal', () => {
       testView({
         props: {
           hasCourses: true,
-          hasAvailableDashboards: false,
           initIsPending: false,
           showSelectSessionModal: true,
         },
         content: ['LoadedView', (
-          <DashboardLayout sidebar={LoadedWidgetSidebar}><CoursesPanel /></DashboardLayout>
+          <DashboardLayout><CoursesPanel /></DashboardLayout>
         )],
-        showEnterpriseModal: false,
         showSelectSessionModal: true,
       });
     });
 
-    describe('there are no courses, there ARE available dashboards', () => {
+    describe('there are no courses', () => {
       testView({
         props: {
           hasCourses: false,
-          hasAvailableDashboards: true,
           initIsPending: false,
           showSelectSessionModal: false,
         },
         content: ['Dashboard layout with no courses sidebar and content', (
-          <DashboardLayout sidebar={NoCoursesWidgetSidebar}><CoursesPanel /></DashboardLayout>
+          <DashboardLayout><CoursesPanel /></DashboardLayout>
         )],
-        showEnterpriseModal: true,
         showSelectSessionModal: false,
       });
     });

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

@@ -10,7 +10,7 @@ exports[`EmailSettingsModal render snapshot: emails disabled, show: false 1`] =
   <div
     className="bg-white p-3 rounded shadow"
     style={
-      Object {
+      {
         "textAlign": "start",
       }
     }
@@ -54,7 +54,7 @@ exports[`EmailSettingsModal render snapshot: emails disabled, show: true 1`] = `
   <div
     className="bg-white p-3 rounded shadow"
     style={
-      Object {
+      {
         "textAlign": "start",
       }
     }
@@ -98,7 +98,7 @@ exports[`EmailSettingsModal render snapshot: emails enabled, show: true 1`] = `
   <div
     className="bg-white p-3 rounded shadow"
     style={
-      Object {
+      {
         "textAlign": "start",
       }
     }

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

@@ -1,42 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EnterpriseDashboard empty snapshot 1`] = `null`;
-
-exports[`EnterpriseDashboard snapshot 1`] = `
-<ModalDialog
-  hasCloseButton={false}
-  onClose={[MockFunction useEnterpriseDashboardHook.handleEscape]}
-  title=""
->
-  <div
-    className="bg-white p-3 rounded shadow"
-    style={
-      Object {
-        "textAlign": "start",
-      }
-    }
-  >
-    <h4>
-      You have access to the edX, Inc. dashboard
-    </h4>
-    <p>
-      To access the courses available to you through edX, Inc., visit the edX, Inc. dashboard now.
-    </p>
-    <ActionRow>
-      <Button
-        onClick={[MockFunction useEnterpriseDashboardHook.handleClose]}
-        variant="tertiary"
-      >
-        Dismiss
-      </Button>
-      <Button
-        href="/edx-dashboard"
-        onClick={[MockFunction useEnterpriseDashboardHook.handleCTAClick]}
-        type="a"
-      >
-        Go to dashboard
-      </Button>
-    </ActionRow>
-  </div>
-</ModalDialog>
-`;

src/containers/EnterpriseDashboardModal/hooks.js

@@ -1,48 +0,0 @@
-import React from 'react';
-
-import { StrictDict } from 'utils';
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  showModal: (val) => React.useState(val), // eslint-disable-line
-});
-
-const { modalOpened, modalClosed, modalCTAClicked } = track.enterpriseDashboard;
-
-export const useEnterpriseDashboardHook = () => {
-  const [showModal, setShowModal] = module.state.showModal(true);
-  const dashboard = reduxHooks.useEnterpriseDashboardData();
-
-  const trackOpened = modalOpened(dashboard.enterpriseUUID);
-  const trackClose = modalClosed(dashboard.enterpriseUUID, 'Cancel button');
-  const trackEscape = modalClosed(dashboard.enterpriseUUID, 'Escape');
-
-  const handleCTAClick = modalCTAClicked(dashboard.enterpriseUUID, dashboard.url);
-  const handleClose = () => {
-    trackClose();
-    setShowModal(false);
-  };
-  const handleEscape = () => {
-    trackEscape();
-    setShowModal(false);
-  };
-
-  React.useEffect(() => {
-    if (dashboard && dashboard.label) {
-      trackOpened();
-    }
-  }, []); // eslint-disable-line
-
-  return {
-    showModal,
-    handleCTAClick,
-    handleClose,
-    handleEscape,
-    dashboard,
-  };
-};
-
-export default useEnterpriseDashboardHook;

src/containers/EnterpriseDashboardModal/hooks.test.js

@@ -1,75 +0,0 @@
-import { MockUseState } from 'testUtils';
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
-
-import * as hooks from './hooks';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useEnterpriseDashboardData: jest.fn(),
-  },
-}));
-jest.mock('tracking', () => {
-  const modalOpenedEvent = jest.fn();
-  const modalClosedEvent = jest.fn();
-  const modalCTAClickedEvent = jest.fn();
-  return {
-    __esModule: true,
-    default: {
-      enterpriseDashboard: {
-        modalOpenedEvent,
-        modalClosedEvent,
-        modalCTAClickedEvent,
-        modalOpened: jest.fn(() => modalOpenedEvent),
-        modalClosed: jest.fn(() => modalClosedEvent),
-        modalCTAClicked: jest.fn(() => modalCTAClickedEvent),
-      },
-    },
-  };
-});
-
-const state = new MockUseState(hooks);
-
-const enterpriseDashboardData = { label: 'edX, Inc.', url: '/edx-dashboard' };
-
-describe('EnterpriseDashboard hooks', () => {
-  reduxHooks.useEnterpriseDashboardData.mockReturnValue({ ...enterpriseDashboardData });
-
-  describe('state values', () => {
-    state.testGetter(state.keys.showModal);
-  });
-
-  describe('behavior', () => {
-    let out;
-
-    beforeEach(() => {
-      state.mock();
-      out = hooks.useEnterpriseDashboardHook();
-    });
-    afterEach(state.restore);
-
-    test('useEnterpriseDashboardHook to return dashboard data from redux hooks', () => {
-      expect(out.dashboard).toMatchObject(enterpriseDashboardData);
-    });
-
-    test('modal initializes to shown when rendered and closes on click', () => {
-      state.expectInitializedWith(state.keys.showModal, true);
-      out.handleClose();
-      expect(state.values.showModal).toEqual(false);
-    });
-
-    test('modal initializes to shown when rendered and closes on escape', () => {
-      state.expectInitializedWith(state.keys.showModal, true);
-      out.handleEscape();
-      expect(state.values.showModal).toEqual(false);
-    });
-
-    test('CTA click tracks modalCTAClicked', () => {
-      out.handleCTAClick();
-      expect(track.enterpriseDashboard.modalCTAClicked).toHaveBeenCalledWith(
-        enterpriseDashboardData.enterpriseUUID,
-        enterpriseDashboardData.url,
-      );
-    });
-  });
-});

src/containers/EnterpriseDashboardModal/index.jsx

@@ -1,60 +0,0 @@
-import React from 'react';
-// import PropTypes from 'prop-types';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-import {
-  ModalDialog, ActionRow, Button,
-} from '@openedx/paragon';
-
-import messages from './messages';
-import useEnterpriseDashboardHook from './hooks';
-
-export const EnterpriseDashboardModal = () => {
-  const { formatMessage } = useIntl();
-  const {
-    showModal,
-    handleClose,
-    handleCTAClick,
-    handleEscape,
-    dashboard,
-  } = useEnterpriseDashboardHook();
-  if (!dashboard || !dashboard.label) {
-    return null;
-  }
-  return (
-    <ModalDialog
-      isOpen={showModal}
-      onClose={handleEscape}
-      hasCloseButton={false}
-      title=""
-    >
-      <div
-        className="bg-white p-3 rounded shadow"
-        style={{ textAlign: 'start' }}
-      >
-        <h4>
-          {formatMessage(messages.enterpriseDialogHeader, {
-            label: dashboard.label,
-          })}
-        </h4>
-        <p>
-          {formatMessage(messages.enterpriseDialogBody, {
-            label: dashboard.label,
-          })}
-        </p>
-        <ActionRow>
-          <Button variant="tertiary" onClick={handleClose}>
-            {formatMessage(messages.enterpriseDialogDismissButton)}
-          </Button>
-          <Button type="a" href={dashboard.url} onClick={handleCTAClick}>
-            {formatMessage(messages.enterpriseDialogConfirmButton)}
-          </Button>
-        </ActionRow>
-      </div>
-    </ModalDialog>
-  );
-};
-
-EnterpriseDashboardModal.propTypes = {};
-
-export default EnterpriseDashboardModal;

src/containers/EnterpriseDashboardModal/index.test.jsx

@@ -1,29 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-import EnterpriseDashboard from '.';
-
-import useEnterpriseDashboardHook from './hooks';
-
-jest.mock('./hooks', () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
-
-describe('EnterpriseDashboard', () => {
-  test('snapshot', () => {
-    const hookData = {
-      dashboard: { label: 'edX, Inc.', url: '/edx-dashboard' },
-      showDialog: false,
-      handleClose: jest.fn().mockName('useEnterpriseDashboardHook.handleClose'),
-      handleCTAClick: jest.fn().mockName('useEnterpriseDashboardHook.handleCTAClick'),
-      handleEscape: jest.fn().mockName('useEnterpriseDashboardHook.handleEscape'),
-    };
-    useEnterpriseDashboardHook.mockReturnValueOnce({ ...hookData });
-    const el = shallow(<EnterpriseDashboard />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-  test('empty snapshot', () => {
-    useEnterpriseDashboardHook.mockReturnValueOnce({});
-    const el = shallow(<EnterpriseDashboard />);
-    expect(el.snapshot).toMatchSnapshot();
-  });
-});

src/containers/EnterpriseDashboardModal/messages.js

@@ -1,26 +0,0 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
-
-const messages = defineMessages({
-  enterpriseDialogHeader: {
-    id: 'leanerDashboard.enterpriseDialogHeader',
-    defaultMessage: 'You have access to the {label} dashboard',
-    description: 'title for enterpise dashboard dialog',
-  },
-  enterpriseDialogBody: {
-    id: 'leanerDashboard.enterpriseDialogBody',
-    defaultMessage: 'To access the courses available to you through {label}, visit the {label} dashboard now.',
-    description: 'Body text for enterpise dashboard dialog',
-  },
-  enterpriseDialogDismissButton: {
-    id: 'leanerDashboard.enterpriseDialogDismissButton',
-    defaultMessage: 'Dismiss',
-    description: 'Dismiss button to cancel visiting dashboard',
-  },
-  enterpriseDialogConfirmButton: {
-    id: 'leanerDashboard.enterpriseDialogConfirmButton',
-    defaultMessage: 'Go to dashboard',
-    description: 'Confirm button to go to the dashboard url',
-  },
-});
-
-export default messages;

src/containers/LearnerDashboardHeader/BrandLogo.jsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-
-import { reduxHooks } from 'hooks';
-
-import { getConfig } from '@edx/frontend-platform';
-import messages from './messages';
-
-export const BrandLogo = () => {
-  const { formatMessage } = useIntl();
-  const dashboard = reduxHooks.useEnterpriseDashboardData();
-
-  return (
-    <a href={dashboard?.url || '/'} className="mx-auto">
-      <img
-        className="logo py-3"
-        src={getConfig().LOGO_URL}
-        alt={formatMessage(messages.logoAltText)}
-      />
-    </a>
-  );
-};
-
-BrandLogo.propTypes = {};
-
-export default BrandLogo;

src/containers/LearnerDashboardHeader/BrandLogo.test.jsx

@@ -1,28 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import BrandLogo from './BrandLogo';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useEnterpriseDashboardData: jest.fn(),
-  },
-}));
-
-describe('BrandLogo', () => {
-  test('dashboard defined', () => {
-    reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce({
-      url: 'url',
-    });
-    const wrapper = shallow(<BrandLogo />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('a')[0].props.href).toEqual('url');
-  });
-
-  test('dashboard undefined', () => {
-    reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null);
-    const wrapper = shallow(<BrandLogo />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.instance.findByType('a')[0].props.href).toEqual('/');
-  });
-});

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -1,104 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { getConfig } from '@edx/frontend-platform';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { AppContext } from '@edx/frontend-platform/react';
-import { Button, Badge } from '@openedx/paragon';
-
-import urls from 'data/services/lms/urls';
-import { reduxHooks } from 'hooks';
-
-import { findCoursesNavDropdownClicked } from '../hooks';
-import messages from '../messages';
-
-export const CollapseMenuBody = ({ isOpen }) => {
-  const { formatMessage } = useIntl();
-  const { authenticatedUser } = React.useContext(AppContext);
-
-  const dashboard = reduxHooks.useEnterpriseDashboardData();
-  const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
-
-  const exploreCoursesClick = findCoursesNavDropdownClicked(
-    urls.baseAppUrl(courseSearchUrl),
-  );
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return (
-    <div className="d-flex flex-column shadow-sm nav-small-menu">
-      <Button as="a" href="/" variant="inverse-primary">
-        {formatMessage(messages.course)}
-      </Button>
-      <Button as="a" href={urls.programsUrl()} variant="inverse-primary">
-        {formatMessage(messages.program)}
-      </Button>
-      <Button
-        as="a"
-        href={urls.baseAppUrl(courseSearchUrl)}
-        variant="inverse-primary"
-        onClick={exploreCoursesClick}
-      >
-        {formatMessage(messages.discoverNew)}
-      </Button>
-      <Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
-        {formatMessage(messages.help)}
-      </Button>
-      {authenticatedUser && (
-        <>
-          {!!dashboard && (
-            <Button as="a" href={dashboard.url} variant="inverse-primary">
-              {formatMessage(messages.dashboard)}
-            </Button>
-          )}
-          {!dashboard && getConfig().CAREER_LINK_URL && (
-            <Button href={`${getConfig().CAREER_LINK_URL}`}>
-              {formatMessage(messages.career)}
-              <Badge className="px-2 mx-2" variant="warning">
-                {formatMessage(messages.newAlert)}
-              </Badge>
-            </Button>
-          )}
-          <Button
-            as="a"
-            href={`${getConfig().LMS_BASE_URL}/u/${authenticatedUser.username}`}
-            variant="inverse-primary"
-          >
-            {formatMessage(messages.profile)}
-          </Button>
-          <Button
-            as="a"
-            href={`${getConfig().LMS_BASE_URL}/account/settings`}
-            variant="inverse-primary"
-          >
-            {formatMessage(messages.account)}
-          </Button>
-          {getConfig().ORDER_HISTORY_URL && (
-            <Button
-              as="a"
-              variant="inverse-primary"
-              href={getConfig().ORDER_HISTORY_URL}
-            >
-              {formatMessage(messages.orderHistory)}
-            </Button>
-          )}
-          <Button
-            as="a"
-            href={getConfig().LOGOUT_URL}
-            variant="inverse-primary"
-          >
-            {formatMessage(messages.signOut)}
-          </Button>
-        </>
-      )}
-    </div>
-  );
-};
-
-CollapseMenuBody.propTypes = {
-  isOpen: PropTypes.bool.isRequired,
-};
-
-export default CollapseMenuBody;

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx

@@ -1,48 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-import { AppContext } from '@edx/frontend-platform/react';
-
-import CollapseMenuBody from './CollapseMenuBody';
-
-jest.mock('@edx/frontend-platform/react', () => ({
-  AppContext: {
-    authenticatedUser: {
-      username: 'username',
-    },
-  },
-}));
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useEnterpriseDashboardData: () => ({
-      url: 'url',
-    }),
-    usePlatformSettingsData: () => ({
-      courseSearchUrl: '/courseSearchUrl',
-    }),
-  },
-}));
-
-jest.mock('../hooks', () => ({
-  findCoursesNavDropdownClicked: (url) => jest.fn().mockName(`findCoursesNavDropdownClicked("${url}")`),
-}));
-
-describe('CollapseMenuBody', () => {
-  test('render', () => {
-    const wrapper = shallow(<CollapseMenuBody isOpen />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-  });
-
-  test('render empty if not open', () => {
-    const wrapper = shallow(<CollapseMenuBody isOpen={false} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    expect(wrapper.isEmptyRender()).toBe(true);
-  });
-
-  test('render unauthenticated', () => {
-    const { authenticatedUser } = AppContext;
-    AppContext.authenticatedUser = null;
-    const wrapper = shallow(<CollapseMenuBody isOpen />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-    AppContext.authenticatedUser = authenticatedUser;
-  });
-});

src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/CollapseMenuBody.test.jsx.snap

@@ -1,105 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CollapseMenuBody render 1`] = `
-<div
-  className="d-flex flex-column shadow-sm nav-small-menu"
->
-  <Button
-    as="a"
-    href="/"
-    variant="inverse-primary"
-  >
-    Courses
-  </Button>
-  <Button
-    as="a"
-    href="http://localhost:18000/dashboard/programs"
-    variant="inverse-primary"
-  >
-    Programs
-  </Button>
-  <Button
-    as="a"
-    href="http://localhost:18000/courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
-    variant="inverse-primary"
-  >
-    Discover New
-  </Button>
-  <Button
-    as="a"
-    href="http://localhost:18000/support"
-    variant="inverse-primary"
-  >
-    Help
-  </Button>
-  <Fragment>
-    <Button
-      as="a"
-      href="url"
-      variant="inverse-primary"
-    >
-      Dashboard
-    </Button>
-    <Button
-      as="a"
-      href="http://localhost:18000/u/username"
-      variant="inverse-primary"
-    >
-      Profile
-    </Button>
-    <Button
-      as="a"
-      href="http://localhost:18000/account/settings"
-      variant="inverse-primary"
-    >
-      Account
-    </Button>
-    <Button
-      as="a"
-      href="http://localhost:18000/logout"
-      variant="inverse-primary"
-    >
-      Sign Out
-    </Button>
-  </Fragment>
-</div>
-`;
-
-exports[`CollapseMenuBody render empty if not open 1`] = `null`;
-
-exports[`CollapseMenuBody render unauthenticated 1`] = `
-<div
-  className="d-flex flex-column shadow-sm nav-small-menu"
->
-  <Button
-    as="a"
-    href="/"
-    variant="inverse-primary"
-  >
-    Courses
-  </Button>
-  <Button
-    as="a"
-    href="http://localhost:18000/dashboard/programs"
-    variant="inverse-primary"
-  >
-    Programs
-  </Button>
-  <Button
-    as="a"
-    href="http://localhost:18000/courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
-    variant="inverse-primary"
-  >
-    Discover New
-  </Button>
-  <Button
-    as="a"
-    href="http://localhost:18000/support"
-    variant="inverse-primary"
-  >
-    Help
-  </Button>
-</div>
-`;

src/containers/LearnerDashboardHeader/CollapsedHeader/__snapshots__/index.test.jsx.snap

@@ -1,48 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CollapsedHeader render nothing if not collapsed 1`] = `false`;
-
-exports[`CollapsedHeader renders 1`] = `
-<Fragment>
-  <header
-    className="d-flex shadow-sm align-items-center learner-variant-header"
-  >
-    <IconButton
-      alt="Close"
-      className="p-4"
-      iconAs="Icon"
-      invertColors={true}
-      isActive={true}
-      onClick={[MockFunction toggleIsOpen]}
-      variant="primary"
-    />
-    <mockConstructor />
-  </header>
-  <mockConstructor
-    isOpen={false}
-  />
-</Fragment>
-`;
-
-exports[`CollapsedHeader renders with isOpen true 1`] = `
-<Fragment>
-  <header
-    className="d-flex shadow-sm align-items-center learner-variant-header"
-  >
-    <IconButton
-      alt="Menu"
-      className="p-4"
-      iconAs="Icon"
-      invertColors={true}
-      isActive={true}
-      onClick={[MockFunction toggleIsOpen]}
-      src={[MockFunction icons.Close]}
-      variant="primary"
-    />
-    <mockConstructor />
-  </header>
-  <mockConstructor
-    isOpen={true}
-  />
-</Fragment>
-`;

src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { useIntl } from '@edx/frontend-platform/i18n';
-import { MenuIcon, Close } from '@openedx/paragon/icons';
-import { IconButton, Icon } from '@openedx/paragon';
-
-import { useLearnerDashboardHeaderData, useIsCollapsed } from '../hooks';
-
-import CollapseMenuBody from './CollapseMenuBody';
-import BrandLogo from '../BrandLogo';
-
-import messages from '../messages';
-
-export const CollapsedHeader = () => {
-  const { formatMessage } = useIntl();
-  const isCollapsed = useIsCollapsed();
-  const { isOpen, toggleIsOpen } = useLearnerDashboardHeaderData();
-
-  return (
-    isCollapsed && (
-      <>
-        <header className="d-flex shadow-sm align-items-center learner-variant-header">
-          <IconButton
-            invertColors
-            isActive
-            src={isOpen ? Close : MenuIcon}
-            iconAs={Icon}
-            alt={
-              isOpen
-                ? formatMessage(messages.collapseMenuOpenAltText)
-                : formatMessage(messages.collapseMenuClosedAltText)
-            }
-            onClick={toggleIsOpen}
-            variant="primary"
-            className="p-4"
-          />
-          <BrandLogo />
-        </header>
-        <CollapseMenuBody isOpen={isOpen} />
-      </>
-    )
-  );
-};
-
-CollapsedHeader.propTypes = {};
-
-export default CollapsedHeader;

src/containers/LearnerDashboardHeader/CollapsedHeader/index.test.jsx

@@ -1,38 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import CollapsedHeader from '.';
-
-import { useLearnerDashboardHeaderData, useIsCollapsed } from '../hooks';
-
-jest.mock('../BrandLogo', () => jest.fn(() => 'BrandLogo'));
-jest.mock('./CollapseMenuBody', () => jest.fn(() => 'CollapseMenuBody'));
-
-jest.mock('../hooks', () => ({
-  useIsCollapsed: jest.fn(() => true),
-  useLearnerDashboardHeaderData: jest.fn(() => ({
-    isOpen: false,
-    toggleIsOpen: jest.fn().mockName('toggleIsOpen'),
-  })),
-}));
-
-describe('CollapsedHeader', () => {
-  it('renders', () => {
-    const wrapper = shallow(<CollapsedHeader />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-  });
-
-  it('render nothing if not collapsed', () => {
-    useIsCollapsed.mockReturnValueOnce(false);
-    const wrapper = shallow(<CollapsedHeader />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-  });
-
-  it('renders with isOpen true', () => {
-    useLearnerDashboardHeaderData.mockReturnValueOnce({
-      isOpen: true,
-      toggleIsOpen: jest.fn().mockName('toggleIsOpen'),
-    });
-    const wrapper = shallow(<CollapsedHeader />);
-    expect(wrapper.snapshot).toMatchSnapshot();
-  });
-});

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap

@@ -9,14 +9,14 @@ exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = `
   >
     <format-message-function
       message={
-        Object {
-          "defaultMessage": "Remember to confirm your email so that you can keep learning on edX! {confirmNowButton}.",
+        {
+          "defaultMessage": "Remember to confirm your email so that you can keep learning! {confirmNowButton}.",
           "description": "Text for reminding user to confirm email",
           "id": "leanerDashboard.confirmEmailTextReminderBanner",
         }
       }
       values={
-        Object {
+        {
           "confirmNowButton": <Button
             className="confirm-email-now-button"
             onClick={[MockFunction openConfirmModalButtonClick]}
@@ -55,11 +55,11 @@ exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = `
     onClose={[MockFunction closeConfirmModal]}
     title=""
   >
-    <h1
-      className="text-center p-3"
+    <h2
+      className="text-center p-3 h1"
     >
       Confirm your email
-    </h1>
+    </h2>
     <p
       className="text-center"
     >

src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.jsx

@@ -64,7 +64,7 @@ export const ConfirmEmailBanner = () => {
           </Button>
         )}
       >
-        <h1 className="text-center p-3">{formatMessage(messages.confirmEmailModalHeader)}</h1>
+        <h2 className="text-center p-3 h1">{formatMessage(messages.confirmEmailModalHeader)}</h2>
         <p className="text-center">{formatMessage(messages.confirmEmailModalBody)}</p>
       </MarketingModal>
     </>