Bw/recommendations painted door exp (#197)

Co-authored-by: Syed Sajjad Hussain Shah <ssajjad@2u.com>
2023-08-23 11:53:19 -04:00
parent 909f3f1f47
commit b41eee47c9
36 changed files with 1230 additions and 101 deletions
--- a/.env
+++ b/.env
@@ -41,3 +41,4 @@ ACCOUNT_PROFILE_URL=''
 ENABLE_NOTICES=''
 CAREER_LINK_URL=''
 OPTIMIZELY_FULL_STACK_SDK_KEY=''
+EXPERIMENT_08_23_VAN_PAINTED_DOOR=true
--- a/.env.test
+++ b/.env.test
@@ -47,3 +47,4 @@ 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
--- a/public/index.html
+++ b/public/index.html
@@ -5,6 +5,15 @@
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="shortcut icon" href="<%=htmlWebpackPlugin.options.FAVICON_URL%>" type="image/x-icon" />
+      <% if (process.env.OPTIMIZELY_URL) { %>
+        <script
+          src="<%= process.env.OPTIMIZELY_URL %>"
+        ></script>
+      <% } else if (process.env.OPTIMIZELY_PROJECT_ID) { %>
+        <script
+          src="<%= process.env.MARKETING_SITE_BASE_URL %>/optimizelyjs/<%= process.env.OPTIMIZELY_PROJECT_ID %>.js"
+        ></script>
+      <% } %>
  </head>
  <body>
    <div id="root"></div>
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -24,10 +24,11 @@ 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 messages from './messages';
-
 import './App.scss';

 export const App = () => {
@@ -78,19 +79,21 @@ export const App = () => {
        <title>{formatMessage(messages.pageTitle)}</title>
      </Helmet>
      <div>
-        <LearnerDashboardHeader />
-        <main>
-          {hasNetworkFailure
-            ? (
-              <Alert variant="danger">
-                <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
-              </Alert>
-            ) : (
-              <ExperimentProvider>
-                <Dashboard />
-              </ExperimentProvider>
-            )}
-        </main>
+        <AppWrapper>
+          <LearnerDashboardHeader />
+          <main>
+            {hasNetworkFailure
+              ? (
+                <Alert variant="danger">
+                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+                </Alert>
+              ) : (
+                <ExperimentProvider>
+                  <Dashboard />
+                </ExperimentProvider>
+              )}
+          </main>
+        </AppWrapper>
        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
        <ZendeskFab />
      </div>
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -1,18 +1,15 @@
 import React from 'react';
-import { shallow } from 'enzyme';
 import { Helmet } from 'react-helmet';
-import { ErrorPage } from '@edx/frontend-platform/react';
-
-import { BrowserRouter as Router } from 'react-router-dom';
+import { shallow } from '@edx/react-unit-test-utils';

 import Footer from '@edx/frontend-component-footer';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Alert } from '@edx/paragon';

 import { RequestKeys } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+import AppWrapper from 'containers/WidgetContainers/AppWrapper';
 import { ExperimentProvider } from 'ExperimentContext';
 import { App } from './App';
 import messages from './messages';
@@ -25,6 +22,7 @@ jest.mock('components/ZendeskFab', () => 'ZendeskFab');
 jest.mock('ExperimentContext', () => ({
  ExperimentProvider: 'ExperimentProvider',
 }));
+jest.mock('containers/WidgetContainers/AppWrapper', () => 'AppWrapper');
 jest.mock('data/redux', () => ({
  selectors: 'redux.selectors',
  actions: 'redux.actions',
@@ -53,18 +51,26 @@ describe('App router component', () => {
  const { formatMessage } = useIntl();
  describe('component', () => {
    const runBasicTests = () => {
-      test('snapshot', () => { expect(el).toMatchSnapshot(); });
+      test('snapshot', () => { expect(el.snapshot).toMatchSnapshot(); });
      it('displays title in helmet component', () => {
-        expect(el.find(Helmet).find('title').text()).toEqual(useIntl().formatMessage(messages.pageTitle));
+        const control = el.instance
+          .findByType(Helmet)[0]
+          .findByType('title')[0];
+        expect(control.children[0].el).toEqual(formatMessage(messages.pageTitle));
      });
      it('displays learner dashboard header', () => {
-        expect(el.find(LearnerDashboardHeader).length).toEqual(1);
+        expect(el.instance.findByType(LearnerDashboardHeader).length).toEqual(1);
      });
      it('wraps the page in a browser router', () => {
-        expect(el.find(Router)).toMatchObject(el);
+        expect(el.instance.el.type).toEqual('BrowserRouter');
      });
      test('Footer logo drawn from env variable', () => {
-        expect(el.find(Footer).props().logo).toEqual(logo);
+        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');
      });
    };
    describe('no network failure', () => {
@@ -74,9 +80,14 @@ describe('App router component', () => {
      });
      runBasicTests();
      it('loads dashboard', () => {
-        expect(el.find('main')).toMatchObject(shallow(
-          <main><ExperimentProvider><Dashboard /></ExperimentProvider></main>,
-        ));
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const expProvider = main.children[0];
+        expect(expProvider.type).toEqual('ExperimentProvider');
+        expect(expProvider.children.length).toEqual(1);
+        expect(
+          expProvider.matches(shallow(<ExperimentProvider><Dashboard /></ExperimentProvider>)),
+        ).toEqual(true);
      });
    });
    describe('initialize failure', () => {
@@ -86,13 +97,14 @@ describe('App router component', () => {
      });
      runBasicTests();
      it('loads error page', () => {
-        expect(el.find('main')).toEqual(shallow(
-          <main>
-            <Alert variant="danger">
-              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
-            </Alert>
-          </main>,
-        ));
+        const main = el.instance.findByType('main')[0];
+        expect(main.children.length).toEqual(1);
+        const alert = main.children[0];
+        expect(alert.type).toEqual('Alert');
+        expect(alert.children.length).toEqual(1);
+        const errorPage = alert.children[0];
+        expect(errorPage.type).toEqual('ErrorPage');
+        expect(errorPage.props.message).toEqual(formatMessage(messages.errorMessage, { supportEmail }));
      });
    });
    describe('refresh failure', () => {
@@ -102,13 +114,14 @@ describe('App router component', () => {
      });
      runBasicTests();
      it('loads error page', () => {
-        expect(el.find('main')).toEqual(shallow(
-          <main>
-            <Alert variant="danger">
-              <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
-            </Alert>
-          </main>,
-        ));
+        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 }));
      });
    });
  });
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -11,16 +11,18 @@ exports[`App router component component initialize failure snapshot 1`] = `
    </title>
  </HelmetWrapper>
  <div>
-    <LearnerDashboardHeader />
-    <main>
-      <Alert
-        variant="danger"
-      >
-        <ErrorPage
-          message="If you experience repeated failures, please email support at test-support-url"
-        />
-      </Alert>
-    </main>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <Alert
+          variant="danger"
+        >
+          <ErrorPage
+            message="If you experience repeated failures, please email support at test-support-url"
+          />
+        </Alert>
+      </main>
+    </AppWrapper>
    <Footer
      logo="fakeLogo.png"
    />
@@ -40,12 +42,14 @@ exports[`App router component component no network failure snapshot 1`] = `
    </title>
  </HelmetWrapper>
  <div>
-    <LearnerDashboardHeader />
-    <main>
-      <ExperimentProvider>
-        <Dashboard />
-      </ExperimentProvider>
-    </main>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+    </AppWrapper>
    <Footer
      logo="fakeLogo.png"
    />
@@ -65,16 +69,18 @@ exports[`App router component component refresh failure snapshot 1`] = `
    </title>
  </HelmetWrapper>
  <div>
-    <LearnerDashboardHeader />
-    <main>
-      <Alert
-        variant="danger"
-      >
-        <ErrorPage
-          message="If you experience repeated failures, please email support at test-support-url"
-        />
-      </Alert>
-    </main>
+    <AppWrapper>
+      <LearnerDashboardHeader />
+      <main>
+        <Alert
+          variant="danger"
+        >
+          <ErrorPage
+            message="If you experience repeated failures, please email support at test-support-url"
+          />
+        </Alert>
+      </main>
+    </AppWrapper>
    <Footer
      logo="fakeLogo.png"
    />
--- a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx
+++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx
@@ -4,14 +4,14 @@ 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 messages from '../messages';

 export const CollapseMenuBody = ({ isOpen }) => {
@@ -40,6 +40,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
        >
          {formatMessage(messages.discoverNew)}
        </Button>
+        <WidgetNavbar placement={COLLAPSED_NAVBAR} />
        <Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
          {formatMessage(messages.help)}
        </Button>
--- a/src/containers/LearnerDashboardHeader/CollapsedHeader/snapshots/CollapseMenuBody.test.jsx.snap
+++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/snapshots/CollapseMenuBody.test.jsx.snap
@@ -26,6 +26,9 @@ exports[`CollapseMenuBody render 1`] = `
  >
    Discover New
  </Button>
+  <WidgetNavbar
+    placement="collapsedNavbar"
+  />
  <Button
    as="a"
    href="http://localhost:18000/support"
@@ -92,6 +95,9 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
  >
    Discover New
  </Button>
+  <WidgetNavbar
+    placement="collapsedNavbar"
+  />
  <Button
    as="a"
    href="http://localhost:18000/support"
--- a/src/containers/LearnerDashboardHeader/ExpandedHeader/snapshots/index.test.jsx.snap
+++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/snapshots/index.test.jsx.snap
@@ -33,6 +33,9 @@ exports[`ExpandedHeader render 1`] = `
    >
      Discover New
    </Button>
+    <WidgetNavbar
+      placement="expendedNavbar"
+    />
    <span
      className="flex-grow-1"
    />
--- a/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx
+++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx
@@ -4,11 +4,12 @@ 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 messages from '../messages';
 import BrandLogo from '../BrandLogo';
@@ -51,6 +52,7 @@ export const ExpandedHeader = () => {
        >
          {formatMessage(messages.discoverNew)}
        </Button>
+        <WidgetNavbar placement={EXPANDED_NAVBAR} />
        <span className="flex-grow-1" />
        <Button
          as="a"
--- a/src/containers/WidgetContainers/AppWrapper/snapshots/index.test.jsx.snap
+++ b/src/containers/WidgetContainers/AppWrapper/snapshots/index.test.jsx.snap
@@ -0,0 +1,29 @@
+// 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>
+`;
--- a/src/containers/WidgetContainers/AppWrapper/index.jsx
+++ b/src/containers/WidgetContainers/AppWrapper/index.jsx
@@ -0,0 +1,25 @@
+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;
--- a/src/containers/WidgetContainers/AppWrapper/index.test.jsx
+++ b/src/containers/WidgetContainers/AppWrapper/index.test.jsx
@@ -0,0 +1,56 @@
+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);
+      });
+    });
+  });
+});
--- a/src/containers/WidgetContainers/WidgetNavbar/snapshots/index.test.jsx.snap
+++ b/src/containers/WidgetContainers/WidgetNavbar/snapshots/index.test.jsx.snap
@@ -0,0 +1,8 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WidgetNavbar snapshots default 1`] = `
+<RecommendationsPaintedDoorBtn
+  experimentVariation=""
+  placement="expendedNavbar"
+/>
+`;
--- a/src/containers/WidgetContainers/WidgetNavbar/index.jsx
+++ b/src/containers/WidgetContainers/WidgetNavbar/index.jsx
@@ -0,0 +1,29 @@
+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;
--- a/src/containers/WidgetContainers/WidgetNavbar/index.test.jsx
+++ b/src/containers/WidgetContainers/WidgetNavbar/index.test.jsx
@@ -0,0 +1,65 @@
+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();
+  });
+});
--- a/src/widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext.jsx
@@ -0,0 +1,123 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StrictDict } from 'utils';
+import * as module from './PaintedDoorExperimentContext';
+import {
+  useEmailConfirmationData,
+  useHasAvailableDashboards,
+  useRequestIsPending,
+} from '../../data/redux/hooks';
+import { RequestKeys } from '../../data/constants/requests';
+import { trackPaintedDoorVariationGroup } from './track';
+
+export const state = StrictDict({
+  enterpriseUser: (val) => React.useState(val), // eslint-disable-line
+  experimentData: (val) => React.useState(val), // eslint-disable-line
+});
+
+const PAINTED_DOOR_RECOMMENDATIONS_EXP_ID = 25116810832;
+const PAINTED_DOOR_RECOMMENDATIONS_PAGE = 'url_targeting_for_van1604_recommendations_painted_door_exp';
+const PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION = 'btn_navbar';
+const PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION = 'btn_widget';
+const PAINTED_DOOR_RECS_EXP_CONTROL_VARIATION = 'control';
+
+export function getPaintedDoorRecommendationsExperimentVariation() {
+  try {
+    if (window.optimizely && window.optimizely.get('data').experiments[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID]) {
+      const selectedVariant = window.optimizely.get('state').getVariationMap()[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID];
+      return selectedVariant?.name;
+    }
+  } catch (e) { /* empty */ }
+  return '';
+}
+
+export function activatePaintedDoorRecommendationsExperiment() {
+  window.optimizely = window.optimizely || [];
+  window.optimizely.push({
+    type: 'page',
+    pageName: PAINTED_DOOR_RECOMMENDATIONS_PAGE,
+  });
+}
+
+export const useIsEnterpriseUser = () => {
+  const [enterpriseUser, setEnterpriseUser] = module.state.enterpriseUser({
+    isEnterpriseUser: false,
+    isLoading: true,
+  });
+
+  const initIsPending = useRequestIsPending(RequestKeys.initialize);
+  const hasAvailableDashboards = useHasAvailableDashboards();
+  const confirmationData = useEmailConfirmationData();
+
+  React.useEffect(() => {
+    if (!initIsPending && Object.keys(confirmationData).length && hasAvailableDashboards) {
+      setEnterpriseUser(prev => ({
+        ...prev,
+        isEnterpriseUser: true,
+        isLoading: false,
+      }));
+    } else if (!initIsPending && Object.keys(confirmationData).length && !hasAvailableDashboards) {
+      setEnterpriseUser(prev => ({
+        ...prev,
+        isEnterpriseUser: false,
+        isLoading: false,
+      }));
+    }
+  }, [initIsPending]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return enterpriseUser;
+};
+
+export const PaintedDoorExperimentContext = React.createContext();
+
+export const PaintedDoorExperimentProvider = ({ children }) => {
+  const [experimentData, setExperimentData] = module.state.experimentData({
+    experimentVariation: '',
+    isPaintedDoorNavbarBtnVariation: false,
+    isPaintedDoorWidgetBtnVariation: false,
+    isPaintedDoorControlVariation: false,
+    experimentLoading: true,
+  });
+  const enterpriseUser = useIsEnterpriseUser();
+
+  const contextValue = React.useMemo(
+    () => ({
+      ...experimentData,
+    }),
+    [experimentData],
+  );
+
+  React.useEffect(() => {
+    let timer = null;
+    if (!enterpriseUser.isLoading && !enterpriseUser.isEnterpriseUser) {
+      activatePaintedDoorRecommendationsExperiment();
+      timer = setTimeout(() => {
+        const variation = getPaintedDoorRecommendationsExperimentVariation();
+        setExperimentData(prev => ({
+          ...prev,
+          experimentVariation: variation,
+          isPaintedDoorNavbarBtnVariation: variation === PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION,
+          isPaintedDoorWidgetBtnVariation: variation === PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION,
+          isPaintedDoorControlVariation: variation === PAINTED_DOOR_RECS_EXP_CONTROL_VARIATION,
+          experimentLoading: false,
+        }));
+        trackPaintedDoorVariationGroup(variation);
+      }, 500);
+    }
+    return () => clearTimeout(timer);
+  }, [enterpriseUser]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <PaintedDoorExperimentContext.Provider value={contextValue}>
+      {children}
+    </PaintedDoorExperimentContext.Provider>
+  );
+};
+
+export const usePaintedDoorExperimentContext = () => React.useContext(PaintedDoorExperimentContext);
+
+PaintedDoorExperimentProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default PaintedDoorExperimentProvider;
--- a/src/widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext.test.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext.test.jsx
@@ -0,0 +1,151 @@
+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);
+    });
+  });
+});
--- a/src/widgets/RecommendationsPaintedDoorBtn/snapshots/index.test.jsx.snap
+++ b/src/widgets/RecommendationsPaintedDoorBtn/snapshots/index.test.jsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RecommendationsPaintedDoorBtn matches snapshot 1`] = `
+<Fragment>
+  <RecommendationsPanelButton
+    handleClick={[Function]}
+  />
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+    variation=""
+  />
+</Fragment>
+`;
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/NavbarButton.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/NavbarButton.jsx
@@ -0,0 +1,31 @@
+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;
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/snapshots/index.test.jsx.snap
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/snapshots/index.test.jsx.snap
@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalView snapshot should renders default ModalView 1`] = `
+<div
+  className="containers modal-container"
+>
+  <ModalDialog
+    hasCloseButton={false}
+    isBlocking={true}
+    isFullscreenScroll={true}
+    isOpen={true}
+    onClose={[MockFunction]}
+    title=""
+  >
+    <ModalDialog.Header>
+      <Component
+        className="mt-2"
+      >
+        Thank you for your interest!
+      </Component>
+    </ModalDialog.Header>
+    <ModalDialog.Body>
+      <div>
+        <p
+          className="mt-2"
+        >
+          Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.
+        </p>
+        <p>
+          Would you like to be alerted when it becomes available?
+        </p>
+      </div>
+    </ModalDialog.Body>
+    <Component>
+      <ActionRow>
+        <Component
+          onClick={[Function]}
+          variant="tertiary"
+        >
+          Skip for now
+        </Component>
+        <Component
+          onClick={[Function]}
+          variant="primary"
+        >
+          Count me in!
+        </Component>
+      </ActionRow>
+    </Component>
+  </ModalDialog>
+</div>
+`;
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.js
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.js
@@ -0,0 +1,18 @@
+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,
+  };
+};
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.test.js
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/hooks.test.js
@@ -0,0 +1,30 @@
+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);
+    });
+  });
+});
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ModalDialog, ActionRow } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from '../../messages';
+
+import './index.scss';
+import {
+  trackPaintedDoorRecommendationHomeInterestBtnClicked,
+  trackPaintedDoorRecommendationHomeSkipBtnClicked,
+} from '../../track';
+
+export const ModalView = ({
+  isOpen,
+  onClose,
+  variation,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const handleSkipBtnClick = () => trackPaintedDoorRecommendationHomeSkipBtnClicked(variation);
+  const handleInterestBtnClick = () => trackPaintedDoorRecommendationHomeInterestBtnClicked(variation);
+
+  return (
+    <div className="containers modal-container">
+      <ModalDialog
+        title=""
+        isOpen={isOpen}
+        onClose={onClose}
+        hasCloseButton={false}
+        isFullscreenScroll
+        isBlocking
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title className="mt-2">
+            {formatMessage(messages.recommendationsModalHeading)}
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          <div>
+            <p className="mt-2">{formatMessage(messages.recommendationsFeatureText)}</p>
+            <p>{formatMessage(messages.recommendationsAlertText)}</p>
+          </div>
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary" onClick={handleSkipBtnClick}>
+              {formatMessage(messages.modalSkipButton)}
+            </ModalDialog.CloseButton>
+            <ModalDialog.CloseButton variant="primary" onClick={handleInterestBtnClick}>
+              {formatMessage(messages.modalCountMeButton)}
+            </ModalDialog.CloseButton>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </div>
+  );
+};
+
+ModalView.defaultProps = {
+  isOpen: false,
+};
+
+ModalView.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool,
+  variation: PropTypes.string.isRequired,
+};
+
+export default ModalView;
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.scss
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.scss
@@ -0,0 +1,15 @@
+@import "@edx/paragon/scss/core/core";
+
+.modal-container {
+    display: none;
+}
+
+@media (max-width: 464px) {
+    .pgn__action-row{
+        flex-direction: column;
+        gap: 5px;
+        button {
+            width: 100%;
+        }
+    }
+}
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.test.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/PaintedDoorModal/index.test.jsx
@@ -0,0 +1,22 @@
+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', () => {
+      const wrapper = shallow(<ModalView {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
--- a/src/widgets/RecommendationsPaintedDoorBtn/components/RecommendationsPanelButton.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/components/RecommendationsPanelButton.jsx
@@ -0,0 +1,25 @@
+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;
--- a/src/widgets/RecommendationsPaintedDoorBtn/constants.js
+++ b/src/widgets/RecommendationsPaintedDoorBtn/constants.js
@@ -0,0 +1,3 @@
+export const COLLAPSED_NAVBAR = 'collapsedNavbar';
+export const EXPANDED_NAVBAR = 'expendedNavbar';
+export const RECOMMENDATIONS_PANEL = 'recommendationsPanel';
--- a/src/widgets/RecommendationsPaintedDoorBtn/index.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/index.jsx
@@ -0,0 +1,44 @@
+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;
--- a/src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx
+++ b/src/widgets/RecommendationsPaintedDoorBtn/index.test.jsx
@@ -0,0 +1,95 @@
+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();
+  });
+});
--- a/src/widgets/RecommendationsPaintedDoorBtn/messages.js
+++ b/src/widgets/RecommendationsPaintedDoorBtn/messages.js
@@ -0,0 +1,41 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  recommendationsFeatureText: {
+    id: 'RecommendationsPanel.recommendationsFeatureText',
+    defaultMessage: 'Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.',
+    description: 'recommendations feature text',
+  },
+  recommendationsAlertText: {
+    id: 'RecommendationsPanel.recommendationsAlertText',
+    defaultMessage: 'Would you like to be alerted when it becomes available?',
+    description: 'recommendations alerted text',
+  },
+  recommendationsModalHeading: {
+    id: 'RecommendationsPanel.recommendationsModalHeading',
+    defaultMessage: 'Thank you for your interest!',
+    description: 'Heading of modal',
+  },
+  modalSkipButton: {
+    id: 'RecommendationsPanel.modalSkipButton',
+    defaultMessage: 'Skip for now',
+    description: 'button for Skip for now',
+  },
+  modalCountMeButton: {
+    id: 'RecommendationsPanel.modalCountMeButton',
+    defaultMessage: 'Count me in!',
+    description: 'button for Count me in!',
+  },
+  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;
--- a/src/widgets/RecommendationsPaintedDoorBtn/track.js
+++ b/src/widgets/RecommendationsPaintedDoorBtn/track.js
@@ -0,0 +1,35 @@
+import { StrictDict } from 'utils';
+import { createEventTracker } from 'data/services/segment/utils';
+
+export const eventNames = StrictDict({
+  variationGroup: 'edx.bi.user.recommendation_home.variation.group',
+  recommendationHomeBtnClicked: 'edx.bi.user.recommendation_home.btn.clicked',
+  recommendationHomeModalInterestBtnClicked: 'edx.bi.user.recommendation_home.modal.interest_btn.clicked',
+  recommendationHomeModalSkipBtnClicked: 'edx.bi.user.recommendation_home.modal.skip_btn.clicked',
+});
+
+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,
+  });
+};
--- a/src/widgets/RecommendationsPaintedDoorBtn/track.test.js
+++ b/src/widgets/RecommendationsPaintedDoorBtn/track.test.js
@@ -0,0 +1,58 @@
+import { createEventTracker } from 'data/services/segment/utils';
+import {
+  eventNames,
+  trackPaintedDoorRecommendationHomeBtnClicked,
+  trackPaintedDoorVariationGroup,
+  trackPaintedDoorRecommendationHomeSkipBtnClicked,
+  trackPaintedDoorRecommendationHomeInterestBtnClicked,
+} from './track';
+
+jest.mock('data/services/segment/utils', () => ({
+  createEventTracker: jest.fn((args) => ({ createEventTracker: args })),
+}));
+
+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,
+      },
+    );
+  });
+});
--- a/src/widgets/RecommendationsPanel/LoadedView.jsx
+++ b/src/widgets/RecommendationsPanel/LoadedView.jsx
@@ -12,6 +12,9 @@ import CourseCard from './components/CourseCard';
 import messages from './messages';

 import './index.scss';
+import { usePaintedDoorExperimentContext } from '../RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext';
+import { RECOMMENDATIONS_PANEL } from '../RecommendationsPaintedDoorBtn/constants';
+import RecommendationsPaintedDoorBtn from '../RecommendationsPaintedDoorBtn';

 export const LoadedView = ({
  courses,
@@ -19,6 +22,11 @@ export const LoadedView = ({
 }) => {
  const { formatMessage } = useIntl();
  const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
+  const {
+    experimentVariation,
+    isPaintedDoorWidgetBtnVariation,
+    experimentLoading,
+  } = usePaintedDoorExperimentContext();

  return (
    <div className="p-4 w-100 panel-background">
@@ -35,15 +43,19 @@ export const LoadedView = ({
        ))}
      </div>
      <div className="text-center explore-courses-btn">
-        <Button
-          variant="tertiary"
-          iconBefore={Search}
-          as="a"
-          href={baseAppUrl(courseSearchUrl)}
-          onClick={track.findCoursesWidgetClicked(baseAppUrl(courseSearchUrl))}
-        >
-          {formatMessage(messages.exploreCoursesButton)}
-        </Button>
+        {!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>
  );
--- a/src/widgets/RecommendationsPanel/LoadedView.test.jsx
+++ b/src/widgets/RecommendationsPanel/LoadedView.test.jsx
@@ -1,9 +1,12 @@
 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: {
@@ -19,22 +22,62 @@ jest.mock('./track', () => ({
  findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
 }));
 jest.mock('./components/CourseCard', () => 'CourseCard');
+jest.mock('widgets/RecommendationsPaintedDoorBtn/PaintedDoorExperimentContext', () => ({
+  usePaintedDoorExperimentContext: jest.fn(),
+}));

 describe('RecommendationsPanel LoadedView', () => {
  const props = {
    courses: mockData.courses,
    isControl: null,
  };
-  describe('snapshot', () => {
+  let mockExperimentContext = {
+    experimentVariation: '',
+    isPaintedDoorWidgetBtnVariation: true,
+    experimentLoading: false,
+  };
+  describe('RecommendationPanelLoadedView', () => {
    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);
+    });
  });
 });
--- a/src/widgets/RecommendationsPanel/snapshots/LoadedView.test.jsx.snap
+++ b/src/widgets/RecommendationsPanel/snapshots/LoadedView.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`RecommendationsPanel LoadedView snapshot with personalize recommendation 1`] = `
+exports[`RecommendationsPanel LoadedView RecommendationPanelLoadedView with personalize recommendation 1`] = `
 <div
  className="p-4 w-100 panel-background"
 >
@@ -62,20 +62,15 @@ exports[`RecommendationsPanel LoadedView snapshot with personalize recommendatio
  <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>
+    <RecommendationsPaintedDoorBtn
+      experimentVariation=""
+      placement="recommendationsPanel"
+    />
  </div>
 </div>
 `;

-exports[`RecommendationsPanel LoadedView snapshot without personalize recommendation 1`] = `
+exports[`RecommendationsPanel LoadedView RecommendationPanelLoadedView without personalize recommendation 1`] = `
 <div
  className="p-4 w-100 panel-background"
 >
@@ -137,15 +132,10 @@ exports[`RecommendationsPanel LoadedView snapshot without personalize recommenda
  <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>
+    <RecommendationsPaintedDoorBtn
+      experimentVariation=""
+      placement="recommendationsPanel"
+    />
  </div>
 </div>
 `;