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

Description:
Modal window should not closed when click outside the modal
VAN-1615

.env

@@ -41,5 +41,3 @@ ACCOUNT_PROFILE_URL=''
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
-EXPERIMENT_08_23_VAN_PAINTED_DOOR=true
-ENABLE_EDX_PERSONAL_DASHBOARD=false

.env.development

@@ -48,4 +48,3 @@ ACCOUNT_PROFILE_URL='http://localhost:1995'
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
-ENABLE_EDX_PERSONAL_DASHBOARD=false

.env.test

@@ -47,5 +47,3 @@ ACCOUNT_PROFILE_URL='http://account-profile-url.test'
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 OPTIMIZELY_FULL_STACK_SDK_KEY='SDK Key'
-EXPERIMENT_08_23_VAN_PAINTED_DOOR=true
-ENABLE_EDX_PERSONAL_DASHBOARD=true

Makefile

@@ -10,7 +10,7 @@ i18n = ./src/i18n
 transifex_input = $(i18n)/transifex_input.json
 
 # This directory must match .babelrc .
-transifex_temp = ./temp/babel-plugin-formatjs
+transifex_temp = ./temp/babel-plugin-react-intl
 
 NPM_TESTS=build i18n_extract lint test
 

README.md

@@ -21,45 +21,6 @@ Some guidelines for writing widgets:
 * You can load data from the redux store, but should not add or modify fields in that structure.
 * Network events should be managed in component hooks, though can use our `data/constants/requests:requestStates` for ease of tracking the request states.
 
- ## License
-
-The code in this repository is licensed under the AGPLv3 unless otherwise
-noted.
-
-Please see `LICENSE <LICENSE>`_ for details.
-
-## Getting Help
-
-If you're having trouble, we have discussion forums at
-https://discuss.openedx.org where you can connect with others in the community.
-
-Our real-time conversations are on Slack. You can request a `Slack
-invitation`_, then join our `community Slack workspace`_.  Because this is a
-frontend repository, the best place to discuss it would be in the `#wg-frontend
-channel`_.
-
-For anything non-trivial, the best path is to open an issue in this repository
-with as many details about the issue you are facing as you can provide.
-
-https://github.com/openedx/frontend-app-learner-dashboard/issues
-
-For more information about these options, see the `Getting Help`_ page.
-
-.. _Slack invitation: https://openedx.org/slack
-.. _community Slack workspace: https://openedx.slack.com/
-.. _#wg-frontend channel: https://openedx.slack.com/archives/C04BM6YC7A6
-.. _Getting Help: https://openedx.org/community/connect
-
 ## Resources
 
 * [Learner Home project info at the Open edX Wiki](https://openedx.atlassian.net/wiki/spaces/OEPM/pages/3575906333/Learner+Home)
-
-## The Open edX Code of Conduct
-
-All community members are expected to follow the `Open edX Code of Conduct`_.
-
-.. _Open edX Code of Conduct: https://openedx.org/code-of-conduct/
-
-## Reporting Security Issues
-
-Please do not report security issues in public. Please email security@openedx.org.

package.json

@@ -8,7 +8,7 @@
   },
   "scripts": {
     "build": "fedx-scripts webpack",
-    "i18n_extract": "fedx-scripts formatjs extract",
+    "i18n_extract": "BABEL_ENV=i18n fedx-scripts babel src --quiet > /dev/null",
     "lint": "fedx-scripts eslint --ext .jsx,.js src/",
     "lint-fix": "fedx-scripts eslint --fix --ext .jsx,.js src/",
     "semantic-release": "semantic-release",
@@ -26,12 +26,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@edx/brand": "npm:@openedx/brand-openedx@^1.2.2",
+    "@edx/brand": "npm:@edx/brand-edx.org@^2.0.3",
     "@edx/browserslist-config": "^1.1.0",
-    "@edx/frontend-component-footer": "^12.2.1",
-    "@edx/frontend-enterprise-hotjar": "^2.0.0",
-    "@edx/frontend-platform": "^5.5.4",
-    "@edx/paragon": "^20.44.0",
+    "@edx/frontend-component-footer": "^12.0.0",
+    "@edx/frontend-enterprise-hotjar": "^1.2.0",
+    "@edx/frontend-platform": "^4.2.0",
+    "@edx/paragon": "^20.32.0",
     "@edx/react-unit-test-utils": "^1.7.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
@@ -59,13 +59,13 @@
     "moment": "^2.29.4",
     "prop-types": "15.7.2",
     "query-string": "7.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^16.14.0",
+    "react-dom": "^16.14.0",
     "react-helmet": "^6.1.0",
     "react-intl": "^5.20.9",
     "react-pdf": "^5.5.0",
     "react-redux": "^7.2.4",
-    "react-router-dom": "6.15.0",
+    "react-router-dom": "5.3.3",
     "react-share": "^4.4.0",
     "react-zendesk": "^0.1.13",
     "redux": "4.1.1",
@@ -80,19 +80,19 @@
     "whatwg-fetch": "^3.6.2"
   },
   "devDependencies": {
-    "@edx/frontend-build": "13.0.1",
+    "@edx/frontend-build": "12.8.27",
     "@edx/reactifex": "^2.1.1",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.8.0",
     "axios-mock-adapter": "^1.20.0",
     "copy-webpack-plugin": "^11.0.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "fetch-mock": "^9.11.0",
     "husky": "^7.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest-expect-message": "^1.0.2",
     "react-dev-utils": "^11.0.4",
-    "react-test-renderer": "^17.0.2",
+    "react-test-renderer": "^16.14.0",
     "redux-mock-store": "^1.5.4",
     "semantic-release": "^20.1.3"
   }

public/index.html

@@ -1,8 +1,19 @@
 <!doctype html>
 <html lang="en-us" dir="ltr">
   <head>
+      <title>Learner Dashboard | <%= process.env.SITE_NAME %></title>
       <meta charset="utf-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
+      <% if (process.env.OPTIMIZELY_URL) { %>
+        <script
+          src="<%= process.env.OPTIMIZELY_URL %>"
+        ></script>
+      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+        <script
+          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
+        ></script>
+      <% } %>
   </head>
   <body>
     <div id="root"></div>

src/App.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { BrowserRouter as Router } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -23,13 +24,12 @@ import { ExperimentProvider } from 'ExperimentContext';
 import track from 'tracking';
 
 import fakeData from 'data/services/lms/fakeData/courses';
+import LearnerDashboardHeader from './containers/LearnerDashboardHeader';
 
-import AppWrapper from 'containers/WidgetContainers/AppWrapper';
-import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
-
-import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
+
 import './App.scss';
+import { PaintedDoorExperimentProvider } from './RecsPaintedDoorExpContext';
 
 export const App = () => {
   const { authenticatedUser } = React.useContext(AppContext);
@@ -42,21 +42,8 @@ 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') {
+    if (authenticatedUser?.administrator || process.env.NODE_ENV === 'development') {
       window.loadEmptyData = () => {
         loadData({ ...fakeData.globalData, courses: [] });
       };
@@ -74,12 +61,12 @@ export const App = () => {
       window.actions = actions;
       window.track = track;
     }
-    if (getConfig().HOTJAR_APP_ID) {
+    if (process.env.HOTJAR_APP_ID) {
       try {
         initializeHotjar({
-          hotjarId: getConfig().HOTJAR_APP_ID,
-          hotjarVersion: getConfig().HOTJAR_VERSION,
-          hotjarDebug: !!getConfig().HOTJAR_DEBUG,
+          hotjarId: process.env.HOTJAR_APP_ID,
+          hotjarVersion: process.env.HOTJAR_VERSION,
+          hotjarDebug: !!process.env.HOTJAR_DEBUG,
         });
       } catch (error) {
         logError(error);
@@ -87,14 +74,12 @@ export const App = () => {
     }
   }, [authenticatedUser, loadData]);
   return (
-    <>
+    <Router>
       <Helmet>
         <title>{formatMessage(messages.pageTitle)}</title>
-        <link rel="shortcut icon" href={getConfig().FAVICON_URL} type="image/x-icon" />
-        {optimizelyScript()}
       </Helmet>
       <div>
-        <AppWrapper>
+        <PaintedDoorExperimentProvider>
           <LearnerDashboardHeader />
           <main>
             {hasNetworkFailure
@@ -108,11 +93,11 @@ export const App = () => {
                 </ExperimentProvider>
               )}
           </main>
-        </AppWrapper>
-        <Footer logo={getConfig().LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-        <ZendeskFab />
+          <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+          <ZendeskFab />
+        </PaintedDoorExperimentProvider>
       </div>
-    </>
+    </Router>
   );
 };
 

src/App.test.jsx

@@ -1,16 +1,18 @@
 import React from 'react';
+import { shallow } from 'enzyme';
 import { Helmet } from 'react-helmet';
-import { shallow } from '@edx/react-unit-test-utils';
+import { ErrorPage } from '@edx/frontend-platform/react';
+
+import { BrowserRouter as Router } from 'react-router-dom';
 
 import Footer from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
+import { Alert } from '@edx/paragon';
 
 import { RequestKeys } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
-import AppWrapper from 'containers/WidgetContainers/AppWrapper';
 import { ExperimentProvider } from 'ExperimentContext';
 import { App } from './App';
 import messages from './messages';
@@ -23,7 +25,9 @@ jest.mock('components/ZendeskFab', () => 'ZendeskFab');
 jest.mock('ExperimentContext', () => ({
   ExperimentProvider: 'ExperimentProvider',
 }));
-jest.mock('containers/WidgetContainers/AppWrapper', () => 'AppWrapper');
+jest.mock('RecsPaintedDoorExpContext', () => ({
+  PaintedDoorExperimentProvider: 'PaintedDoorExperimentProvider',
+}));
 jest.mock('data/redux', () => ({
   selectors: 'redux.selectors',
   actions: 'redux.actions',
@@ -38,131 +42,76 @@ jest.mock('hooks', () => ({
 }));
 jest.mock('data/store', () => 'data/store');
 
-const logo = 'fakeLogo.png';
-
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(() => ({})),
-}));
-
 const loadData = jest.fn();
 reduxHooks.useLoadData.mockReturnValue(loadData);
 
+const logo = 'fakeLogo.png';
 let el;
 
 const supportEmail = 'test-support-url';
 reduxHooks.usePlatformSettingsData.mockReturnValue({ supportEmail });
 
 describe('App router component', () => {
+  process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG = logo;
   const { formatMessage } = useIntl();
   describe('component', () => {
     const runBasicTests = () => {
-      test('snapshot', () => { expect(el.snapshot).toMatchSnapshot(); });
+      test('snapshot', () => { expect(el).toMatchSnapshot(); });
       it('displays title in helmet component', () => {
-        const control = el.instance
-          .findByType(Helmet)[0]
-          .findByType('title')[0];
-        expect(control.children[0].el).toEqual(formatMessage(messages.pageTitle));
+        expect(el.find(Helmet).find('title').text()).toEqual(useIntl().formatMessage(messages.pageTitle));
       });
       it('displays learner dashboard header', () => {
-        expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
+        expect(el.find(LearnerDashboardHeader).length).toEqual(1);
+      });
+      it('wraps the page in a browser router', () => {
+        expect(el.find(Router)).toMatchObject(el);
       });
       test('Footer logo drawn from env variable', () => {
-        expect(el.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');
-        expect(container.children[1].type).toEqual('main');
+        expect(el.find(Footer).props().logo).toEqual(logo);
       });
     };
     describe('no network failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
         el = shallow(<App />);
       });
       runBasicTests();
       it('loads dashboard', () => {
-        const main = el.instance.findByType('main')[0];
-        expect(main.children.length).toEqual(1);
-        const expProvider = main.children[0];
-        expect(expProvider.type).toEqual('ExperimentProvider');
-        expect(expProvider.children.length).toEqual(1);
-        expect(
-          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
-        ).toEqual(true);
-      });
-    });
-    describe('no network failure with optimizely url', () => {
-      beforeAll(() => {
-        reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, OPTIMIZELY_URL: 'fake.url' });
-        el = shallow(<App />);
-      });
-      runBasicTests();
-      it('loads dashboard', () => {
-        const main = el.instance.findByType('main')[0];
-        expect(main.children.length).toEqual(1);
-        const expProvider = main.children[0];
-        expect(expProvider.type).toEqual('ExperimentProvider');
-        expect(expProvider.children.length).toEqual(1);
-        expect(
-          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
-        ).toEqual(true);
-      });
-    });
-    describe('no network failure with optimizely project id', () => {
-      beforeAll(() => {
-        reduxHooks.useRequestIsFailed.mockReturnValue(false);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo, 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);
+        expect(el.find('main')).toMatchObject(shallow(
+          <main><ExperimentProvider><Dashboard /></ExperimentProvider></main>,
+        ));
       });
     });
     describe('initialize failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.initialize);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
         el = shallow(<App />);
       });
       runBasicTests();
       it('loads error page', () => {
-        const main = el.instance.findByType('main')[0];
-        expect(main.children.length).toEqual(1);
-        const alert = main.children[0];
-        expect(alert.type).toEqual('Alert');
-        expect(alert.children.length).toEqual(1);
-        const errorPage = alert.children[0];
-        expect(errorPage.type).toEqual('ErrorPage');
-        expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail }));
+        expect(el.find('main')).toEqual(shallow(
+          <main>
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          </main>,
+        ));
       });
     });
     describe('refresh failure', () => {
       beforeAll(() => {
         reduxHooks.useRequestIsFailed.mockImplementation((key) => key === RequestKeys.refreshList);
-        getConfig.mockReturnValue({ LOGO_POWERED_BY_OPEN_EDX_URL_SVG: logo });
         el = shallow(<App />);
       });
       runBasicTests();
       it('loads error page', () => {
-        const main = el.instance.findByType('main')[0];
-        expect(main.children.length).toEqual(1);
-        const alert = main.children[0];
-        expect(alert.type).toEqual('Alert');
-        expect(alert.children.length).toEqual(1);
-        const errorPage = alert.children[0];
-        expect(errorPage.type).toEqual('ErrorPage');
-        expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail }));
+        expect(el.find('main')).toEqual(shallow(
+          <main>
+            <Alert variant="danger">
+              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+            </Alert>
+          </main>,
+        ));
       });
     });
   });

src/RecsPaintedDoorExpContext.jsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { StrictDict } from 'utils';
-import * as module from './PaintedDoorExperimentContext';
+import * as module from './RecsPaintedDoorExpContext';
 import {
   useEmailConfirmationData,
   useHasAvailableDashboards,
   useRequestIsPending,
-} from '../../data/redux/hooks';
-import { RequestKeys } from '../../data/constants/requests';
-import { trackPaintedDoorVariationGroup } from './track';
+} from './data/redux/hooks';
+import { RequestKeys } from './data/constants/requests';
+import { trackPaintedDoorVariationGroup } from './widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
 
 export const state = StrictDict({
   enterpriseUser: (val) => React.useState(val), // eslint-disable-line
@@ -19,7 +19,6 @@ const PAINTED_DOOR_RECOMMENDATIONS_EXP_ID = 25116810832;
 const PAINTED_DOOR_RECOMMENDATIONS_PAGE = 'url_targeting_for_van1604_recommendations_painted_door_exp';
 const PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION = 'btn_navbar';
 const PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION = 'btn_widget';
-const PAINTED_DOOR_RECS_EXP_CONTROL_VARIATION = 'control';
 
 export function getPaintedDoorRecommendationsExperimentVariation() {
   try {
@@ -39,7 +38,7 @@ export function activatePaintedDoorRecommendationsExperiment() {
   });
 }
 
-export const useIsEnterpriseUser = () => {
+const useIsEnterpriseUser = () => {
   const [enterpriseUser, setEnterpriseUser] = module.state.enterpriseUser({
     isEnterpriseUser: false,
     isLoading: true,
@@ -68,20 +67,13 @@ export const useIsEnterpriseUser = () => {
   return enterpriseUser;
 };
 
-export const PaintedDoorExperimentContext = React.createContext({
-  experimentVariation: null,
-  isPaintedDoorNavbarBtnVariation: null,
-  isPaintedDoorWidgetBtnVariation: null,
-  isPaintedDoorControlVariation: null,
-  experimentLoading: null,
-});
+export const PaintedDoorExperimentContext = React.createContext();
 
 export const PaintedDoorExperimentProvider = ({ children }) => {
   const [experimentData, setExperimentData] = module.state.experimentData({
     experimentVariation: '',
     isPaintedDoorNavbarBtnVariation: false,
     isPaintedDoorWidgetBtnVariation: false,
-    isPaintedDoorControlVariation: false,
     experimentLoading: true,
   });
   const enterpriseUser = useIsEnterpriseUser();
@@ -104,7 +96,6 @@ export const PaintedDoorExperimentProvider = ({ children }) => {
           experimentVariation: variation,
           isPaintedDoorNavbarBtnVariation: variation === PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION,
           isPaintedDoorWidgetBtnVariation: variation === PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION,
-          isPaintedDoorControlVariation: variation === PAINTED_DOOR_RECS_EXP_CONTROL_VARIATION,
           experimentLoading: false,
         }));
         trackPaintedDoorVariationGroup(variation);
@@ -126,4 +117,4 @@ PaintedDoorExperimentProvider.propTypes = {
   children: PropTypes.node.isRequired,
 };
 
-export default PaintedDoorExperimentProvider;
+export default usePaintedDoorExperimentContext;

src/__snapshots__/App.test.jsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`App router component component initialize failure snapshot 1`] = `
-<Fragment>
+<BrowserRouter>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -9,13 +9,9 @@ exports[`App router component component initialize failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
-    <link
-      rel="shortcut icon"
-      type="image/x-icon"
-    />
   </HelmetWrapper>
   <div>
-    <AppWrapper>
+    <PaintedDoorExperimentProvider>
       <LearnerDashboardHeader />
       <main>
         <Alert
@@ -26,17 +22,17 @@ exports[`App router component component initialize failure snapshot 1`] = `
           />
         </Alert>
       </main>
-    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
   </div>
-</Fragment>
+</BrowserRouter>
 `;
 
 exports[`App router component component no network failure snapshot 1`] = `
-<Fragment>
+<BrowserRouter>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -44,98 +40,26 @@ exports[`App router component component no network failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
-    <link
-      rel="shortcut icon"
-      type="image/x-icon"
-    />
   </HelmetWrapper>
   <div>
-    <AppWrapper>
+    <PaintedDoorExperimentProvider>
       <LearnerDashboardHeader />
       <main>
         <ExperimentProvider>
           <Dashboard />
         </ExperimentProvider>
       </main>
-    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
   </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely project id snapshot 1`] = `
-<Fragment>
-  <HelmetWrapper
-    defer={true}
-    encodeSpecialCharacters={true}
-  >
-    <title>
-      Learner Home
-    </title>
-    <link
-      rel="shortcut icon"
-      type="image/x-icon"
-    />
-    <script
-      src="undefined/optimizelyjs/fakeId.js"
-    />
-  </HelmetWrapper>
-  <div>
-    <AppWrapper>
-      <LearnerDashboardHeader />
-      <main>
-        <ExperimentProvider>
-          <Dashboard />
-        </ExperimentProvider>
-      </main>
-    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
-  </div>
-</Fragment>
-`;
-
-exports[`App router component component no network failure with optimizely url snapshot 1`] = `
-<Fragment>
-  <HelmetWrapper
-    defer={true}
-    encodeSpecialCharacters={true}
-  >
-    <title>
-      Learner Home
-    </title>
-    <link
-      rel="shortcut icon"
-      type="image/x-icon"
-    />
-    <script
-      src="fake.url"
-    />
-  </HelmetWrapper>
-  <div>
-    <AppWrapper>
-      <LearnerDashboardHeader />
-      <main>
-        <ExperimentProvider>
-          <Dashboard />
-        </ExperimentProvider>
-      </main>
-    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
-  </div>
-</Fragment>
+</BrowserRouter>
 `;
 
 exports[`App router component component refresh failure snapshot 1`] = `
-<Fragment>
+<BrowserRouter>
   <HelmetWrapper
     defer={true}
     encodeSpecialCharacters={true}
@@ -143,13 +67,9 @@ exports[`App router component component refresh failure snapshot 1`] = `
     <title>
       Learner Home
     </title>
-    <link
-      rel="shortcut icon"
-      type="image/x-icon"
-    />
   </HelmetWrapper>
   <div>
-    <AppWrapper>
+    <PaintedDoorExperimentProvider>
       <LearnerDashboardHeader />
       <main>
         <Alert
@@ -160,11 +80,11 @@ exports[`App router component component refresh failure snapshot 1`] = `
           />
         </Alert>
       </main>
-    </AppWrapper>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
   </div>
-</Fragment>
+</BrowserRouter>
 `;

src/__snapshots__/index.test.jsx.snap

@@ -13,28 +13,18 @@ exports[`app registry subscribe: APP_READY.  links App to root element 1`] = `
       "redux": "store",
     }
   }
-  wrapWithRouter={true}
 >
   <NoticesWrapper>
-    <Routes>
-      <Route
-        element={
-          <PageWrap>
-            <App />
-          </PageWrap>
-        }
+    <Switch>
+      <PageRoute
         path="/"
+      >
+        <App />
+      </PageRoute>
+      <Redirect
+        to="/"
       />
-      <Route
-        element={
-          <Navigate
-            replace={true}
-            to="/"
-          />
-        }
-        path="*"
-      />
-    </Routes>
+    </Switch>
   </NoticesWrapper>
 </AppProvider>
 `;

src/components/EmailLink.jsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { MailtoLink } from '@edx/paragon';
+
+export const EmailLink = ({ address }) => {
+  if (!address) {
+    return null;
+  }
+  return (
+    <MailtoLink to={address}>{address}</MailtoLink>
+  );
+};
+EmailLink.defaultProps = { address: null };
+EmailLink.propTypes = { address: PropTypes.string };
+
+export default EmailLink;

src/components/EmailLink.test.jsx

@@ -0,0 +1,16 @@
+import { shallow } from 'enzyme';
+
+import EmailLink from './EmailLink';
+
+describe('EmailLink', () => {
+  it('renders null when no address is provided', () => {
+    const wrapper = shallow(<EmailLink />);
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.isEmptyRender()).toEqual(true);
+  });
+  it('renders a MailtoLink when an address is provided', () => {
+    const wrapper = shallow(<EmailLink address="test@email.com" />);
+    expect(wrapper.find('MailtoLink').length).toEqual(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

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

@@ -2,7 +2,7 @@
 
 exports[`ModalView snapshot should renders default ModalView 1`] = `
 <div
-  className="containers modal-container"
+  className="containers"
 >
   <ModalDialog
     hasCloseButton={false}
@@ -13,10 +13,12 @@ exports[`ModalView snapshot should renders default ModalView 1`] = `
     title=""
   >
     <ModalDialog.Header>
-      <Component
-        className="mt-2"
-      >
-        Thank you for your interest!
+      <Component>
+        <h3
+          className="mt-2"
+        >
+          Thank you for your interest!
+        </h3>
       </Component>
     </ModalDialog.Header>
     <ModalDialog.Body>

src/components/ModalView/hooks.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { StrictDict } from 'utils';
+
+import * as module from './hooks';
+
+export const state = StrictDict({
+  isRecommendationsModalOpen: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useRecommendationsModal = () => {
+  const [isRecommendationsModalOpen, setIsRecommendationsModalOpen] = module.state.isRecommendationsModalOpen(false);
+  const toggleRecommendationsModal = () => setIsRecommendationsModalOpen(!isRecommendationsModalOpen);
+
+  return {
+    isRecommendationsModalOpen,
+    toggleRecommendationsModal,
+  };
+};

src/components/ModalView/hooks.test.js

@@ -0,0 +1,21 @@
+import { MockUseState } from 'testUtils';
+
+import * as hooks from './hooks';
+
+const state = new MockUseState(hooks);
+
+const {
+  useRecommendationsModal,
+} = hooks;
+
+describe('LearnerDashboardHeader hooks', () => {
+  describe('useRecommendationsModal', () => {
+    test('default state', () => {
+      state.mock();
+      const out = useRecommendationsModal();
+      state.expectInitializedWith(state.keys.isRecommendationsModalOpen, false);
+      out.toggleRecommendationsModal();
+      expect(state.values.isRecommendationsModalOpen).toEqual(true);
+    });
+  });
+});

src/components/ModalView/index.jsx

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 
 import { ModalDialog, ActionRow } from '@edx/paragon';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import messages from '../../messages';
+import messages from './messages';
 
 import './index.scss';
 import {
   trackPaintedDoorRecommendationHomeInterestBtnClicked,
   trackPaintedDoorRecommendationHomeSkipBtnClicked,
-} from '../../track';
+} from '../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
 
 export const ModalView = ({
   isOpen,
@@ -22,7 +22,7 @@ export const ModalView = ({
   const handleInterestBtnClick = () => trackPaintedDoorRecommendationHomeInterestBtnClicked(variation);
 
   return (
-    <div className="containers modal-container">
+    <div className="containers">
       <ModalDialog
         title=""
         isOpen={isOpen}
@@ -32,8 +32,8 @@ export const ModalView = ({
         isBlocking
       >
         <ModalDialog.Header>
-          <ModalDialog.Title className="mt-2">
-            {formatMessage(messages.recommendationsModalHeading)}
+          <ModalDialog.Title>
+            <h3 className="mt-2">{formatMessage(messages.recommendationsModalHeading)}</h3>
           </ModalDialog.Title>
         </ModalDialog.Header>
         <ModalDialog.Body>

src/components/ModalView/index.scss

@@ -1,9 +1,5 @@
 @import "@edx/paragon/scss/core/core";
 
-.modal-container {
-    display: none;
-}
-
 @media (max-width: 464px) {
     .pgn__action-row{
         flex-direction: column;
@@ -13,3 +9,5 @@
         }
     }
 }
+
+

src/components/ModalView/index.test.jsx

@@ -2,16 +2,10 @@ import { shallow } from 'enzyme';
 
 import ModalView from '.';
 
-jest.mock('../../track', () => ({
-  trackPaintedDoorRecommendationHomeSkipBtnClicked: jest.fn(),
-  trackPaintedDoorRecommendationHomeInterestBtnClicked: jest.fn(),
-}));
-
 describe('ModalView', () => {
   const props = {
     isOpen: true,
     onClose: jest.fn(),
-    variation: '',
   };
   describe('snapshot', () => {
     test('should renders default ModalView', () => {

src/components/ModalView/messages.js

@@ -26,16 +26,6 @@ const messages = defineMessages({
     defaultMessage: 'Count me in!',
     description: 'button for Count me in!',
   },
-  recommendedForYou: {
-    id: 'learnerVariantDashboard.recommendedForYou',
-    defaultMessage: 'Recommended For You',
-    description: 'Header link for recommended page.',
-  },
-  seeAllRecommendationsButton: {
-    id: 'RecommendationsPanel.seeAllRecommendationsButton',
-    defaultMessage: 'See All Recommendations',
-    description: 'Button to see all recommendations',
-  },
 });
 
 export default messages;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EmailLink renders a MailtoLink when an address is provided 1`] = `
+<MailtoLink
+  to="test@email.com"
+>
+  test@email.com
+</MailtoLink>
+`;
+
+exports[`EmailLink renders null when no address is provided 1`] = `""`;

src/config/index.js

@@ -16,8 +16,6 @@ const configuration = {
   SUPPORT_URL: process.env.SUPPORT_URL || null,
   ENABLE_NOTICES: process.env.ENABLE_NOTICES || null,
   CAREER_LINK_URL: process.env.CAREER_LINK_URL || null,
-  LOGO_URL: process.env.LOGO_URL,
-  ENABLE_EDX_PERSONAL_DASHBOARD: process.env.ENABLE_EDX_PERSONAL_DASHBOARD === 'true',
 };
 
 const features = {};

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

@@ -26,14 +26,17 @@ export const CertificateBanner = ({ cardId }) => {
   const { formatMessage } = useIntl();
   const formatDate = useFormatDate();
 
-  const emailLink = address => <MailtoLink to={address}>{address}</MailtoLink>;
+  const emailLink = address => address && <MailtoLink to={address}>{address}</MailtoLink>;
 
   if (certificate.isRestricted) {
     return (
       <Banner variant="danger">
-        { supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
+        {formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) })}
         {isVerified && '  '}
-        {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
+        {isVerified && formatMessage(
+          messages.certRefundContactBilling,
+          { billingEmail: emailLink(billingEmail) },
+        )}
       </Banner>
     );
   }

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

@@ -21,6 +21,10 @@ jest.mock('components/Banner', () => 'Banner');
 
 describe('CertificateBanner', () => {
   const props = { cardId: 'cardId' };
+  reduxHooks.usePlatformSettingsData.mockReturnValue({
+    supportEmail: 'suport@email',
+    billingEmail: 'billing@email',
+  });
   reduxHooks.useCardCourseRunData.mockReturnValue({
     minPassingGrade: 0.8,
     progressUrl: 'progressUrl',
@@ -38,19 +42,16 @@ describe('CertificateBanner', () => {
   };
   const defaultCourseRun = { isArchived: false };
   const defaultGrade = { isPassing: false };
-  const defaultPlatformSettings = {};
   const createWrapper = ({
     certificate = {},
     enrollment = {},
     grade = {},
     courseRun = {},
-    platformSettings = {},
   }) => {
     reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
     reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
     reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
-    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
     return shallow(<CertificateBanner {...props} />);
   };
   /** TODO: Update tests to validate snapshots **/
@@ -63,28 +64,6 @@ describe('CertificateBanner', () => {
       });
       expect(wrapper).toMatchSnapshot();
     });
-    test('is restricted with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('is restricted with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
     test('is restricted and verified', () => {
       const wrapper = createWrapper({
         certificate: {
@@ -96,49 +75,6 @@ describe('CertificateBanner', () => {
       });
       expect(wrapper).toMatchSnapshot();
     });
-    test('is restricted and verified with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('is restricted and verified with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
-    test('is restricted and verified with support and billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper).toMatchSnapshot();
-    });
     test('is passing and is downloadable', () => {
       const wrapper = createWrapper({
         grade: { isPassing: true },
@@ -197,10 +133,6 @@ describe('CertificateBanner', () => {
         certificate: {
           isRestricted: true,
         },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
       });
       const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
       expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
@@ -214,10 +146,6 @@ describe('CertificateBanner', () => {
         enrollment: {
           isVerified: true,
         },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
       });
       const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
       expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);

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

@@ -17,11 +17,9 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
       }
       values={
         Object {
-          "supportEmailLink": <MailtoLink
-            to="test-support-email"
-          >
-            test-support-email
-          </MailtoLink>,
+          "supportEmailLink": <EmailLink
+            address="test-support-email"
+          />,
         }
       }
     />
@@ -32,21 +30,6 @@ exports[`CreditBanner component render with error state snapshot 1`] = `
 </Banner>
 `;
 
-exports[`CreditBanner component render with error state with no email snapshot 1`] = `
-<Banner
-  variant="danger"
->
-  <p
-    className="credit-error-msg"
-  >
-    An error occurred with this transaction.
-  </p>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;
-
 exports[`CreditBanner component render with no error state snapshot 1`] = `
 <Banner>
   <ContentComponent

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

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 
 import Banner from 'components/Banner';
+import EmailLink from 'components/EmailLink';
 
-import { MailtoLink } from '@edx/paragon';
 import hooks from './hooks';
 import messages from './messages';
 
@@ -15,14 +15,13 @@ export const CreditBanner = ({ cardId }) => {
   if (hookData === null) {
     return null;
   }
-
   const { ContentComponent, error, supportEmail } = hookData;
-  const supportEmailLink = (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>);
+  const supportEmailLink = (<EmailLink address={supportEmail} />);
   return (
     <Banner {...(error && { variant: 'danger' })}>
       {error && (
         <p className="credit-error-msg">
-          {supportEmail ? formatMessage(messages.error, { supportEmailLink }) : formatMessage(messages.errorNoEmail)}
+          {formatMessage(messages.error, { supportEmailLink })}
         </p>
       )}
       <ContentComponent cardId={cardId} />

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

@@ -2,13 +2,15 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import { formatMessage } from 'testUtils';
-import { MailtoLink } from '@edx/paragon';
+
+import EmailLink from 'components/EmailLink';
 
 import hooks from './hooks';
 import messages from './messages';
 import CreditBanner from '.';
 
 jest.mock('components/Banner', () => 'Banner');
+jest.mock('components/EmailLink', () => 'EmailLink');
 
 jest.mock('./hooks', () => ({
   useCreditBannerData: jest.fn(),
@@ -52,7 +54,7 @@ describe('CreditBanner component', () => {
       it('includes credit-error-msg with support email link', () => {
         expect(el.find('.credit-error-msg').containsMatchingElement(
           formatMessage(messages.error, {
-            supportEmailLink: (<MailtoLink to={supportEmail}>{supportEmail}</MailtoLink>),
+            supportEmailLink: (<EmailLink address={supportEmail} />),
           }),
         )).toEqual(true);
       });
@@ -60,25 +62,6 @@ describe('CreditBanner component', () => {
         expect(el.find('ContentComponent').props().cardId).toEqual(cardId);
       });
     });
-
-    describe('with error state with no email', () => {
-      beforeEach(() => {
-        hooks.useCreditBannerData.mockReturnValue({
-          error: true,
-          ContentComponent,
-        });
-        el = shallow(<CreditBanner cardId={cardId} />);
-      });
-      test('snapshot', () => {
-        expect(el).toMatchSnapshot();
-      });
-      it('includes credit-error-msg without support email link', () => {
-        expect(el.find('.credit-error-msg').containsMatchingElement(
-          formatMessage(messages.errorNoEmail),
-        )).toEqual(true);
-      });
-    });
-
     describe('with no error state', () => {
       beforeEach(() => {
         hooks.useCreditBannerData.mockReturnValue({

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

@@ -6,11 +6,6 @@ export const messages = StrictDict({
     description: '',
     defaultMessage: 'An error occurred with this transaction.  For help, contact {supportEmailLink}.',
   },
-  errorNoEmail: {
-    id: 'learner-dash.courseCard.banners.credit.errorNoEmail',
-    description: '',
-    defaultMessage: 'An error occurred with this transaction.',
-  },
 });
 
 export default messages;

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

@@ -21,48 +21,28 @@ exports[`CertificateBanner snapshot is restricted 1`] = `
 <Banner
   variant="danger"
 >
-  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.
+  <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"
+        >
+          suport@email
+        </MailtoLink>,
+      }
+    }
+  />
 </Banner>
 `;
 
 exports[`CertificateBanner snapshot is restricted and verified 1`] = `
-<Banner
-  variant="danger"
->
-  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.
-    
-  If you would like a refund on your Certificate of Achievement, please contact us.
-</Banner>
-`;
-
-exports[`CertificateBanner snapshot is restricted and verified with billing email 1`] = `
-<Banner
-  variant="danger"
->
-  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.
-    
-  <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"
-        >
-          billing@email
-        </MailtoLink>,
-      }
-    }
-  />
-</Banner>
-`;
-
-exports[`CertificateBanner snapshot is restricted and verified with support and billing email 1`] = `
 <Banner
   variant="danger"
 >
@@ -106,66 +86,6 @@ exports[`CertificateBanner snapshot is restricted and verified with support and
 </Banner>
 `;
 
-exports[`CertificateBanner snapshot is restricted and verified with support email 1`] = `
-<Banner
-  variant="danger"
->
-  <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"
-        >
-          suport@email
-        </MailtoLink>,
-      }
-    }
-  />
-    
-  If you would like a refund on your Certificate of Achievement, please contact us.
-</Banner>
-`;
-
-exports[`CertificateBanner snapshot is restricted with billing email 1`] = `
-<Banner
-  variant="danger"
->
-  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.
-</Banner>
-`;
-
-exports[`CertificateBanner snapshot is restricted with support email 1`] = `
-<Banner
-  variant="danger"
->
-  <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"
-        >
-          suport@email
-        </MailtoLink>,
-      }
-    }
-  />
-</Banner>
-`;
-
 exports[`CertificateBanner snapshot not passing and audit 1`] = `
 <Banner>
   Grade required to pass the course: 0.8‏%

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

@@ -31,21 +31,11 @@ export const messages = StrictDict({
     description: 'Restricted certificate warning message',
     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}.',
   },
-  certRestrictedNoEmail: {
-    id: 'learner-dash.courseCard.banners.certificateRestrictedNoEmail',
-    description: 'Restricted certificate warning message',
-    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.',
-  },
   certRefundContactBilling: {
     id: 'learner-dash.courseCard.banners.certificateRefundContactBilling',
     description: 'Message to learners to contact billing for certificate refunds',
     defaultMessage: 'If you would like a refund on your Certificate of Achievement, please contact our billing address {billingEmail}',
   },
-  certRefundContactBillingNoEmail: {
-    id: 'learner-dash.courseCard.banners.certificateRefundContactBillingNoEmail',
-    description: 'Message to learners to contact billing for certificate refunds',
-    defaultMessage: 'If you would like a refund on your Certificate of Achievement, please contact us.',
-  },
   passingGrade: {
     id: 'learner-dash.courseCard.banners.passingGrade',
     description: 'Message to learners with minimum passing grade for the course',

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

@@ -8,6 +8,7 @@ import { Dropdown } from '@edx/paragon';
 
 import track from 'tracking';
 import { reduxHooks } from 'hooks';
+import { useEmailSettings } from './hooks';
 
 import messages from './messages';
 
@@ -15,9 +16,11 @@ export const testIds = StrictDict({
   emailSettingsModalToggle: 'emailSettingsModalToggle',
 });
 
-export const SocialShareMenu = ({ cardId, emailSettings }) => {
+export const SocialShareMenu = ({ cardId }) => {
   const { formatMessage } = useIntl();
 
+  const emailSettingsModal = useEmailSettings();
+
   const { courseName } = reduxHooks.useCardCourseData(cardId);
   const { isEmailEnabled, isExecEd2UCourse } = reduxHooks.useCardEnrollmentData(cardId);
   const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
@@ -35,7 +38,7 @@ export const SocialShareMenu = ({ cardId, emailSettings }) => {
       {isEmailEnabled && (
         <Dropdown.Item
           disabled={isMasquerading}
-          onClick={emailSettings.show}
+          onClick={emailSettingsModal.show}
           data-testid={testIds.emailSettingsModalToggle}
         >
           {formatMessage(messages.emailSettings)}
@@ -74,9 +77,6 @@ export const SocialShareMenu = ({ cardId, emailSettings }) => {
 };
 SocialShareMenu.propTypes = {
   cardId: PropTypes.string.isRequired,
-  emailSettings: PropTypes.shape({
-    show: PropTypes.func,
-  }).isRequired,
 };
 
 export default SocialShareMenu;

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

@@ -39,11 +39,14 @@ jest.mock('./hooks', () => ({
   useEmailSettings: jest.fn(),
 }));
 
-const props = {
-  cardId: 'test-card-id',
-  emailSettings: { show: jest.fn() },
+const emailSettings = {
+  isVisible: false,
+  show: jest.fn().mockName('emailSettingShow'),
+  hide: jest.fn().mockName('emailSettingHide'),
 };
 
+const props = { cardId: 'test-card-id' };
+
 const mockHook = (fn, returnValue, options = {}) => {
   if (options.isCardHook) {
     when(fn).calledWith(props.cardId).mockReturnValueOnce(returnValue);
@@ -68,6 +71,7 @@ const socialShare = {
 };
 
 const mockHooks = (returnVals = {}) => {
+  mockHook(useEmailSettings, emailSettings);
   mockHook(
     reduxHooks.useCardEnrollmentData,
     {
@@ -136,7 +140,7 @@ describe('SocialShareMenu', () => {
           });
         }
         test('show email settings modal on click', () => {
-          expect(loadToggle().props.onClick).toEqual(props.emailSettings.show);
+          expect(loadToggle().props.onClick).toEqual(emailSettings.show);
         });
       });
     };
@@ -184,7 +188,7 @@ describe('SocialShareMenu', () => {
           expect(loadToggle().props.disabled).toEqual(false);
         });
         test('show email settings modal on click', () => {
-          expect(loadToggle().props.onClick).toEqual(props.emailSettings.show);
+          expect(loadToggle().props.onClick).toEqual(emailSettings.show);
         });
       });
       testEmailSettingsDropdown();

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

@@ -16,13 +16,6 @@ exports[`CourseCardMenu render show dropdown hide unenroll item and disable emai
     <Dropdown.Menu>
       <SocialShareMenu
         cardId="test-card-id"
-        emailSettings={
-          Object {
-            "hide": [MockFunction emailSettingHide],
-            "isVisible": false,
-            "show": [MockFunction emailSettingShow],
-          }
-        }
       />
     </Dropdown.Menu>
   </Dropdown>
@@ -57,13 +50,6 @@ exports[`CourseCardMenu render show dropdown show unenroll and enable email snap
       </Dropdown.Item>
       <SocialShareMenu
         cardId="test-card-id"
-        emailSettings={
-          Object {
-            "hide": [MockFunction emailSettingHide],
-            "isVisible": false,
-            "show": [MockFunction emailSettingShow],
-          }
-        }
       />
     </Dropdown.Menu>
   </Dropdown>

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

@@ -26,7 +26,7 @@ export const testIds = StrictDict({
 export const CourseCardMenu = ({ cardId }) => {
   const { formatMessage } = useIntl();
 
-  const emailSettings = useEmailSettings();
+  const emailSettingsModal = useEmailSettings();
   const unenrollModal = useUnenrollData();
   const handleToggleDropdown = useHandleToggleDropdown(cardId);
   const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId);
@@ -58,7 +58,7 @@ export const CourseCardMenu = ({ cardId }) => {
               {formatMessage(messages.unenroll)}
             </Dropdown.Item>
           )}
-          <SocialShareMenu cardId={cardId} emailSettings={emailSettings} />
+          <SocialShareMenu cardId={cardId} />
         </Dropdown.Menu>
       </Dropdown>
       <UnenrollConfirmModal
@@ -68,8 +68,8 @@ export const CourseCardMenu = ({ cardId }) => {
       />
       {isEmailEnabled && (
         <EmailSettingsModal
-          show={emailSettings.isVisible}
-          closeModal={emailSettings.hide}
+          show={emailSettingsModal.isVisible}
+          closeModal={emailSettingsModal.hide}
           cardId={cardId}
         />
       )}

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

@@ -7,7 +7,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 import EmailSettingsModal from 'containers/EmailSettingsModal';
 import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
 import { reduxHooks } from 'hooks';
-import SocialShareMenu from './SocialShareMenu';
 import * as hooks from './hooks';
 import CourseCardMenu, { testIds } from '.';
 
@@ -19,7 +18,6 @@ jest.mock('@edx/frontend-platform/i18n', () => ({
 jest.mock('hooks', () => ({
   reduxHooks: { useMasqueradeData: jest.fn(), useCardEnrollmentData: jest.fn() },
 }));
-jest.mock('./SocialShareMenu', () => 'SocialShareMenu');
 jest.mock('./hooks', () => ({
   useEmailSettings: jest.fn(),
   useUnenrollData: jest.fn(),
@@ -124,13 +122,6 @@ describe('CourseCardMenu', () => {
         expect(modal.props.cardId).toEqual(props.cardId);
       });
     };
-    const testSocialShareMenu = () => {
-      it('displays SocialShareMenu with cardID and emailSettings', () => {
-        const menu = el.instance.findByType(SocialShareMenu)[0];
-        expect(menu.props.cardId).toEqual(props.cardId);
-        expect(menu.props.emailSettings).toEqual(emailSettings);
-      });
-    };
     describe('show dropdown', () => {
       describe('hide unenroll item and disable email', () => {
         beforeEach(() => {
@@ -141,7 +132,6 @@ describe('CourseCardMenu', () => {
           expect(el.snapshot).toMatchSnapshot();
         });
         testHandleToggle();
-        testSocialShareMenu();
         it('does not render unenroll modal toggle', () => {
           expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(0);
         });
@@ -164,7 +154,6 @@ describe('CourseCardMenu', () => {
           expect(el.snapshot).toMatchSnapshot();
         });
         testHandleToggle();
-        testSocialShareMenu();
         describe('unenroll modal toggle', () => {
           let toggle;
           describe('not masquerading', () => {

src/containers/CourseFilterControls/CourseFilterControls.jsx

@@ -68,7 +68,7 @@ export const CourseFilterControls = ({
               onClose={close}
             >
               <div className="p-1 mr-3">
-                <b>{formatMessage(messages.refine)}</b>
+                <b>Refine</b>
               </div>
               <hr />
               <div className="filter-form-row">

src/containers/CourseFilterControls/messages.js

@@ -1,6 +1,6 @@
-import { defineMessages } from '@edx/frontend-platform/i18n';
+import { StrictDict } from 'utils';
 
-const messages = defineMessages({
+export const messages = StrictDict({
   inProgress: {
     id: 'learner-dash.courseListFilters.inProgress',
     description: 'in-progress filter checkbox label for course list filters',
@@ -52,5 +52,4 @@ const messages = defineMessages({
     defaultMessage: 'Refine',
   },
 });
-
 export default messages;

src/containers/LearnerDashboardHeader/BrandLogo.jsx

@@ -4,7 +4,6 @@ import { useIntl } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 
-import { getConfig } from '@edx/frontend-platform';
 import messages from './messages';
 
 export const BrandLogo = () => {
@@ -15,7 +14,7 @@ export const BrandLogo = () => {
     <a href={dashboard?.url || '/'} className="mx-auto">
       <img
         className="logo py-3"
-        src={getConfig().LOGO_URL}
+        src="https://edx-cdn.org/v3/prod/logo.svg"
         alt={formatMessage(messages.logoAltText)}
       />
     </a>

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -4,15 +4,21 @@ 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 '@edx/paragon';
 
-import WidgetNavbar from 'containers/WidgetContainers/WidgetNavbar';
 import urls from 'data/services/lms/urls';
 import { reduxHooks } from 'hooks';
-import { COLLAPSED_NAVBAR } from 'widgets/RecommendationsPaintedDoorBtn/constants';
 
 import { findCoursesNavDropdownClicked } from '../hooks';
+
+import ModalView from '../../../components/ModalView';
 import messages from '../messages';
+import { useRecommendationsModal } from '../../../components/ModalView/hooks';
+import usePaintedDoorExperimentContext from '../../../RecsPaintedDoorExpContext';
+import {
+  trackPaintedDoorRecommendationHomeBtnClicked,
+} from '../../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
 
 export const CollapseMenuBody = ({ isOpen }) => {
   const { formatMessage } = useIntl();
@@ -20,8 +26,19 @@ export const CollapseMenuBody = ({ isOpen }) => {
 
   const dashboard = reduxHooks.useEnterpriseDashboardData();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
+  const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal();
 
   const exploreCoursesClick = findCoursesNavDropdownClicked(urls.baseAppUrl(courseSearchUrl));
+  const {
+    experimentVariation,
+    isPaintedDoorNavbarBtnVariation,
+    experimentLoading,
+  } = usePaintedDoorExperimentContext();
+
+  const handleSeeAllRecommendationsClick = () => {
+    toggleRecommendationsModal();
+    trackPaintedDoorRecommendationHomeBtnClicked(experimentVariation);
+  };
 
   return (
     isOpen && (
@@ -29,7 +46,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
         <Button as="a" href="/" variant="inverse-primary">
           {formatMessage(messages.course)}
         </Button>
-        <Button as="a" href={urls.programsUrl()} variant="inverse-primary">
+        <Button as="a" href={urls.programsUrl} variant="inverse-primary">
           {formatMessage(messages.program)}
         </Button>
         <Button
@@ -40,7 +57,14 @@ export const CollapseMenuBody = ({ isOpen }) => {
         >
           {formatMessage(messages.discoverNew)}
         </Button>
-        <WidgetNavbar placement={COLLAPSED_NAVBAR} />
+        {(!experimentLoading && isPaintedDoorNavbarBtnVariation) && (
+        <Button
+          variant="inverse-primary"
+          onClick={handleSeeAllRecommendationsClick}
+        >
+          {formatMessage(messages.recommendedForYou)}
+        </Button>
+        )}
         <Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
           {formatMessage(messages.help)}
         </Button>
@@ -81,7 +105,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
                 variant="inverse-primary"
                 href={getConfig().ORDER_HISTORY_URL}
               >
-                {formatMessage(messages.orderHistory)}
+                {formatMessage(messages.ordersAndSubscriptions)}
               </Button>
             )}
             <Button
@@ -93,6 +117,11 @@ export const CollapseMenuBody = ({ isOpen }) => {
             </Button>
           </>
         )}
+        <ModalView
+          isOpen={isRecommendationsModalOpen}
+          onClose={toggleRecommendationsModal}
+          variation={experimentVariation}
+        />
       </div>
     )
   );

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

@@ -3,6 +3,13 @@ import { AppContext } from '@edx/frontend-platform/react';
 
 import CollapseMenuBody from './CollapseMenuBody';
 
+jest.mock('@edx/frontend-platform', () => ({
+  getConfig: jest.fn(() => ({
+    ORDER_HISTORY_URL: 'http://account-profile-url.test',
+    CAREER_LINK_URL: 'http://account-profile-url.test',
+  })),
+}));
+
 jest.mock('@edx/frontend-platform/react', () => ({
   AppContext: {
     authenticatedUser: {
@@ -15,6 +22,7 @@ jest.mock('hooks', () => ({
   reduxHooks: {
     useEnterpriseDashboardData: () => ({
       url: 'url',
+      dashboard: false,
     }),
     usePlatformSettingsData: () => ({
       courseSearchUrl: '/courseSearchUrl',
@@ -22,6 +30,13 @@ jest.mock('hooks', () => ({
   },
 }));
 
+jest.mock('../../../components/ModalView/hooks', () => ({
+  useRecommendationsModal: jest.fn(() => ({
+    isRecommendationsModalOpen: false,
+    toggleRecommendationsModal: jest.fn(),
+  })),
+}));
+
 jest.mock('../hooks', () => ({
   findCoursesNavDropdownClicked: (url) => jest.fn().mockName(`findCoursesNavDropdownClicked("${url}")`),
 }));

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

@@ -13,25 +13,21 @@ exports[`CollapseMenuBody render 1`] = `
   </Button>
   <Button
     as="a"
-    href="http://localhost:18000/dashboard/programs"
+    href="undefined/dashboard/programs"
     variant="inverse-primary"
   >
     Programs
   </Button>
   <Button
     as="a"
-    href="http://localhost:18000/courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
+    href="undefined/courseSearchUrl"
+    onClick={[MockFunction findCoursesNavDropdownClicked("undefined/courseSearchUrl")]}
     variant="inverse-primary"
   >
     Discover New
   </Button>
-  <WidgetNavbar
-    placement="collapsedNavbar"
-  />
   <Button
     as="a"
-    href="http://localhost:18000/support"
     variant="inverse-primary"
   >
     Help
@@ -45,25 +41,35 @@ exports[`CollapseMenuBody render 1`] = `
   </Button>
   <Button
     as="a"
-    href="http://localhost:18000/u/username"
+    href="undefined/u/username"
     variant="inverse-primary"
   >
     Profile
   </Button>
   <Button
     as="a"
-    href="http://localhost:18000/account/settings"
+    href="undefined/account/settings"
     variant="inverse-primary"
   >
     Account
   </Button>
   <Button
     as="a"
-    href="http://localhost:18000/logout"
+    href="http://account-profile-url.test"
+    variant="inverse-primary"
+  >
+    Orders & Subscriptions
+  </Button>
+  <Button
+    as="a"
     variant="inverse-primary"
   >
     Sign Out
   </Button>
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+  />
 </div>
 `;
 
@@ -82,28 +88,28 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   </Button>
   <Button
     as="a"
-    href="http://localhost:18000/dashboard/programs"
+    href="undefined/dashboard/programs"
     variant="inverse-primary"
   >
     Programs
   </Button>
   <Button
     as="a"
-    href="http://localhost:18000/courseSearchUrl"
-    onClick={[MockFunction findCoursesNavDropdownClicked("http://localhost:18000/courseSearchUrl")]}
+    href="undefined/courseSearchUrl"
+    onClick={[MockFunction findCoursesNavDropdownClicked("undefined/courseSearchUrl")]}
     variant="inverse-primary"
   >
     Discover New
   </Button>
-  <WidgetNavbar
-    placement="collapsedNavbar"
-  />
   <Button
     as="a"
-    href="http://localhost:18000/support"
     variant="inverse-primary"
   >
     Help
   </Button>
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+  />
 </div>
 `;

src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { MenuIcon, Close } from '@edx/paragon/icons';
+import { Menu, Close } from '@edx/paragon/icons';
 import { IconButton, Icon } from '@edx/paragon';
 
 import { useLearnerDashboardHeaderData, useIsCollapsed } from '../hooks';
@@ -23,7 +23,7 @@ export const CollapsedHeader = () => {
           <IconButton
             invertColors
             isActive
-            src={isOpen ? Close : MenuIcon}
+            src={isOpen ? Close : Menu}
             iconAs={Icon}
             alt={
               isOpen
@@ -36,7 +36,9 @@ export const CollapsedHeader = () => {
           />
           <BrandLogo />
         </header>
-        <CollapseMenuBody isOpen={isOpen} />
+        <CollapseMenuBody
+          isOpen={isOpen}
+        />
       </>
     )
   );

src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.jsx

@@ -29,21 +29,16 @@ export const AuthenticatedUserDropdown = () => {
           </span>
         </Dropdown.Toggle>
         <Dropdown.Menu className="dropdown-menu-right">
-          { getConfig().ENABLE_EDX_PERSONAL_DASHBOARD && (
-            <>
-              <Dropdown.Header>{formatMessage(messages.dashboardSwitch)}</Dropdown.Header>
-              <Dropdown.Item as="a" href="/edx-dashboard" className="active">
-                {formatMessage(messages.dashboardPersonal)}
-              </Dropdown.Item>
-              {!!dashboard && (
-                <Dropdown.Item as="a" href={dashboard.url} key={dashboard.label}>
-                  {dashboard.label} {formatMessage(messages.dashboard)}
-                </Dropdown.Item>
-              )}
-              <Dropdown.Divider />
-            </>
+          <Dropdown.Header>SWITCH DASHBOARD</Dropdown.Header>
+          <Dropdown.Item as="a" href="/edx-dashboard" className="active">
+            Personal
+          </Dropdown.Item>
+          {!!dashboard && (
+            <Dropdown.Item as="a" href={dashboard.url} key={dashboard.label}>
+              {dashboard.label} {formatMessage(messages.dashboard)}
+            </Dropdown.Item>
           )}
-
+          <Dropdown.Divider />
           {!dashboard && getConfig().CAREER_LINK_URL && (
             <Dropdown.Item href={`${getConfig().CAREER_LINK_URL}`}>
               {formatMessage(messages.career)}
@@ -60,7 +55,7 @@ export const AuthenticatedUserDropdown = () => {
           </Dropdown.Item>
           {getConfig().ORDER_HISTORY_URL && (
             <Dropdown.Item href={getConfig().ORDER_HISTORY_URL}>
-              {formatMessage(messages.orderHistory)}
+              {formatMessage(messages.ordersAndSubscriptions)}
             </Dropdown.Item>
           )}
           <Dropdown.Divider />

src/containers/LearnerDashboardHeader/ExpandedHeader/AuthenticatedUserDropdown.test.jsx

@@ -46,7 +46,6 @@ const config = {
   SUPPORT_URL: 'http://localhost:18000/support',
   CAREER_LINK_URL: 'http://localhost:18000/career',
   LMS_BASE_URL: 'http:/localhost:18000',
-  ENABLE_EDX_PERSONAL_DASHBOARD: true,
 };
 getConfig.mockReturnValue(config);
 

src/containers/LearnerDashboardHeader/ExpandedHeader/__snapshots__/AuthenticatedUserDropdown.test.jsx.snap

@@ -55,7 +55,7 @@ exports[`AuthenticatedUserDropdown snapshots with enterprise dashboard 1`] = `
     <Dropdown.Item
       href="http://order-history-url.test"
     >
-      Order History
+      Orders & Subscriptions
     </Dropdown.Item>
     <Dropdown.Divider />
     <Dropdown.Item
@@ -122,7 +122,7 @@ exports[`AuthenticatedUserDropdown snapshots without enterprise dashboard and ex
     <Dropdown.Item
       href="http://order-history-url.test"
     >
-      Order History
+      Orders & Subscriptions
     </Dropdown.Item>
     <Dropdown.Divider />
     <Dropdown.Item

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

@@ -33,9 +33,6 @@ exports[`ExpandedHeader render 1`] = `
     >
       Discover New
     </Button>
-    <WidgetNavbar
-      placement="expendedNavbar"
-    />
     <span
       className="flex-grow-1"
     />
@@ -49,6 +46,10 @@ exports[`ExpandedHeader render 1`] = `
     </Button>
   </div>
   <AuthenticatedUserDropdown />
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+  />
 </header>
 `;
 

src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx

@@ -4,22 +4,38 @@ import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Button } from '@edx/paragon';
 
-import WidgetNavbar from 'containers/WidgetContainers/WidgetNavbar';
 import urls from 'data/services/lms/urls';
 import { reduxHooks } from 'hooks';
-import { EXPANDED_NAVBAR } from 'widgets/RecommendationsPaintedDoorBtn/constants';
 
 import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
+
 import { useIsCollapsed, findCoursesNavClicked } from '../hooks';
+import { useRecommendationsModal } from '../../../components/ModalView/hooks';
 import messages from '../messages';
+import ModalView from '../../../components/ModalView';
 import BrandLogo from '../BrandLogo';
+import usePaintedDoorExperimentContext from '../../../RecsPaintedDoorExpContext';
+import {
+  trackPaintedDoorRecommendationHomeBtnClicked,
+} from '../../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
 
 export const ExpandedHeader = () => {
   const { formatMessage } = useIntl();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
   const isCollapsed = useIsCollapsed();
+  const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal();
 
   const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
+  const {
+    experimentVariation,
+    isPaintedDoorNavbarBtnVariation,
+    experimentLoading,
+  } = usePaintedDoorExperimentContext();
+
+  const handleSeeAllRecommendationsClick = () => {
+    toggleRecommendationsModal();
+    trackPaintedDoorRecommendationHomeBtnClicked(experimentVariation);
+  };
 
   return (
     !isCollapsed && (
@@ -37,7 +53,7 @@ export const ExpandedHeader = () => {
         </Button>
         <Button
           as="a"
-          href={urls.programsUrl()}
+          href={urls.programsUrl}
           variant="inverse-primary"
           className="p-4"
         >
@@ -52,7 +68,15 @@ export const ExpandedHeader = () => {
         >
           {formatMessage(messages.discoverNew)}
         </Button>
-        <WidgetNavbar placement={EXPANDED_NAVBAR} />
+        {(!experimentLoading && isPaintedDoorNavbarBtnVariation) && (
+        <Button
+          variant="inverse-primary"
+          className="p-4"
+          onClick={handleSeeAllRecommendationsClick}
+        >
+          {formatMessage(messages.recommendedForYou)}
+        </Button>
+        )}
         <span className="flex-grow-1" />
         <Button
           as="a"
@@ -65,6 +89,11 @@ export const ExpandedHeader = () => {
       </div>
 
       <AuthenticatedUserDropdown />
+      <ModalView
+        isOpen={isRecommendationsModalOpen}
+        onClose={toggleRecommendationsModal}
+        variation={experimentVariation}
+      />
     </header>
     )
   );

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

@@ -3,9 +3,10 @@ import { shallow } from 'enzyme';
 import ExpandedHeader from '.';
 
 import { useIsCollapsed } from '../hooks';
+import { useRecommendationsModal } from '../../../components/ModalView/hooks';
 
 jest.mock('data/services/lms/urls', () => ({
-  programsUrl: () => 'programsUrl',
+  programsUrl: 'programsUrl',
   baseAppUrl: url => (`http://localhost:18000${url}`),
 }));
 
@@ -19,21 +20,34 @@ jest.mock('hooks', () => ({
 
 jest.mock('../hooks', () => ({
   useIsCollapsed: jest.fn(),
+  useRecommendationsModal: jest.fn(),
   findCoursesNavClicked: (url) => jest.fn().mockName(`findCoursesNavClicked("${url}")`),
 }));
 
+jest.mock('../../../components/ModalView/hooks', () => ({
+  useRecommendationsModal: jest.fn(),
+}));
+
 jest.mock('./AuthenticatedUserDropdown', () => 'AuthenticatedUserDropdown');
 jest.mock('../BrandLogo', () => 'BrandLogo');
 
 describe('ExpandedHeader', () => {
   test('render', () => {
     useIsCollapsed.mockReturnValueOnce(false);
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
+    });
     const wrapper = shallow(<ExpandedHeader />);
     expect(wrapper).toMatchSnapshot();
   });
 
   test('render empty if collapsed', () => {
     useIsCollapsed.mockReturnValueOnce(true);
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
+    });
     const wrapper = shallow(<ExpandedHeader />);
     expect(wrapper).toMatchSnapshot();
     expect(wrapper.isEmptyRender()).toBe(true);

src/containers/LearnerDashboardHeader/__snapshots__/BrandLogo.test.jsx.snap

@@ -8,7 +8,7 @@ exports[`BrandLogo dashboard defined 1`] = `
   <img
     alt="edX, Inc. Dashboard"
     className="logo py-3"
-    src="https://edx-cdn.org/v3/default/logo.svg"
+    src="https://edx-cdn.org/v3/prod/logo.svg"
   />
 </a>
 `;
@@ -21,7 +21,7 @@ exports[`BrandLogo dashboard undefined 1`] = `
   <img
     alt="edX, Inc. Dashboard"
     className="logo py-3"
-    src="https://edx-cdn.org/v3/default/logo.svg"
+    src="https://edx-cdn.org/v3/prod/logo.svg"
   />
 </a>
 `;

src/containers/LearnerDashboardHeader/messages.js

@@ -6,16 +6,6 @@ const messages = defineMessages({
     defaultMessage: 'Dashboard',
     description: 'The text for the user menu Dashboard navigation link.',
   },
-  dashboardPersonal: {
-    id: 'learnerVariantDashboard.menu.dashboardPersonal.label',
-    defaultMessage: 'Personal',
-    description: 'Link to personal dashboard in user menu',
-  },
-  dashboardSwitch: {
-    id: 'learnerVariantDashboard.menu.dashboardSwitch.label',
-    defaultMessage: 'SWITCH DASHBOARD',
-    description: 'Switch Dashboard header in the user menu',
-  },
   help: {
     id: 'learnerVariantDashboard.help.label',
     defaultMessage: 'Help',
@@ -36,10 +26,10 @@ const messages = defineMessages({
     defaultMessage: 'Account',
     description: 'The text for the user menu Account navigation link.',
   },
-  orderHistory: {
-    id: 'learnerVariantDashboard.menu.orderHistory.label',
-    defaultMessage: 'Order History',
-    description: 'The text for the user menu Order History navigation link.',
+  ordersAndSubscriptions: {
+    id: 'learnerVariantDashboard.menu.ordersAndSubscriptions.label',
+    defaultMessage: 'Orders & Subscriptions',
+    description: 'The text for the user menu Orders & Subscriptions navigation link.',
   },
   signOut: {
     id: 'learnerVariantDashboard.menu.signOut.label',
@@ -61,6 +51,11 @@ const messages = defineMessages({
     defaultMessage: 'Discover New',
     description: 'Header link for switching to discover page.',
   },
+  recommendedForYou: {
+    id: 'learnerVariantDashboard.recommendedForYou',
+    defaultMessage: 'Recommended for you',
+    description: 'Header link for recommended page.',
+  },
   logoAltText: {
     id: 'learnerVariantDashboard.logoAltText',
     defaultMessage: 'edX, Inc. Dashboard',

src/containers/WidgetContainers/AppWrapper/__snapshots__/index.test.jsx.snap

@@ -1,29 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AppWrapper WidgetContainer component output no experiments are active snapshot 1`] = `
-<div>
-  This is some 
-  <b>
-    test
-  </b>
-   
-  <i>
-    content
-  </i>
-</div>
-`;
-
-exports[`AppWrapper WidgetContainer component output painted door experiment is active (08/23) snapshot 1`] = `
-<PaintedDoorExperimentProvider>
-  <div>
-    This is some 
-    <b>
-      test
-    </b>
-     
-    <i>
-      content
-    </i>
-  </div>
-</PaintedDoorExperimentProvider>
-`;

src/containers/WidgetContainers/AppWrapper/index.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import PaintedDoorExperimentProvider from 'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
-
-export const AppWrapper = ({
-  children,
-}) => {
-  if (process.env.EXPERIMENT_08_23_VAN_PAINTED_DOOR) {
-    return (
-      <PaintedDoorExperimentProvider>
-        {children}
-      </PaintedDoorExperimentProvider>
-    );
-  }
-  return children;
-};
-AppWrapper.propTypes = {
-  children: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]).isRequired,
-};
-
-export default AppWrapper;

src/containers/WidgetContainers/AppWrapper/index.test.jsx

@@ -1,56 +0,0 @@
-import React from 'react';
-
-import { shallow } from '@edx/react-unit-test-utils';
-
-import PaintedDoorExperimentProvider from 'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
-
-import AppWrapper from '.';
-
-jest.mock(
-  'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext',
-  () => 'PaintedDoorExperimentProvider',
-);
-
-let el;
-
-const children = (<div>This is some <b>test</b> <i>content</i></div>);
-
-const render = () => {
-  el = shallow(<AppWrapper>{children}</AppWrapper>);
-};
-
-const mockAndRenderForBlock = (newVal) => {
-  const oldVal = process.env;
-  beforeEach(() => {
-    process.env = { ...oldVal, ...newVal };
-    render();
-  });
-  afterEach(() => {
-    process.env = oldVal;
-    render();
-  });
-};
-
-describe('AppWrapper WidgetContainer component', () => {
-  describe('output', () => {
-    describe('painted door experiment is active (08/23)', () => {
-      mockAndRenderForBlock({ EXPERIMENT_08_23_VAN_PAINTED_DOOR: true });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('renders children wrapped in PaintedDoorExperimentProvider', () => {
-        const control = el.instance.findByType(PaintedDoorExperimentProvider)[0];
-        expect(el.instance).toEqual(control);
-      });
-    });
-    describe('no experiments are active', () => {
-      mockAndRenderForBlock({ EXPERIMENT_08_23_VAN_PAINTED_DOOR: false });
-      test('snapshot', () => {
-        expect(el.snapshot).toMatchSnapshot();
-      });
-      it('renders children wrapped in PaintedDoorExperimentProvider', () => {
-        expect(el.instance.matches(shallow(children))).toEqual(true);
-      });
-    });
-  });
-});

src/containers/WidgetContainers/LoadedSidebar/__snapshots__/index.test.jsx.snap

@@ -5,7 +5,7 @@ exports[`WidgetSidebar snapshots default 1`] = `
   className="widget-sidebar"
 >
   <div
-    className="d-flex flex-column"
+    className="d-flex"
   >
     <RecommendationsPanel />
   </div>

src/containers/WidgetContainers/LoadedSidebar/index.jsx

@@ -12,7 +12,7 @@ export const WidgetSidebar = ({ setSidebarShowing }) => {
 
     return (
       <div className="widget-sidebar">
-        <div className="d-flex flex-column">
+        <div className="d-flex">
           <RecommendationsPanel />
         </div>
       </div>

src/containers/WidgetContainers/WidgetNavbar/__snapshots__/index.test.jsx.snap

@@ -1,8 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`WidgetNavbar snapshots default 1`] = `
-<RecommendationsPaintedDoorBtn
-  experimentVariation=""
-  placement="expendedNavbar"
-/>
-`;

src/containers/WidgetContainers/WidgetNavbar/index.jsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import RecommendationsPaintedDoorBtn from 'widgets/RecommendationsPaintedDoorBtn';
-import { COLLAPSED_NAVBAR, EXPANDED_NAVBAR } from 'widgets/RecommendationsPaintedDoorBtn/constants';
-import {
-  usePaintedDoorExperimentContext,
-} from 'widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
-
-export const WidgetNavbar = ({ placement }) => {
-  const {
-    experimentVariation,
-    isPaintedDoorNavbarBtnVariation,
-    experimentLoading,
-  } = usePaintedDoorExperimentContext();
-
-  if (!experimentLoading && isPaintedDoorNavbarBtnVariation) {
-    return (
-      <RecommendationsPaintedDoorBtn placement={placement} experimentVariation={experimentVariation} />
-    );
-  }
-
-  return null;
-};
-
-WidgetNavbar.propTypes = {
-  placement: PropTypes.oneOf([COLLAPSED_NAVBAR, EXPANDED_NAVBAR]).isRequired,
-};
-
-export default WidgetNavbar;

src/containers/WidgetContainers/WidgetNavbar/index.test.jsx

@@ -1,65 +0,0 @@
-import { shallow } from 'enzyme';
-import {
-  usePaintedDoorExperimentContext,
-} from '../../../widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
-import WidgetNavbar from './index';
-import { EXPANDED_NAVBAR } from '../../../widgets/RecommendationsPaintedDoorBtn/constants';
-import RecommendationsPaintedDoorBtn from '../../../widgets/RecommendationsPaintedDoorBtn';
-
-jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
-  usePaintedDoorExperimentContext: jest.fn(),
-}));
-
-describe('WidgetNavbar', () => {
-  let mockExperimentContext = {
-    experimentVariation: '',
-    isPaintedDoorNavbarBtnVariation: true,
-    experimentLoading: false,
-  };
-  const props = {
-    placement: EXPANDED_NAVBAR,
-  };
-
-  describe('snapshots', () => {
-    test('default', () => {
-      usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
-      const wrapper = shallow(<WidgetNavbar {...props} />);
-
-      expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-      expect(wrapper).toMatchSnapshot();
-    });
-  });
-
-  test('renders button if user in navbar variation', () => {
-    usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
-    const wrapper = shallow(<WidgetNavbar {...props} />);
-
-    expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-    expect(wrapper.type()).toBe(RecommendationsPaintedDoorBtn);
-  });
-
-  test('renders nothing if user in not in navbar variation', () => {
-    mockExperimentContext = {
-      ...mockExperimentContext,
-      isPaintedDoorNavbarBtnVariation: false,
-    };
-    usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
-    const wrapper = shallow(<WidgetNavbar {...props} />);
-
-    expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
-  });
-
-  test('renders nothing if experiment is loading', () => {
-    mockExperimentContext = {
-      ...mockExperimentContext,
-      isPaintedDoorNavbarBtnVariation: false,
-      experimentLoading: true,
-    };
-    usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
-    const wrapper = shallow(<WidgetNavbar {...props} />);
-
-    expect(usePaintedDoorExperimentContext).toHaveBeenCalled();
-    expect(wrapper.type()).toBeNull();
-  });
-});

src/data/services/lms/api.js

@@ -34,16 +34,16 @@ export const deleteEntitlementEnrollment = ({ uuid, isRefundable }) => client()
   );
 
 export const updateEmailSettings = ({ courseId, enable }) => post(
-  urls.updateEmailSettings(),
+  urls.updateEmailSettings,
   { [apiKeys.courseId]: courseId, ...(enable && enableEmailsAction) },
 );
 
 export const unenrollFromCourse = ({ courseId }) => post(
-  urls.courseUnenroll(),
+  urls.courseUnenroll,
   { [apiKeys.courseId]: courseId, ...unenrollmentAction },
 );
 
-export const logEvent = ({ eventName, data, courseId }) => post(urls.event(), {
+export const logEvent = ({ eventName, data, courseId }) => post(urls.event, {
   courserun_key: courseId,
   event_type: eventName,
   page: window.location.href,

src/data/services/lms/api.test.js

@@ -77,7 +77,7 @@ describe('lms api methods', () => {
         expect(
           api.updateEmailSettings({ courseId, enable: false }),
         ).toEqual(
-          utils.post(urls.updateEmailSettings(), { [apiKeys.courseId]: courseId }),
+          utils.post(urls.updateEmailSettings, { [apiKeys.courseId]: courseId }),
         );
       });
     });
@@ -87,7 +87,7 @@ describe('lms api methods', () => {
           api.updateEmailSettings({ courseId, enable: true }),
         ).toEqual(
           utils.post(
-            urls.updateEmailSettings(),
+            urls.updateEmailSettings,
             { [apiKeys.courseId]: courseId, ...enableEmailsAction },
           ),
         );
@@ -100,7 +100,7 @@ describe('lms api methods', () => {
         api.unenrollFromCourse({ courseId }),
       ).toEqual(
         utils.post(
-          urls.courseUnenroll(),
+          urls.courseUnenroll,
           { [apiKeys.courseId]: courseId, ...unenrollmentAction },
         ),
       );
@@ -116,7 +116,7 @@ describe('lms api methods', () => {
         expect(
           api.logEvent({ courseId, eventName, data }),
         ).toEqual(
-          utils.post(urls.event(), {
+          utils.post(urls.event, {
             courserun_key: courseId,
             event_type: eventName,
             page: href,

src/data/services/lms/fakeData/courses.js

@@ -761,13 +761,10 @@ export const compileCourseRunData = ({ courseName, ...data }, index) => {
     credit: {},
     ...data,
     certificate: genCertificateData(data.certificate),
-    enrollment: genEnrollmentData({
-      lastEnrolled,
-      ...getOption(emailOptions, index),
-      ...data.enrollment,
-    }),
+    enrollment: genEnrollmentData({ lastEnrolled, ...data.enrollment }),
     courseRun: genCourseRunData({
       ...data.courseRun,
+      ...getOption(emailOptions, index),
       courseId,
     }),
     course: {

src/data/services/lms/urls.js

@@ -10,9 +10,9 @@ export const getApiUrl = () => (`${getConfig().LMS_BASE_URL}/api`);
 
 const getInitApiUrl = () => (`${getApiUrl()}/learner_home/init`);
 
-const event = () => `${getBaseUrl()}/event`;
-const courseUnenroll = () => `${getBaseUrl()}/change_enrollment`;
-const updateEmailSettings = () => `${getApiUrl()}/change_email_settings`;
+const event = `${getBaseUrl()}/event`;
+const courseUnenroll = `${getBaseUrl()}/change_enrollment`;
+const updateEmailSettings = `${getApiUrl()}/change_email_settings`;
 const entitlementEnrollment = (uuid) => `${getApiUrl()}/entitlements/v1/entitlements/${uuid}/enrollments`;
 
 // if url is null or absolute, return it as is
@@ -22,7 +22,7 @@ export const baseAppUrl = (url) => updateUrl(getBaseUrl(), url);
 export const learningMfeUrl = (url) => updateUrl(getConfig().LEARNING_BASE_URL, url);
 
 // static view url
-const programsUrl = () => baseAppUrl('/dashboard/programs');
+const programsUrl = baseAppUrl('/dashboard/programs');
 
 export const creditPurchaseUrl = (courseId) => `${getEcommerceUrl()}/credit/checkout/${courseId}/`;
 export const creditRequestUrl = (providerId) => `${getApiUrl()}/credit/v1/providers/${providerId}/request/`;

src/i18n/messages/ar.json

@@ -19,7 +19,7 @@
   "learnerVariantDashboard.menu.profile.label": "الملف الشخصي",
   "learnerVariantDashboard.menu.viewPrograms.label": "عرض البرامج",
   "learnerVariantDashboard.menu.account.label": "الحساب",
-  "learnerVariantDashboard.menu.orderHistory.label": "Order History",
+  "learnerVariantDashboard.menu.ordersAndSubscriptions.label": "Orders & Subscriptions",
   "learnerVariantDashboard.menu.signOut.label": "تسجيل الخروج",
   "learnerVariantDashboard.course": "المساقات",
   "learnerVariantDashboard.program": "البرامج",
@@ -44,13 +44,6 @@
   "ProductRecommendations.bootcampDescription": "Intensive, hands-on, project based training",
   "ProductRecommendations.courseHeading": "Courses",
   "ProductRecommendations.courseDescription": "Find new interests and advance your career",
-  "RecommendationsPanel.recommendationsFeatureText": "Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.",
-  "RecommendationsPanel.recommendationsAlertText": "Would you like to be alerted when it becomes available?",
-  "RecommendationsPanel.recommendationsModalHeading": "Thank you for your interest!",
-  "RecommendationsPanel.modalSkipButton": "Skip for now",
-  "RecommendationsPanel.modalCountMeButton": "Count me in!",
-  "learnerVariantDashboard.recommendedForYou": "Recommended For You",
-  "RecommendationsPanel.seeAllRecommendationsButton": "See All Recommendations",
   "RecommendationsPanel.recommendationsHeading": "توصيات خاصة لك",
   "RecommendationsPanel.popularCoursesHeading": "المساقات الشائعة",
   "RecommendationsPanel.exploreCoursesButton": "استكشف المساقات"

src/i18n/messages/es_419.json

@@ -19,7 +19,7 @@
   "learnerVariantDashboard.menu.profile.label": "Perfil",
   "learnerVariantDashboard.menu.viewPrograms.label": "Ver programas",
   "learnerVariantDashboard.menu.account.label": "Cuenta",
-  "learnerVariantDashboard.menu.orderHistory.label": "Historial de órdenes",
+  "learnerVariantDashboard.menu.ordersAndSubscriptions.label": "Pedidos y Subscripciones",
   "learnerVariantDashboard.menu.signOut.label": "Cerrar sesión",
   "learnerVariantDashboard.course": "cursos",
   "learnerVariantDashboard.program": "Programas",
@@ -44,13 +44,6 @@
   "ProductRecommendations.bootcampDescription": "Capacitación intensiva, práctica y basada en proyectos",
   "ProductRecommendations.courseHeading": "Cursos",
   "ProductRecommendations.courseDescription": "Encontrar nuevos intereses y avanzar en la carrera",
-  "RecommendationsPanel.recommendationsFeatureText": "La función de recomendaciones personalizadas aún no está disponible. Estamos trabajando arduamente para llevarlo a casa de su alumno en un futuro próximo.",
-  "RecommendationsPanel.recommendationsAlertText": "¿Le gustaría recibir una alerta cuando esté disponible?",
-  "RecommendationsPanel.recommendationsModalHeading": "¡Gracias por su interés!",
-  "RecommendationsPanel.modalSkipButton": "Saltar por ahora ",
-  "RecommendationsPanel.modalCountMeButton": "¡Cuente conmigo!",
-  "learnerVariantDashboard.recommendedForYou": "Recomendado para usted",
-  "RecommendationsPanel.seeAllRecommendationsButton": "Ver todas las recomendaciones",
   "RecommendationsPanel.recommendationsHeading": "Recomendaciones para ti",
   "RecommendationsPanel.popularCoursesHeading": "Cursos populares",
   "RecommendationsPanel.exploreCoursesButton": "Explorar cursos"

src/i18n/messages/fr.json

@@ -19,7 +19,7 @@
   "learnerVariantDashboard.menu.profile.label": "Profil",
   "learnerVariantDashboard.menu.viewPrograms.label": "Voir les programmes",
   "learnerVariantDashboard.menu.account.label": "Compte",
-  "learnerVariantDashboard.menu.orderHistory.label": "Order History",
+  "learnerVariantDashboard.menu.ordersAndSubscriptions.label": "Orders & Subscriptions",
   "learnerVariantDashboard.menu.signOut.label": "Se déconnecter",
   "learnerVariantDashboard.course": "Cours",
   "learnerVariantDashboard.program": "Programmes",
@@ -44,13 +44,6 @@
   "ProductRecommendations.bootcampDescription": "Intensive, hands-on, project based training",
   "ProductRecommendations.courseHeading": "Courses",
   "ProductRecommendations.courseDescription": "Find new interests and advance your career",
-  "RecommendationsPanel.recommendationsFeatureText": "Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.",
-  "RecommendationsPanel.recommendationsAlertText": "Would you like to be alerted when it becomes available?",
-  "RecommendationsPanel.recommendationsModalHeading": "Thank you for your interest!",
-  "RecommendationsPanel.modalSkipButton": "Skip for now",
-  "RecommendationsPanel.modalCountMeButton": "Count me in!",
-  "learnerVariantDashboard.recommendedForYou": "Recommended For You",
-  "RecommendationsPanel.seeAllRecommendationsButton": "See All Recommendations",
   "RecommendationsPanel.recommendationsHeading": "Des recommandations pour vous",
   "RecommendationsPanel.popularCoursesHeading": "Cours populaires",
   "RecommendationsPanel.exploreCoursesButton": "Explorer les cours"

src/i18n/messages/fr_CA.json

@@ -1,6 +1,6 @@
 {
   "dashboard.mycourses": "Mes cours",
-  "Dashboard.NoCoursesView.lookingForChallengePrompt": "A la recherche d'un nouveau défi?",
+  "Dashboard.NoCoursesView.lookingForChallengePrompt": "A la recherche d'un nouveau défi ?",
   "Dashboard.NoCoursesView.exploreCoursesPrompt": "Explorez nos cours pour les ajouter à votre tableau de bord.",
   "Dashboard.NoCoursesView.exploreCoursesButton": "Explorer les cours",
   "Dashboard.NoCoursesView.bannerAlt": "Aucune bannière de cours",
@@ -9,7 +9,7 @@
   "leanerDashboard.enterpriseDialogDismissButton": "Rejeter",
   "leanerDashboard.enterpriseDialogConfirmButton": "Aller au tableau de bord",
   "leanerDashboard.confirmEmailBanner": "Confirmer maintenant",
-  "leanerDashboard.confirmEmailTextReminderBanner": "N'oubliez pas de confirmer votre courriel afin de pouvoir continuer à apprendre sur EDUlib! {confirmNowButton}.",
+  "leanerDashboard.confirmEmailTextReminderBanner": "N'oubliez pas de confirmer votre courriel afin de pouvoir continuer à apprendre sur edX ! {confirmNowButton}.",
   "leanerDashboard.verifiedConfirmEmailButton": "J'ai confirmé mon courriel",
   "leanerDashboard.confirmEmailModalHeader": "Confirmer votre courriel",
   "leanerDashboard.confirmEmailModalBody": "Nous vous avons envoyé un courriel pour vérifier votre compte. Veuillez vérifier votre boîte de réception et cliquer sur le gros bouton rouge pour confirmer et continuer à apprendre.",
@@ -19,12 +19,12 @@
   "learnerVariantDashboard.menu.profile.label": "Profil",
   "learnerVariantDashboard.menu.viewPrograms.label": "Voir les programmes",
   "learnerVariantDashboard.menu.account.label": "Compte",
-  "learnerVariantDashboard.menu.orderHistory.label": "Historique des commandes",
+  "learnerVariantDashboard.menu.ordersAndSubscriptions.label": "Commandes et abonnements",
   "learnerVariantDashboard.menu.signOut.label": "Se déconnecter",
   "learnerVariantDashboard.course": "Cours",
   "learnerVariantDashboard.program": "Programmes",
   "learnerVariantDashboard.discoverNew": "Découvrir les nouveautés",
-  "learnerVariantDashboard.logoAltText": "Tableau de bord EDUlib, Inc.",
+  "learnerVariantDashboard.logoAltText": "Tableau de bord edX, Inc.",
   "learnerVariantDashboard.collapseMenuOpenAltText": "Menu",
   "learnerVariantDashboard.collapseMenuClosedAltText": "Fermer",
   "leanerDashboard.menu.career.label": "Carrière",
@@ -35,7 +35,7 @@
   "MasqueradeBar.StudentNameInput": "Nom d'utilisateur ou courriel",
   "MasqueradeBar.NoStudentFound": "Aucun étudiant avec ce nom d'utilisateur ou cette adresse courriel n'a pu être trouvé",
   "MasqueradeBar.UnknownError": "Une erreur inconnue est survenue",
-  "WidgetSidebar.lookingForChallengePrompt": "A la recherche d'un nouveau défi?",
+  "WidgetSidebar.lookingForChallengePrompt": "A la recherche d'un nouveau défi ?",
   "WidgetSidebar.findCoursesButton": "Trouver un cours {arrow}",
   "ProductRecommendations.recommendationsHeading": "Vous pourriez aussi aimer",
   "ProductRecommendations.executiveEducationHeading": "Formation des cadres",
@@ -44,13 +44,6 @@
   "ProductRecommendations.bootcampDescription": "Formation intensive, pratique et basée sur des projets",
   "ProductRecommendations.courseHeading": "Cours",
   "ProductRecommendations.courseDescription": "Trouvez de nouveaux intérêts et faites progresser votre carrière",
-  "RecommendationsPanel.recommendationsFeatureText": "La fonctionnalité de recommandations personnalisées n'est pas encore disponible. Nous travaillons fort pour le proposer à votre apprenant dans un avenir rapproché.",
-  "RecommendationsPanel.recommendationsAlertText": "Souhaitez-vous être alerté dès qu'il sera disponible?",
-  "RecommendationsPanel.recommendationsModalHeading": "Merci pour votre intérêt!",
-  "RecommendationsPanel.modalSkipButton": "Ignorer pour l'instant",
-  "RecommendationsPanel.modalCountMeButton": "Comptez sur moi!",
-  "learnerVariantDashboard.recommendedForYou": "Recommandé pour vous",
-  "RecommendationsPanel.seeAllRecommendationsButton": "Voir toutes les recommandations",
   "RecommendationsPanel.recommendationsHeading": "Des recommandations pour vous",
   "RecommendationsPanel.popularCoursesHeading": "Cours populaires",
   "RecommendationsPanel.exploreCoursesButton": "Explorer les cours"

src/i18n/messages/pt_BR.json

@@ -19,7 +19,7 @@
   "learnerVariantDashboard.menu.profile.label": "Perfil",
   "learnerVariantDashboard.menu.viewPrograms.label": "View Programs",
   "learnerVariantDashboard.menu.account.label": "Conta",
-  "learnerVariantDashboard.menu.orderHistory.label": "Order History",
+  "learnerVariantDashboard.menu.ordersAndSubscriptions.label": "Orders & Subscriptions",
   "learnerVariantDashboard.menu.signOut.label": "Sair",
   "learnerVariantDashboard.course": "Cursos",
   "learnerVariantDashboard.program": "Programas",
@@ -44,13 +44,6 @@
   "ProductRecommendations.bootcampDescription": "Intensive, hands-on, project based training",
   "ProductRecommendations.courseHeading": "Courses",
   "ProductRecommendations.courseDescription": "Find new interests and advance your career",
-  "RecommendationsPanel.recommendationsFeatureText": "Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.",
-  "RecommendationsPanel.recommendationsAlertText": "Would you like to be alerted when it becomes available?",
-  "RecommendationsPanel.recommendationsModalHeading": "Thank you for your interest!",
-  "RecommendationsPanel.modalSkipButton": "Skip for now",
-  "RecommendationsPanel.modalCountMeButton": "Count me in!",
-  "learnerVariantDashboard.recommendedForYou": "Recommended For You",
-  "RecommendationsPanel.seeAllRecommendationsButton": "See All Recommendations",
   "RecommendationsPanel.recommendationsHeading": "Recommendations for you",
   "RecommendationsPanel.popularCoursesHeading": "Popular courses",
   "RecommendationsPanel.exploreCoursesButton": "Explorar cursos"

src/i18n/messages/zh_CN.json

@@ -19,7 +19,7 @@
   "learnerVariantDashboard.menu.profile.label": "Profile",
   "learnerVariantDashboard.menu.viewPrograms.label": "View Programs",
   "learnerVariantDashboard.menu.account.label": "Account",
-  "learnerVariantDashboard.menu.orderHistory.label": "Order History",
+  "learnerVariantDashboard.menu.ordersAndSubscriptions.label": "Orders & Subscriptions",
   "learnerVariantDashboard.menu.signOut.label": "Sign Out",
   "learnerVariantDashboard.course": "Courses",
   "learnerVariantDashboard.program": "Programs",
@@ -44,13 +44,6 @@
   "ProductRecommendations.bootcampDescription": "Intensive, hands-on, project based training",
   "ProductRecommendations.courseHeading": "Courses",
   "ProductRecommendations.courseDescription": "Find new interests and advance your career",
-  "RecommendationsPanel.recommendationsFeatureText": "Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.",
-  "RecommendationsPanel.recommendationsAlertText": "Would you like to be alerted when it becomes available?",
-  "RecommendationsPanel.recommendationsModalHeading": "Thank you for your interest!",
-  "RecommendationsPanel.modalSkipButton": "Skip for now",
-  "RecommendationsPanel.modalCountMeButton": "Count me in!",
-  "learnerVariantDashboard.recommendedForYou": "Recommended For You",
-  "RecommendationsPanel.seeAllRecommendationsButton": "See All Recommendations",
   "RecommendationsPanel.recommendationsHeading": "Recommendations for you",
   "RecommendationsPanel.popularCoursesHeading": "Popular courses",
   "RecommendationsPanel.exploreCoursesButton": "Explore courses"

src/index.jsx

@@ -4,14 +4,12 @@ import 'regenerator-runtime/runtime';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-  Route, Navigate, Routes,
-} from 'react-router-dom';
+import { Switch, Redirect } from 'react-router-dom';
 
 import {
   AppProvider,
   ErrorPage,
-  PageWrap,
+  PageRoute,
 } from '@edx/frontend-platform/react';
 import store from 'data/store';
 import {
@@ -33,10 +31,12 @@ subscribe(APP_READY, () => {
   ReactDOM.render(
     <AppProvider store={store}>
       <NoticesWrapper>
-        <Routes>
-          <Route path="/" element={<PageWrap><App /></PageWrap>} />
-          <Route path="*" element={<Navigate to="/" replace />} />
-        </Routes>
+        <Switch>
+          <PageRoute path="/">
+            <App />
+          </PageRoute>
+          <Redirect to="/" />
+        </Switch>
       </NoticesWrapper>
     </AppProvider>,
     document.getElementById('root'),

src/setupTest.jsx

@@ -3,7 +3,7 @@ import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
 
 import Enzyme from 'enzyme';
-import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Adapter from 'enzyme-adapter-react-16';
 
 Enzyme.configure({ adapter: new Adapter() });
 

src/widgets/LookingForChallengeWidget/index.jsx

@@ -8,7 +8,7 @@ import { reduxHooks } from 'hooks';
 import moreCoursesSVG from 'assets/more-courses-sidewidget.svg';
 import { baseAppUrl } from 'data/services/lms/urls';
 
-import track from '../RecommendationsPanel/track';
+import track, { trackRecommendationUnavailable } from '../RecommendationsPanel/track';
 import messages from './messages';
 import './index.scss';
 
@@ -17,6 +17,11 @@ export const arrowIcon = (<Icon className="mx-1" src={ArrowForward} />);
 export const LookingForChallengeWidget = () => {
   const { formatMessage } = useIntl();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
+
+  React.useEffect(() => {
+    trackRecommendationUnavailable();
+  }, []);
+
   return (
     <Card orientation="horizontal" id="looking-for-challenge-widget">
       <Card.ImageCap

src/widgets/LookingForChallengeWidget/index.test.jsx

@@ -1,6 +1,8 @@
 import { shallow } from 'enzyme';
 
+import React from 'react';
 import LookingForChallengeWidget from '.';
+import { trackRecommendationUnavailable } from '../RecommendationsPanel/track';
 
 jest.mock('hooks', () => ({
   reduxHooks: {
@@ -12,6 +14,7 @@ jest.mock('hooks', () => ({
 
 jest.mock('../RecommendationsPanel/track', () => ({
   findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
+  trackRecommendationUnavailable: jest.fn(),
 }));
 
 describe('LookingForChallengeWidget', () => {
@@ -21,4 +24,10 @@ describe('LookingForChallengeWidget', () => {
       expect(wrapper).toMatchSnapshot();
     });
   });
+  test('test recommendations unavailable event is fired', () => {
+    shallow(<LookingForChallengeWidget />);
+    const [cb] = React.useEffect.mock.calls[0];
+    cb();
+    expect(trackRecommendationUnavailable).toBeCalled();
+  });
 });

src/widgets/ProductRecommendations/api.js

@@ -1,9 +1,9 @@
 import { get, stringifyUrl } from 'data/services/lms/utils';
 import urls from 'data/services/lms/urls';
 
-export const crossProductAndAmplitudeRecommendationsUrl = (courseId) => `${urls.getApiUrl()}/edx_recommendations/learner_dashboard/cross_product/${courseId}/`;
-export const amplitudeRecommendationsUrl = () => `${urls.getApiUrl()}/edx_recommendations/learner_dashboard/amplitude/v2/`;
-export const recommendationsContextUrl = () => `${urls.getApiUrl()}/edx_recommendations/learner_dashboard/recommendations_context/`;
+export const crossProductAndAmplitudeRecommendationsUrl = (courseId) => `${urls.getApiUrl()}/learner_recommendations/product_recommendations/${courseId}/`;
+export const amplitudeRecommendationsUrl = () => `${urls.getApiUrl()}/learner_recommendations/product_recommendations/`;
+export const recommendationsContextUrl = () => `${urls.getApiUrl()}/learner_recommendations/recommendations_context/`;
 
 const fetchRecommendationsContext = () => get(stringifyUrl(recommendationsContextUrl()));
 

src/widgets/ProductRecommendations/components/ProductCardHeader.jsx

@@ -5,7 +5,6 @@ import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import { Icon, Hyperlink } from '@edx/paragon';
 import { ChevronRight } from '@edx/paragon/icons';
-import { getConfig } from '@edx/frontend-platform';
 import { trackProductHeaderClicked } from '../optimizelyExperiment';
 import { recommendationsHeaderClicked } from '../track';
 import { executiveEducation, bootCamp } from '../constants';
@@ -45,7 +44,7 @@ const ProductCardHeader = ({ courseType }) => {
 
   const { formatMessage } = useIntl();
   const productTypeDetail = getProductTypeDetail(courseType);
-  const headerUrl = `${getConfig().MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
+  const headerUrl = `${process.env.MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
 
   return (
     <div>

src/widgets/ProductRecommendations/optimizely.js

@@ -1,8 +1,6 @@
 import { createInstance, setLogLevel } from '@optimizely/react-sdk';
 
-import { getConfig } from '@edx/frontend-platform';
-
-const OPTIMIZELY_SDK_KEY = getConfig().OPTIMIZELY_FULL_STACK_SDK_KEY;
+const OPTIMIZELY_SDK_KEY = process.env.OPTIMIZELY_FULL_STACK_SDK_KEY;
 
 const configureClient = () => {
   setLogLevel('error');

src/widgets/ProductRecommendations/optimizely.test.js

@@ -6,10 +6,6 @@ jest.mock('@optimizely/react-sdk', () => ({
   setLogLevel: jest.fn(),
 }));
 
-jest.mock('@edx/frontend-platform', () => ({
-  getConfig: jest.fn(() => ({ OPTIMIZELY_FULL_STACK_SDK_KEY: 'SDK Key' })),
-}));
-
 describe('optimizelyClient', () => {
   it('should configure an Optimizely client instance with the correct SDK key', () => {
     expect(optimizelyClient).toBeDefined();

src/widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext.test.jsx

@@ -1,151 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import { MockUseState } from 'testUtils';
-
-import * as experiment from './PaintedDoorExperimentContext';
-import { useEmailConfirmationData, useHasAvailableDashboards, useRequestIsPending } from '../../data/redux/hooks';
-import { trackPaintedDoorVariationGroup } from './track';
-import { useIsEnterpriseUser } from './PaintedDoorExperimentContext';
-
-const state = new MockUseState(experiment);
-trackPaintedDoorVariationGroup();
-jest.unmock('react');
-jest.spyOn(React, 'useEffect').mockImplementation((cb, prereqs) => ({ useEffect: { cb, prereqs } }));
-
-jest.mock('../../data/redux/hooks', () => ({
-  useRequestIsPending: jest.fn(),
-  useHasAvailableDashboards: jest.fn(),
-  useEmailConfirmationData: jest.fn(),
-}));
-jest.mock('./track', () => ({
-  trackPaintedDoorVariationGroup: jest.fn(),
-}));
-
-describe('useIsEnterpriseUser hook', () => {
-  describe('state fields', () => {
-    state.testGetter(state.keys.enterpriseUser);
-  });
-  describe('useIsEnterpriseUser', () => {
-    beforeEach(() => {
-      state.mock();
-      useRequestIsPending.mockReturnValueOnce(false);
-      useEmailConfirmationData.mockReturnValueOnce({ confirmed: true });
-    });
-    it('initializes enterpriseUser', () => {
-      useIsEnterpriseUser();
-      state.expectInitializedWith(state.keys.enterpriseUser, {
-        isEnterpriseUser: false,
-        isLoading: true,
-      });
-    });
-    it('get isEnterpriseUser false if useHasAvailableDashboards return false', () => {
-      useHasAvailableDashboards.mockReturnValueOnce(false);
-
-      state.mockVal(state.keys.enterpriseUser, {
-        isEnterpriseUser: false,
-        isLoading: false,
-      });
-
-      const enterpriseUser = useIsEnterpriseUser();
-      const [cb] = React.useEffect.mock.calls[0];
-      cb();
-
-      expect(enterpriseUser.isEnterpriseUser).toEqual(false);
-      expect(enterpriseUser.isLoading).toEqual(false);
-    });
-    it('get isEnterpriseUser true if useHasAvailableDashboards return true', () => {
-      useHasAvailableDashboards.mockReturnValueOnce(true);
-
-      state.mockVal(state.keys.enterpriseUser, {
-        isEnterpriseUser: true,
-        isLoading: false,
-      });
-
-      const enterpriseUser = useIsEnterpriseUser();
-      const [cb] = React.useEffect.mock.calls[0];
-      cb();
-
-      expect(enterpriseUser.isEnterpriseUser).toEqual(true);
-      expect(enterpriseUser.isLoading).toEqual(false);
-    });
-  });
-});
-
-describe('Painted door experiments context', () => {
-  beforeEach(() => {
-    jest.resetAllMocks();
-  });
-
-  describe('PaintedDoorExperimentProvider', () => {
-    const { PaintedDoorExperimentProvider } = experiment;
-
-    const TestComponent = () => {
-      const {
-        experimentVariation,
-        isPaintedDoorNavbarBtnVariation,
-        isPaintedDoorWidgetBtnVariation,
-        isPaintedDoorControlVariation,
-        experimentLoading,
-      } = experiment.usePaintedDoorExperimentContext();
-
-      expect(experimentVariation).toEqual('');
-      expect(isPaintedDoorNavbarBtnVariation).toBe(false);
-      expect(isPaintedDoorWidgetBtnVariation).toBe(false);
-      expect(isPaintedDoorControlVariation).toBe(false);
-      expect(experimentLoading).toBe(true);
-
-      return (
-        <div />
-      );
-    };
-
-    it('test experiment gets activated for non enterprise users', () => {
-      state.mock();
-      jest.useFakeTimers();
-      useRequestIsPending.mockReturnValueOnce(false);
-      useHasAvailableDashboards.mockReturnValueOnce(false);
-      useEmailConfirmationData.mockReturnValueOnce({ confirmed: true });
-
-      state.mockVal(state.keys.enterpriseUser, {
-        isEnterpriseUser: false,
-        isLoading: false,
-      });
-
-      mount(
-        <PaintedDoorExperimentProvider>
-          <TestComponent />
-        </PaintedDoorExperimentProvider>,
-      );
-      const [cb] = React.useEffect.mock.calls[1];
-      cb();
-      jest.advanceTimersByTime(500);
-
-      expect(trackPaintedDoorVariationGroup).toHaveBeenCalledTimes(1);
-    });
-
-    it('test experiment does not get activated for enterprise users', () => {
-      state.mock();
-      jest.useFakeTimers();
-      useRequestIsPending.mockReturnValueOnce(false);
-      useHasAvailableDashboards.mockReturnValueOnce(true);
-      useEmailConfirmationData.mockReturnValueOnce({ confirmed: true });
-
-      state.mockVal(state.keys.enterpriseUser, {
-        isEnterpriseUser: true,
-        isLoading: false,
-      });
-
-      mount(
-        <PaintedDoorExperimentProvider>
-          <TestComponent />
-        </PaintedDoorExperimentProvider>,
-      );
-      const [cb] = React.useEffect.mock.calls[1];
-      cb();
-      jest.advanceTimersByTime(500);
-
-      expect(trackPaintedDoorVariationGroup).toHaveBeenCalledTimes(0);
-    });
-  });
-});

src/widgets/RecommendationsPaintedDoorBtn/__snapshots__/index.test.jsx.snap

@@ -1,14 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RecommendationsPaintedDoorBtn matches snapshot 1`] = `
-<Fragment>
-  <RecommendationsPanelButton
-    handleClick={[Function]}
-  />
-  <ModalView
-    isOpen={false}
-    onClose={[MockFunction]}
-    variation=""
-  />
-</Fragment>
-`;

src/widgets/RecommendationsPaintedDoorBtn/components/NavbarButton.jsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { Button } from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import messages from '../messages';
-import { COLLAPSED_NAVBAR, EXPANDED_NAVBAR } from '../constants';
-
-export const NavbarButton = ({ placement, handleClick }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Button
-      as="a"
-      className={classNames({
-        'p-4': placement === EXPANDED_NAVBAR,
-      })}
-      variant="inverse-primary"
-      onClick={handleClick}
-    >
-      {formatMessage(messages.recommendedForYou)}
-    </Button>
-  );
-};
-
-NavbarButton.propTypes = {
-  placement: PropTypes.oneOf([COLLAPSED_NAVBAR, EXPANDED_NAVBAR]).isRequired,
-  handleClick: PropTypes.func.isRequired,
-};
-
-export default NavbarButton;

src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { StrictDict } from 'utils';
-
-import * as module from './hooks';
-
-export const state = StrictDict({
-  isModalOpen: (val) => React.useState(val), // eslint-disable-line
-});
-
-export const usePaintedDoorModal = () => {
-  const [isModalOpen, setIsModalOpen] = module.state.isModalOpen(false);
-  const toggleModal = () => setIsModalOpen(!isModalOpen);
-
-  return {
-    isModalOpen,
-    toggleModal,
-  };
-};

src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.test.js

@@ -1,30 +0,0 @@
-import { MockUseState } from 'testUtils';
-
-import * as hooks from './hooks';
-
-const state = new MockUseState(hooks);
-
-const {
-  usePaintedDoorModal,
-} = hooks;
-
-describe('LearnerDashboardHeader hooks', () => {
-  describe('state fields', () => {
-    state.testGetter(state.keys.isModalOpen);
-  });
-  describe('useRecommendationsModal', () => {
-    beforeEach(() => {
-      state.mock();
-    });
-    it('initializes isModalOpen with false', () => {
-      usePaintedDoorModal();
-      state.expectInitializedWith(state.keys.isModalOpen, false);
-    });
-    test('change isModalOpen value on toggle', () => {
-      const out = usePaintedDoorModal();
-      state.expectInitializedWith(state.keys.isModalOpen, false);
-      out.toggleModal();
-      expect(state.values.isModalOpen).toEqual(true);
-    });
-  });
-});

src/widgets/RecommendationsPaintedDoorBtn/components/RecommendationsPanelButton.jsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Button } from '@edx/paragon';
-import { useIntl } from '@edx/frontend-platform/i18n';
-import PropTypes from 'prop-types';
-import messages from '../messages';
-
-export const RecommendationsPanelButton = ({ handleClick }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <Button
-      as="a"
-      variant="brand"
-      onClick={handleClick}
-    >
-      {formatMessage(messages.seeAllRecommendationsButton)}
-    </Button>
-  );
-};
-
-RecommendationsPanelButton.propTypes = {
-  handleClick: PropTypes.func.isRequired,
-};
-
-export default RecommendationsPanelButton;

src/widgets/RecommendationsPaintedDoorBtn/constants.js

@@ -1,3 +0,0 @@
-export const COLLAPSED_NAVBAR = 'collapsedNavbar';
-export const EXPANDED_NAVBAR = 'expendedNavbar';
-export const RECOMMENDATIONS_PANEL = 'recommendationsPanel';

src/widgets/RecommendationsPaintedDoorBtn/index.jsx

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import NavbarButton from './components/NavbarButton';
-import PaintedDoorModal from './components/PaintedDoorModal';
-import { usePaintedDoorModal } from './components/PaintedDoorModal/hooks';
-import { COLLAPSED_NAVBAR, EXPANDED_NAVBAR, RECOMMENDATIONS_PANEL } from './constants';
-import RecommendationsPanelButton from './components/RecommendationsPanelButton';
-import { trackPaintedDoorRecommendationHomeBtnClicked } from './track';
-
-export const RecommendationsPaintedDoorBtn = ({ placement, experimentVariation }) => {
-  const { isModalOpen, toggleModal } = usePaintedDoorModal();
-
-  const handleClick = () => {
-    toggleModal();
-    trackPaintedDoorRecommendationHomeBtnClicked(experimentVariation);
-  };
-
-  const getPaintedDoorButton = () => {
-    if ([COLLAPSED_NAVBAR, EXPANDED_NAVBAR].includes(placement)) {
-      return (
-        <NavbarButton handleClick={handleClick} placement={placement} />
-      );
-    } if (placement === RECOMMENDATIONS_PANEL) {
-      return (
-        <RecommendationsPanelButton handleClick={handleClick} />
-      );
-    }
-    return null;
-  };
-
-  return (
-    <>
-      {getPaintedDoorButton()}
-      <PaintedDoorModal isOpen={isModalOpen} onClose={toggleModal} variation={experimentVariation} />
-    </>
-  );
-};
-
-RecommendationsPaintedDoorBtn.propTypes = {
-  placement: PropTypes.oneOf([COLLAPSED_NAVBAR, EXPANDED_NAVBAR, RECOMMENDATIONS_PANEL]).isRequired,
-  experimentVariation: PropTypes.string.isRequired,
-};
-
-export default RecommendationsPaintedDoorBtn;

src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { Button, ModalDialog } from '@edx/paragon';
-import RecommendationsPaintedDoorBtn from './index';
-import { EXPANDED_NAVBAR, RECOMMENDATIONS_PANEL } from './constants';
-import NavbarButton from './components/NavbarButton';
-import RecommendationsPanelButton from './components/RecommendationsPanelButton';
-import { trackPaintedDoorRecommendationHomeBtnClicked } from './track';
-
-jest.mock('./components/PaintedDoorModal/hooks', () => ({
-  usePaintedDoorModal: jest.fn(() => ({
-    isModalOpen: false,
-    toggleModal: jest.fn(),
-  })),
-}));
-
-jest.mock('./track', () => ({
-  trackPaintedDoorRecommendationHomeBtnClicked: jest.fn(),
-}));
-
-describe('RecommendationsPaintedDoorBtn', () => {
-  let props = {
-    placement: RECOMMENDATIONS_PANEL,
-    experimentVariation: '',
-  };
-
-  it('matches snapshot', () => {
-    expect(shallow(<RecommendationsPaintedDoorBtn {...props} />)).toMatchSnapshot();
-  });
-
-  it('renders painted door modal', () => {
-    const wrapper = shallow(<RecommendationsPaintedDoorBtn {...props} />);
-
-    expect(wrapper.find(ModalDialog)).toBeTruthy();
-  });
-
-  it('renders painted door navbar button', () => {
-    props = {
-      ...props,
-      placement: EXPANDED_NAVBAR,
-    };
-    const wrapper = shallow(<RecommendationsPaintedDoorBtn {...props} />);
-
-    expect(wrapper.find(NavbarButton).exists()).toBe(true);
-    expect(wrapper.find(RecommendationsPanelButton).exists()).toBe(false);
-  });
-
-  it('renders painted door recommendations panel button', () => {
-    props = {
-      ...props,
-      placement: RECOMMENDATIONS_PANEL,
-    };
-    const wrapper = shallow(<RecommendationsPaintedDoorBtn {...props} />);
-
-    expect(wrapper.find(NavbarButton).exists()).toBe(false);
-    expect(wrapper.find(RecommendationsPanelButton).exists()).toBe(true);
-  });
-
-  it('test no button (null) rendered for invalid placement', () => {
-    props = {
-      ...props,
-      placement: '',
-    };
-    const wrapper = shallow(<RecommendationsPaintedDoorBtn {...props} />);
-
-    expect(wrapper.find(NavbarButton).exists()).toBe(false);
-    expect(wrapper.find(RecommendationsPanelButton).exists()).toBe(false);
-  });
-
-  it('test track event is fired on navbar button click', () => {
-    props = {
-      ...props,
-      placement: EXPANDED_NAVBAR,
-    };
-    const wrapper = mount(<RecommendationsPaintedDoorBtn {...props} />);
-    const navbarButton = wrapper.find(NavbarButton);
-
-    navbarButton.find(Button).simulate('click');
-
-    expect(trackPaintedDoorRecommendationHomeBtnClicked).toHaveBeenCalled();
-  });
-
-  it('test track event is fired on recommendations panel button click', () => {
-    props = {
-      ...props,
-      placement: RECOMMENDATIONS_PANEL,
-    };
-    const wrapper = mount(<RecommendationsPaintedDoorBtn {...props} />);
-    const navbarButton = wrapper.find(RecommendationsPanelButton);
-
-    navbarButton.find(Button).simulate('click');
-
-    expect(trackPaintedDoorRecommendationHomeBtnClicked).toHaveBeenCalled();
-  });
-});

src/widgets/RecommendationsPaintedDoorBtn/track.test.js

@@ -1,58 +0,0 @@
-import { createEventTracker } from 'data/services/segment/utils';
-import {
-  eventNames,
-  trackPaintedDoorRecommendationHomeBtnClicked,
-  trackPaintedDoorVariationGroup,
-  trackPaintedDoorRecommendationHomeSkipBtnClicked,
-  trackPaintedDoorRecommendationHomeInterestBtnClicked,
-} from './track';
-
-jest.mock('data/services/segment/utils', () => ({
-  createEventTracker: jest.fn(() => () => {}),
-}));
-
-const TEST_VARIATION = 'testVariation';
-
-describe('Recommendations Painted Door experiment trackers', () => {
-  it('test creates an event tracker for painted door variation group', () => {
-    trackPaintedDoorVariationGroup(TEST_VARIATION);
-    expect(createEventTracker).toHaveBeenCalledWith(
-      eventNames.variationGroup,
-      {
-        variation: TEST_VARIATION,
-        page: 'dashboard',
-      },
-    );
-  });
-
-  it('test creates an event tracker for painted door button click', () => {
-    trackPaintedDoorRecommendationHomeBtnClicked(TEST_VARIATION);
-    expect(createEventTracker).toHaveBeenCalledWith(
-      eventNames.recommendationHomeBtnClicked,
-      {
-        variation: TEST_VARIATION,
-        page: 'dashboard',
-      },
-    );
-  });
-
-  it('test creates an event tracker for painted door skip button click', () => {
-    trackPaintedDoorRecommendationHomeSkipBtnClicked(TEST_VARIATION);
-    expect(createEventTracker).toHaveBeenCalledWith(
-      eventNames.recommendationHomeModalSkipBtnClicked,
-      {
-        variation: TEST_VARIATION,
-      },
-    );
-  });
-
-  it('test creates an event tracker for painted door interest button click', () => {
-    trackPaintedDoorRecommendationHomeInterestBtnClicked(TEST_VARIATION);
-    expect(createEventTracker).toHaveBeenCalledWith(
-      eventNames.recommendationHomeModalInterestBtnClicked,
-      {
-        variation: TEST_VARIATION,
-      },
-    );
-  });
-});

src/widgets/RecommendationsPanel/LoadedView.jsx

@@ -10,11 +10,12 @@ import { reduxHooks } from 'hooks';
 import track from './track';
 import CourseCard from './components/CourseCard';
 import messages from './messages';
+import ModalView from '../../components/ModalView';
 
 import './index.scss';
-import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
-import { RECOMMENDATIONS_PANEL } from '../RecommendationsPaintedDoorBtn/constants';
-import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
+import usePaintedDoorExperimentContext from '../../RecsPaintedDoorExpContext';
+import { useRecommendationsModal } from '../../components/ModalView/hooks';
+import { trackPaintedDoorRecommendationHomeBtnClicked } from './recsPaintedDoorExpTrack';
 
 export const LoadedView = ({
   courses,
@@ -22,42 +23,61 @@ export const LoadedView = ({
 }) => {
   const { formatMessage } = useIntl();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
+  const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal();
+
   const {
     experimentVariation,
     isPaintedDoorWidgetBtnVariation,
     experimentLoading,
   } = usePaintedDoorExperimentContext();
 
+  const handleSeeAllRecommendationsClick = () => {
+    toggleRecommendationsModal();
+    trackPaintedDoorRecommendationHomeBtnClicked(experimentVariation);
+  };
+
   return (
-    <div className="p-4 w-100 panel-background">
-      <h3 className="pb-2">{isControl === false
-        ? formatMessage(messages.recommendationsHeading) : formatMessage(messages.popularCoursesHeading)}
-      </h3>
-      <div>
-        {courses.map((course) => (
-          <CourseCard
-            key={course.courseKey}
-            course={course}
-            isControl={isControl}
-          />
-        ))}
+    <>
+      <div className="p-4 w-100 panel-background">
+        <h3 className="pb-2">{isControl === false
+          ? formatMessage(messages.recommendationsHeading) : formatMessage(messages.popularCoursesHeading)}
+        </h3>
+        <div>
+          {courses.map((course) => (
+            <CourseCard
+              key={course.courseKey}
+              course={course}
+              isControl={isControl}
+            />
+          ))}
+        </div>
+        <div className="text-center explore-courses-btn">
+          {!experimentLoading && isPaintedDoorWidgetBtnVariation ? (
+            <Button
+              variant="brand"
+              onClick={handleSeeAllRecommendationsClick}
+            >
+              {formatMessage(messages.seeAllRecommendationsButton)}
+            </Button>
+          ) : (
+            <Button
+              variant="tertiary"
+              iconBefore={Search}
+              as="a"
+              href={baseAppUrl(courseSearchUrl)}
+              onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
+            >
+              {formatMessage(messages.exploreCoursesButton)}
+            </Button>
+          )}
+        </div>
       </div>
-      <div className="text-center explore-courses-btn">
-        {!experimentLoading && isPaintedDoorWidgetBtnVariation ? (
-          <RecommendationsPaintedDoorBtn placement={RECOMMENDATIONS_PANEL} experimentVariation={experimentVariation} />
-        ) : (
-          <Button
-            variant="tertiary"
-            iconBefore={Search}
-            as="a"
-            href={baseAppUrl(courseSearchUrl)}
-            onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
-          >
-            {formatMessage(messages.exploreCoursesButton)}
-          </Button>
-        )}
-      </div>
-    </div>
+      <ModalView
+        isOpen={isRecommendationsModalOpen}
+        onClose={toggleRecommendationsModal}
+        variation={experimentVariation}
+      />
+    </>
   );
 };
 

src/widgets/RecommendationsPanel/LoadedView.test.jsx

@@ -1,12 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { Button } from '@edx/paragon';
 import LoadedView from './LoadedView';
 import mockData from './mockData';
 import messages from './messages';
-import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
-import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
 
 jest.mock('hooks', () => ({
   reduxHooks: {
@@ -22,62 +19,30 @@ jest.mock('./track', () => ({
   findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
 }));
 jest.mock('./components/CourseCard', () => 'CourseCard');
-jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
-  usePaintedDoorExperimentContext: jest.fn(),
+jest.mock('../../components/ModalView/hooks', () => ({
+  useRecommendationsModal: jest.fn(() => ({
+    isRecommendationsModalOpen: false,
+    toggleRecommendationsModal: jest.fn(),
+  })),
 }));
 
 describe('RecommendationsPanel LoadedView', () => {
   const props = {
     courses: mockData.courses,
     isControl: null,
+    setIsRecommendationsModalOpen: () => {},
+    isRecommendationsModalOpen: false,
   };
-  let mockExperimentContext = {
-    experimentVariation: '',
-    isPaintedDoorWidgetBtnVariation: true,
-    experimentLoading: false,
-  };
-  describe('RecommendationPanelLoadedView', () => {
+  describe('snapshot', () => {
     test('without personalize recommendation', () => {
-      usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
       const el = shallow(<LoadedView {...props} />);
       expect(el).toMatchSnapshot();
       expect(el.find('h3').text()).toEqual(messages.popularCoursesHeading.defaultMessage);
     });
-
     test('with personalize recommendation', () => {
-      usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
       const el = shallow(<LoadedView {...props} isControl={false} />);
       expect(el).toMatchSnapshot();
       expect(el.find('h3').text()).toEqual(messages.recommendationsHeading.defaultMessage);
     });
-
-    test('test painted door button is rendered if user is in variation', () => {
-      usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
-      const wrapper = shallow(<LoadedView {...props} />);
-      expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toEqual(true);
-    });
-
-    test('test explore courses button is returned if user is not in variation', () => {
-      mockExperimentContext = {
-        ...mockExperimentContext,
-        isPaintedDoorWidgetBtnVariation: false,
-      };
-      usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
-      const wrapper = shallow(<LoadedView {...props} />);
-      expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toEqual(false);
-      expect(wrapper.find(Button).text()).toEqual(messages.exploreCoursesButton.defaultMessage);
-    });
-
-    test('test explore courses button is returned if experiment is loading', () => {
-      mockExperimentContext = {
-        ...mockExperimentContext,
-        isPaintedDoorWidgetBtnVariation: false,
-        experimentLoading: true,
-      };
-      usePaintedDoorExperimentContext.mockReturnValueOnce(mockExperimentContext);
-      const wrapper = shallow(<LoadedView {...props} />);
-      expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toEqual(false);
-      expect(wrapper.find(Button).text()).toEqual(messages.exploreCoursesButton.defaultMessage);
-    });
   });
 });

src/widgets/RecommendationsPanel/__snapshots__/LoadedView.test.jsx.snap

@@ -1,141 +1,163 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RecommendationsPanel LoadedView RecommendationPanelLoadedView with personalize recommendation 1`] = `
-<div
-  className="p-4 w-100 panel-background"
->
-  <h3
-    className="pb-2"
-  >
-    Recommendations for you
-  </h3>
-  <div>
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-1",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 1",
-        }
-      }
-      isControl={false}
-      key="cs-1"
-    />
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-2",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 2 with a really really really long name for some reason",
-        }
-      }
-      isControl={false}
-      key="cs-2"
-    />
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-3",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 3",
-        }
-      }
-      isControl={false}
-      key="cs-3"
-    />
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-4",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 4",
-        }
-      }
-      isControl={false}
-      key="cs-4"
-    />
-  </div>
+exports[`RecommendationsPanel LoadedView snapshot with personalize recommendation 1`] = `
+<Fragment>
   <div
-    className="text-center explore-courses-btn"
+    className="p-4 w-100 panel-background"
   >
-    <RecommendationsPaintedDoorBtn
-      experimentVariation=""
-      placement="recommendationsPanel"
-    />
+    <h3
+      className="pb-2"
+    >
+      Recommendations for you
+    </h3>
+    <div>
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-1",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 1",
+          }
+        }
+        isControl={false}
+        key="cs-1"
+      />
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-2",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 2 with a really really really long name for some reason",
+          }
+        }
+        isControl={false}
+        key="cs-2"
+      />
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-3",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 3",
+          }
+        }
+        isControl={false}
+        key="cs-3"
+      />
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-4",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 4",
+          }
+        }
+        isControl={false}
+        key="cs-4"
+      />
+    </div>
+    <div
+      className="text-center explore-courses-btn"
+    >
+      <Button
+        as="a"
+        href="http://localhost:18000/course-search-url"
+        iconBefore={[MockFunction icons.Search]}
+        onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
+        variant="tertiary"
+      >
+        Explore courses
+      </Button>
+    </div>
   </div>
-</div>
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+  />
+</Fragment>
 `;
 
-exports[`RecommendationsPanel LoadedView RecommendationPanelLoadedView without personalize recommendation 1`] = `
-<div
-  className="p-4 w-100 panel-background"
->
-  <h3
-    className="pb-2"
-  >
-    Popular courses
-  </h3>
-  <div>
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-1",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 1",
-        }
-      }
-      isControl={null}
-      key="cs-1"
-    />
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-2",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 2 with a really really really long name for some reason",
-        }
-      }
-      isControl={null}
-      key="cs-2"
-    />
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-3",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 3",
-        }
-      }
-      isControl={null}
-      key="cs-3"
-    />
-    <CourseCard
-      course={
-        Object {
-          "courseKey": "cs-4",
-          "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
-          "marketingUrl": "www.edx/recommended-course",
-          "title": "Recommended course 4",
-        }
-      }
-      isControl={null}
-      key="cs-4"
-    />
-  </div>
+exports[`RecommendationsPanel LoadedView snapshot without personalize recommendation 1`] = `
+<Fragment>
   <div
-    className="text-center explore-courses-btn"
+    className="p-4 w-100 panel-background"
   >
-    <RecommendationsPaintedDoorBtn
-      experimentVariation=""
-      placement="recommendationsPanel"
-    />
+    <h3
+      className="pb-2"
+    >
+      Popular courses
+    </h3>
+    <div>
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-1",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 1",
+          }
+        }
+        isControl={null}
+        key="cs-1"
+      />
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-2",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 2 with a really really really long name for some reason",
+          }
+        }
+        isControl={null}
+        key="cs-2"
+      />
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-3",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 3",
+          }
+        }
+        isControl={null}
+        key="cs-3"
+      />
+      <CourseCard
+        course={
+          Object {
+            "courseKey": "cs-4",
+            "logoImageUrl": "https://prod-discovery.edx-cdn.org/media/programs/banner_images/9a310b98-8f27-439e-be85-12d6460245c9-f2efca129273.small.jpg",
+            "marketingUrl": "www.edx/recommended-course",
+            "title": "Recommended course 4",
+          }
+        }
+        isControl={null}
+        key="cs-4"
+      />
+    </div>
+    <div
+      className="text-center explore-courses-btn"
+    >
+      <Button
+        as="a"
+        href="http://localhost:18000/course-search-url"
+        iconBefore={[MockFunction icons.Search]}
+        onClick={[MockFunction track.findCoursesWidgetClicked('http://localhost:18000/course-search-url')]}
+        variant="tertiary"
+      >
+        Explore courses
+      </Button>
+    </div>
   </div>
-</div>
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+  />
+</Fragment>
 `;

src/widgets/RecommendationsPanel/api.js

@@ -2,7 +2,7 @@ import { StrictDict } from 'utils';
 import { get, stringifyUrl } from 'data/services/lms/utils';
 import urls from 'data/services/lms/urls';
 
-export const getFetchUrl = () => (`${urls.getApiUrl()}/edx_recommendations/learner_dashboard/amplitude/`);
+export const getFetchUrl = () => (`${urls.getApiUrl()}/learner_recommendations/courses/`);
 export const apiKeys = StrictDict({ user: 'user' });
 
 const fetchRecommendedCourses = () => get(stringifyUrl(getFetchUrl()));

src/widgets/RecommendationsPanel/components/index.scss

@@ -23,7 +23,7 @@
     }
   }
   .pgn__card-section {
-    padding: 0 !important;
+    padding: 0;
   }
   margin-top: 0.313rem;
 }

src/widgets/RecommendationsPanel/index.jsx

@@ -4,9 +4,6 @@ import LookingForChallengeWidget from 'widgets/LookingForChallengeWidget';
 import LoadingView from './LoadingView';
 import LoadedView from './LoadedView';
 import hooks from './hooks';
-import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
-import { RECOMMENDATIONS_PANEL } from '../RecommendationsPaintedDoorBtn/constants';
-import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
 
 export const RecommendationsPanel = () => {
   const {
@@ -16,43 +13,23 @@ export const RecommendationsPanel = () => {
     isLoaded,
     isLoading,
   } = hooks.useRecommendationPanelData();
-  const {
-    experimentVariation,
-    isPaintedDoorWidgetBtnVariation,
-    experimentLoading,
-  } = usePaintedDoorExperimentContext();
-
-  const getDefaultOrFailedStateWidget = () => {
-    if (!experimentLoading && isPaintedDoorWidgetBtnVariation) {
-      return (
-        <>
-          <LookingForChallengeWidget />
-          <div className="pt-3" />
-          <RecommendationsPaintedDoorBtn
-            experimentVariation={experimentVariation}
-            placement={RECOMMENDATIONS_PANEL}
-          />
-        </>
-      );
-    }
-    return (
-      <LookingForChallengeWidget />
-    );
-  };
 
   if (isLoading) {
     return (<LoadingView />);
   }
   if (isLoaded && courses.length > 0) {
     return (
-      <LoadedView courses={courses} isControl={isControl} />
+      <LoadedView
+        courses={courses}
+        isControl={isControl}
+      />
     );
   }
   if (isFailed) {
-    return getDefaultOrFailedStateWidget();
+    return (<LookingForChallengeWidget />);
   }
   // default fallback
-  return getDefaultOrFailedStateWidget();
+  return (<LookingForChallengeWidget />);
 };
 
 export default RecommendationsPanel;

src/widgets/RecommendationsPanel/index.test.jsx

@@ -7,18 +7,17 @@ import mockData from './mockData';
 import LoadedView from './LoadedView';
 import LoadingView from './LoadingView';
 import RecommendationsPanel from '.';
-import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
-import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';
+import { useRecommendationsModal } from '../../components/ModalView/hooks';
 
 jest.mock('./hooks', () => ({
   useRecommendationPanelData: jest.fn(),
 }));
+jest.mock('../../components/ModalView/hooks', () => ({
+  useRecommendationsModal: jest.fn(),
+}));
 jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
 jest.mock('./LoadingView', () => 'LoadingView');
 jest.mock('./LoadedView', () => 'LoadedView');
-jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
-  usePaintedDoorExperimentContext: jest.fn(),
-}));
 
 const { courses } = mockData;
 
@@ -26,6 +25,8 @@ describe('RecommendationsPanel snapshot', () => {
   const defaultLoadedViewProps = {
     courses: [],
     isControl: false,
+    setIsRecommendationsModalOpen: jest.fn(),
+    isRecommendationsModalOpen: false,
   };
   const defaultValues = {
     isFailed: false,
@@ -33,108 +34,53 @@ describe('RecommendationsPanel snapshot', () => {
     isLoading: false,
     ...defaultLoadedViewProps,
   };
-  describe('RecommendationsPanel recommendations tests', () => {
-    beforeEach(() => {
-      usePaintedDoorExperimentContext.mockReturnValueOnce({
-        experimentVariation: '',
-        isPaintedDoorWidgetBtnVariation: false,
-        experimentLoading: false,
-      });
+  it('displays LoadingView if request is loading', () => {
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
     });
-    it('displays LoadingView if request is loading', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-        isLoading: true,
-      });
-      expect(shallow(<RecommendationsPanel />)).toMatchObject(shallow(<LoadingView />));
-    });
-    it('displays LoadedView with courses if request is loaded', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-        courses,
-        isLoaded: true,
-      });
-      expect(shallow(<RecommendationsPanel />)).toMatchObject(
-        shallow(<LoadedView {...defaultLoadedViewProps} courses={courses} />),
-      );
-    });
-    it('displays LookingForChallengeWidget if request is failed', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-        isFailed: true,
-      });
-      expect(shallow(<RecommendationsPanel />)).toMatchObject(
-        shallow(<LookingForChallengeWidget />),
-      );
-    });
-    it('defaults to LookingForChallengeWidget if no flags are true', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-      });
-      expect(shallow(<RecommendationsPanel />)).toMatchObject(
-        shallow(<LookingForChallengeWidget />),
-      );
+    hooks.useRecommendationPanelData.mockReturnValueOnce({
+      ...defaultValues,
+      isLoading: true,
     });
+    expect(shallow(<RecommendationsPanel />)).toMatchObject(shallow(<LoadingView />));
   });
-
-  describe('RecommendationsPanel painted door exp tests', () => {
-    it('displays painted door btn if user is in variation and request is failed', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-        isFailed: true,
-      });
-      usePaintedDoorExperimentContext.mockReturnValueOnce({
-        experimentVariation: '',
-        isPaintedDoorWidgetBtnVariation: true,
-        experimentLoading: false,
-      });
-
-      const wrapper = shallow(<RecommendationsPanel />);
-      expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true);
+  it('displays LoadedView with courses if request is loaded', () => {
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
     });
-    it('displays painted door btn if user is in variation and no flags are set (defaults)', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-        isFailed: true,
-      });
-      usePaintedDoorExperimentContext.mockReturnValueOnce({
-        experimentVariation: '',
-        isPaintedDoorWidgetBtnVariation: true,
-        experimentLoading: false,
-      });
-
-      const wrapper = shallow(<RecommendationsPanel />);
-      expect(wrapper.find(RecommendationsPaintedDoorBtn).exists()).toBe(true);
+    hooks.useRecommendationPanelData.mockReturnValueOnce({
+      ...defaultValues,
+      courses,
+      isLoaded: true,
     });
-    it('renders only LookingForChallengeWidget if user is not in variation', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-        isFailed: true,
-      });
-      usePaintedDoorExperimentContext.mockReturnValueOnce({
-        experimentVariation: '',
-        isPaintedDoorWidgetBtnVariation: false,
-        experimentLoading: false,
-      });
-
-      expect(shallow(<RecommendationsPanel />)).toMatchObject(
-        shallow(<LookingForChallengeWidget />),
-      );
+    expect(JSON.stringify(shallow(<RecommendationsPanel />)))
+      .toEqual(JSON.stringify(shallow(<LoadedView {...defaultLoadedViewProps} courses={courses} />)));
+  });
+  it('displays LookingForChallengeWidget if request is failed', () => {
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
     });
-    it('renders only LookingForChallengeWidget if experiment is loading', () => {
-      hooks.useRecommendationPanelData.mockReturnValueOnce({
-        ...defaultValues,
-        isFailed: true,
-      });
-      usePaintedDoorExperimentContext.mockReturnValueOnce({
-        experimentVariation: '',
-        isPaintedDoorWidgetBtnVariation: false,
-        experimentLoading: true,
-      });
-
-      expect(shallow(<RecommendationsPanel />)).toMatchObject(
-        shallow(<LookingForChallengeWidget />),
-      );
+    hooks.useRecommendationPanelData.mockReturnValueOnce({
+      ...defaultValues,
+      isFailed: true,
     });
+    expect(shallow(<RecommendationsPanel />)).toMatchObject(
+      shallow(<LookingForChallengeWidget />),
+    );
+  });
+  it('defaults to LookingForChallengeWidget if no flags are true', () => {
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
+    });
+    hooks.useRecommendationPanelData.mockReturnValueOnce({
+      ...defaultValues,
+    });
+    expect(shallow(<RecommendationsPanel />)).toMatchObject(
+      shallow(<LookingForChallengeWidget />),
+    );
   });
 });

src/widgets/RecommendationsPanel/messages.js

@@ -16,6 +16,11 @@ const messages = defineMessages({
     defaultMessage: 'Explore courses',
     description: 'Button to explore more courses on recommendations panel',
   },
+  seeAllRecommendationsButton: {
+    id: 'RecommendationsPanel.seeAllRecommendationsButton',
+    defaultMessage: 'See all recommendations',
+    description: 'Button to see all recommendations',
+  },
 });
 
 export default messages;

src/widgets/RecommendationsPanel/recsPaintedDoorExpTrack.js

@@ -12,24 +12,24 @@ export const trackPaintedDoorVariationGroup = (variation) => {
   createEventTracker(eventNames.variationGroup, {
     variation,
     page: 'dashboard',
-  })();
+  });
 };
 
 export const trackPaintedDoorRecommendationHomeBtnClicked = (variation) => {
   createEventTracker(eventNames.recommendationHomeBtnClicked, {
     variation,
     page: 'dashboard',
-  })();
+  });
 };
 
 export const trackPaintedDoorRecommendationHomeInterestBtnClicked = (variation) => {
   createEventTracker(eventNames.recommendationHomeModalInterestBtnClicked, {
     variation,
-  })();
+  });
 };
 
 export const trackPaintedDoorRecommendationHomeSkipBtnClicked = (variation) => {
   createEventTracker(eventNames.recommendationHomeModalSkipBtnClicked, {
     variation,
-  })();
+  });
 };

src/widgets/RecommendationsPanel/track.js

@@ -4,6 +4,7 @@ import track from 'tracking';
 
 export const eventNames = StrictDict({
   recommendedCourseClicked: 'edx.bi.user.recommended.course.click',
+  recommendationsUnavailable: 'edx.bi.user.recommendations.unavailable',
 });
 
 export const linkNames = StrictDict({
@@ -23,7 +24,15 @@ export const recommendedCourseClicked = (courseKey, isControl, href) => createLi
   href,
 );
 
+export const trackRecommendationUnavailable = () => {
+  createEventTracker(eventNames.recommendationsUnavailable, {
+    type: 'personalized',
+    page: 'dashboard',
+  });
+};
+
 export default {
   findCoursesWidgetClicked,
   recommendedCourseClicked,
+  trackRecommendationUnavailable,
 };