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

fix: modal outside click fix
Description: Modal window should not closed when click outside the modal VAN-1615
2023-08-22 18:19:19 +05:00 · 2023-08-22 13:41:49 +05:00 · 2023-08-18 18:31:21 +05:00 · 2023-08-18 18:00:23 +05:00 · 2023-08-17 12:52:42 +05:00 · 2023-08-17 12:41:28 +05:00
30 changed files with 846 additions and 230 deletions
--- 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
@@ -29,6 +29,7 @@ import LearnerDashboardHeader from './containers/LearnerDashboardHeader';
 import messages from './messages';

 import './App.scss';
+import { PaintedDoorExperimentProvider } from './RecsPaintedDoorExpContext';

 export const App = () => {
  const { authenticatedUser } = React.useContext(AppContext);
@@ -78,21 +79,23 @@ 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>
-        <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
-        <ZendeskFab />
+        <PaintedDoorExperimentProvider>
+          <LearnerDashboardHeader />
+          <main>
+            {hasNetworkFailure
+              ? (
+                <Alert variant="danger">
+                  <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
+                </Alert>
+              ) : (
+                <ExperimentProvider>
+                  <Dashboard />
+                </ExperimentProvider>
+              )}
+          </main>
+          <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
+          <ZendeskFab />
+        </PaintedDoorExperimentProvider>
      </div>
    </Router>
  );
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -25,6 +25,9 @@ jest.mock('components/ZendeskFab', () => 'ZendeskFab');
 jest.mock('ExperimentContext', () => ({
  ExperimentProvider: 'ExperimentProvider',
 }));
+jest.mock('RecsPaintedDoorExpContext', () => ({
+  PaintedDoorExperimentProvider: 'PaintedDoorExperimentProvider',
+}));
 jest.mock('data/redux', () => ({
  selectors: 'redux.selectors',
  actions: 'redux.actions',
--- a/src/RecsPaintedDoorExpContext.jsx
+++ b/src/RecsPaintedDoorExpContext.jsx
@@ -0,0 +1,120 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { StrictDict } from 'utils';
+import * as module from './RecsPaintedDoorExpContext';
+import {
+  useEmailConfirmationData,
+  useHasAvailableDashboards,
+  useRequestIsPending,
+} from './data/redux/hooks';
+import { RequestKeys } from './data/constants/requests';
+import { trackPaintedDoorVariationGroup } from './widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
+
+export const state = StrictDict({
+  enterpriseUser: (val) => React.useState(val), // eslint-disable-line
+  experimentData: (val) => React.useState(val), // eslint-disable-line
+});
+
+const PAINTED_DOOR_RECOMMENDATIONS_EXP_ID = 25116810832;
+const PAINTED_DOOR_RECOMMENDATIONS_PAGE = 'url_targeting_for_van1604_recommendations_painted_door_exp';
+const PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION = 'btn_navbar';
+const PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION = 'btn_widget';
+
+export function getPaintedDoorRecommendationsExperimentVariation() {
+  try {
+    if (window.optimizely && window.optimizely.get('data').experiments[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID]) {
+      const selectedVariant = window.optimizely.get('state').getVariationMap()[PAINTED_DOOR_RECOMMENDATIONS_EXP_ID];
+      return selectedVariant?.name;
+    }
+  } catch (e) { /* empty */ }
+  return '';
+}
+
+export function activatePaintedDoorRecommendationsExperiment() {
+  window.optimizely = window.optimizely || [];
+  window.optimizely.push({
+    type: 'page',
+    pageName: PAINTED_DOOR_RECOMMENDATIONS_PAGE,
+  });
+}
+
+const useIsEnterpriseUser = () => {
+  const [enterpriseUser, setEnterpriseUser] = module.state.enterpriseUser({
+    isEnterpriseUser: false,
+    isLoading: true,
+  });
+
+  const initIsPending = useRequestIsPending(RequestKeys.initialize);
+  const hasAvailableDashboards = useHasAvailableDashboards();
+  const confirmationData = useEmailConfirmationData();
+
+  React.useEffect(() => {
+    if (!initIsPending && Object.keys(confirmationData).length && hasAvailableDashboards) {
+      setEnterpriseUser(prev => ({
+        ...prev,
+        isEnterpriseUser: true,
+        isLoading: false,
+      }));
+    } else if (!initIsPending && Object.keys(confirmationData).length && !hasAvailableDashboards) {
+      setEnterpriseUser(prev => ({
+        ...prev,
+        isEnterpriseUser: false,
+        isLoading: false,
+      }));
+    }
+  }, [initIsPending]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return enterpriseUser;
+};
+
+export const PaintedDoorExperimentContext = React.createContext();
+
+export const PaintedDoorExperimentProvider = ({ children }) => {
+  const [experimentData, setExperimentData] = module.state.experimentData({
+    experimentVariation: '',
+    isPaintedDoorNavbarBtnVariation: false,
+    isPaintedDoorWidgetBtnVariation: false,
+    experimentLoading: true,
+  });
+  const enterpriseUser = useIsEnterpriseUser();
+
+  const contextValue = React.useMemo(
+    () => ({
+      ...experimentData,
+    }),
+    [experimentData],
+  );
+
+  React.useEffect(() => {
+    let timer = null;
+    if (!enterpriseUser.isLoading && !enterpriseUser.isEnterpriseUser) {
+      activatePaintedDoorRecommendationsExperiment();
+      timer = setTimeout(() => {
+        const variation = getPaintedDoorRecommendationsExperimentVariation();
+        setExperimentData(prev => ({
+          ...prev,
+          experimentVariation: variation,
+          isPaintedDoorNavbarBtnVariation: variation === PAINTED_DOOR_RECS_EXP_NAVBAR_BTN_VARIATION,
+          isPaintedDoorWidgetBtnVariation: variation === PAINTED_DOOR_RECS_EXP_WIDGET_BTN_VARIATION,
+          experimentLoading: false,
+        }));
+        trackPaintedDoorVariationGroup(variation);
+      }, 500);
+    }
+    return () => clearTimeout(timer);
+  }, [enterpriseUser]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return (
+    <PaintedDoorExperimentContext.Provider value={contextValue}>
+      {children}
+    </PaintedDoorExperimentContext.Provider>
+  );
+};
+
+export const usePaintedDoorExperimentContext = () => React.useContext(PaintedDoorExperimentContext);
+
+PaintedDoorExperimentProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default usePaintedDoorExperimentContext;
--- a/src/snapshots/App.test.jsx.snap
+++ b/src/snapshots/App.test.jsx.snap
@@ -11,20 +11,22 @@ 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>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
+    <PaintedDoorExperimentProvider>
+      <LearnerDashboardHeader />
+      <main>
+        <Alert
+          variant="danger"
+        >
+          <ErrorPage
+            message="If you experience repeated failures, please email support at test-support-url"
+          />
+        </Alert>
+      </main>
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
  </div>
 </BrowserRouter>
 `;
@@ -40,16 +42,18 @@ exports[`App router component component no network failure snapshot 1`] = `
    </title>
  </HelmetWrapper>
  <div>
-    <LearnerDashboardHeader />
-    <main>
-      <ExperimentProvider>
-        <Dashboard />
-      </ExperimentProvider>
-    </main>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
+    <PaintedDoorExperimentProvider>
+      <LearnerDashboardHeader />
+      <main>
+        <ExperimentProvider>
+          <Dashboard />
+        </ExperimentProvider>
+      </main>
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
  </div>
 </BrowserRouter>
 `;
@@ -65,20 +69,22 @@ 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>
-    <Footer
-      logo="fakeLogo.png"
-    />
-    <ZendeskFab />
+    <PaintedDoorExperimentProvider>
+      <LearnerDashboardHeader />
+      <main>
+        <Alert
+          variant="danger"
+        >
+          <ErrorPage
+            message="If you experience repeated failures, please email support at test-support-url"
+          />
+        </Alert>
+      </main>
+      <Footer
+        logo="fakeLogo.png"
+      />
+      <ZendeskFab />
+    </PaintedDoorExperimentProvider>
  </div>
 </BrowserRouter>
 `;
--- a/src/components/ModalView/snapshots/index.test.jsx.snap
+++ b/src/components/ModalView/snapshots/index.test.jsx.snap
@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalView snapshot should renders default ModalView 1`] = `
+<div
+  className="containers"
+>
+  <ModalDialog
+    hasCloseButton={false}
+    isBlocking={true}
+    isFullscreenScroll={true}
+    isOpen={true}
+    onClose={[MockFunction]}
+    title=""
+  >
+    <ModalDialog.Header>
+      <Component>
+        <h3
+          className="mt-2"
+        >
+          Thank you for your interest!
+        </h3>
+      </Component>
+    </ModalDialog.Header>
+    <ModalDialog.Body>
+      <div>
+        <p
+          className="mt-2"
+        >
+          Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.
+        </p>
+        <p>
+          Would you like to be alerted when it becomes available?
+        </p>
+      </div>
+    </ModalDialog.Body>
+    <Component>
+      <ActionRow>
+        <Component
+          onClick={[Function]}
+          variant="tertiary"
+        >
+          Skip for now
+        </Component>
+        <Component
+          onClick={[Function]}
+          variant="primary"
+        >
+          Count me in!
+        </Component>
+      </ActionRow>
+    </Component>
+  </ModalDialog>
+</div>
+`;
--- a/src/components/ModalView/hooks.js
+++ b/src/components/ModalView/hooks.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { StrictDict } from 'utils';
+
+import * as module from './hooks';
+
+export const state = StrictDict({
+  isRecommendationsModalOpen: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useRecommendationsModal = () => {
+  const [isRecommendationsModalOpen, setIsRecommendationsModalOpen] = module.state.isRecommendationsModalOpen(false);
+  const toggleRecommendationsModal = () => setIsRecommendationsModalOpen(!isRecommendationsModalOpen);
+
+  return {
+    isRecommendationsModalOpen,
+    toggleRecommendationsModal,
+  };
+};
--- a/src/components/ModalView/hooks.test.js
+++ b/src/components/ModalView/hooks.test.js
@@ -0,0 +1,21 @@
+import { MockUseState } from 'testUtils';
+
+import * as hooks from './hooks';
+
+const state = new MockUseState(hooks);
+
+const {
+  useRecommendationsModal,
+} = hooks;
+
+describe('LearnerDashboardHeader hooks', () => {
+  describe('useRecommendationsModal', () => {
+    test('default state', () => {
+      state.mock();
+      const out = useRecommendationsModal();
+      state.expectInitializedWith(state.keys.isRecommendationsModalOpen, false);
+      out.toggleRecommendationsModal();
+      expect(state.values.isRecommendationsModalOpen).toEqual(true);
+    });
+  });
+});
--- a/src/components/ModalView/index.jsx
+++ b/src/components/ModalView/index.jsx
@@ -0,0 +1,70 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { ModalDialog, ActionRow } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import messages from './messages';
+
+import './index.scss';
+import {
+  trackPaintedDoorRecommendationHomeInterestBtnClicked,
+  trackPaintedDoorRecommendationHomeSkipBtnClicked,
+} from '../../widgets/RecommendationsPanel/recsPaintedDoorExpTrack';
+
+export const ModalView = ({
+  isOpen,
+  onClose,
+  variation,
+}) => {
+  const { formatMessage } = useIntl();
+
+  const handleSkipBtnClick = () => trackPaintedDoorRecommendationHomeSkipBtnClicked(variation);
+  const handleInterestBtnClick = () => trackPaintedDoorRecommendationHomeInterestBtnClicked(variation);
+
+  return (
+    <div className="containers">
+      <ModalDialog
+        title=""
+        isOpen={isOpen}
+        onClose={onClose}
+        hasCloseButton={false}
+        isFullscreenScroll
+        isBlocking
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            <h3 className="mt-2">{formatMessage(messages.recommendationsModalHeading)}</h3>
+          </ModalDialog.Title>
+        </ModalDialog.Header>
+        <ModalDialog.Body>
+          <div>
+            <p className="mt-2">{formatMessage(messages.recommendationsFeatureText)}</p>
+            <p>{formatMessage(messages.recommendationsAlertText)}</p>
+          </div>
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <ActionRow>
+            <ModalDialog.CloseButton variant="tertiary" onClick={handleSkipBtnClick}>
+              {formatMessage(messages.modalSkipButton)}
+            </ModalDialog.CloseButton>
+            <ModalDialog.CloseButton variant="primary" onClick={handleInterestBtnClick}>
+              {formatMessage(messages.modalCountMeButton)}
+            </ModalDialog.CloseButton>
+          </ActionRow>
+        </ModalDialog.Footer>
+      </ModalDialog>
+    </div>
+  );
+};
+
+ModalView.defaultProps = {
+  isOpen: false,
+};
+
+ModalView.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  isOpen: PropTypes.bool,
+  variation: PropTypes.string.isRequired,
+};
+
+export default ModalView;
--- a/src/components/ModalView/index.scss
+++ b/src/components/ModalView/index.scss
@@ -0,0 +1,13 @@
+@import "@edx/paragon/scss/core/core";
+
+@media (max-width: 464px) {
+    .pgn__action-row{
+        flex-direction: column;
+        gap: 5px;
+        button {
+            width: 100%;
+        }
+    }
+}
+
+
--- a/src/components/ModalView/index.test.jsx
+++ b/src/components/ModalView/index.test.jsx
@@ -0,0 +1,16 @@
+import { shallow } from 'enzyme';
+
+import ModalView from '.';
+
+describe('ModalView', () => {
+  const props = {
+    isOpen: true,
+    onClose: jest.fn(),
+  };
+  describe('snapshot', () => {
+    test('should renders default ModalView', () => {
+      const wrapper = shallow(<ModalView {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});
--- a/src/components/ModalView/messages.js
+++ b/src/components/ModalView/messages.js
@@ -0,0 +1,31 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  recommendationsFeatureText: {
+    id: 'RecommendationsPanel.recommendationsFeatureText',
+    defaultMessage: 'Personalized recommendations feature is not yet available. We are working hard on bringing it to your learner home in the near future.',
+    description: 'recommendations feature text',
+  },
+  recommendationsAlertText: {
+    id: 'RecommendationsPanel.recommendationsAlertText',
+    defaultMessage: 'Would you like to be alerted when it becomes available?',
+    description: 'recommendations alerted text',
+  },
+  recommendationsModalHeading: {
+    id: 'RecommendationsPanel.recommendationsModalHeading',
+    defaultMessage: 'Thank you for your interest!',
+    description: 'Heading of modal',
+  },
+  modalSkipButton: {
+    id: 'RecommendationsPanel.modalSkipButton',
+    defaultMessage: 'Skip for now',
+    description: 'button for Skip for now',
+  },
+  modalCountMeButton: {
+    id: 'RecommendationsPanel.modalCountMeButton',
+    defaultMessage: 'Count me in!',
+    description: 'button for Count me in!',
+  },
+});
+
+export default messages;
--- a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx
+++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx
@@ -12,7 +12,13 @@ import { reduxHooks } from 'hooks';

 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 && (
@@ -40,6 +57,14 @@ export const CollapseMenuBody = ({ isOpen }) => {
        >
          {formatMessage(messages.discoverNew)}
        </Button>
+        {(!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>
@@ -92,6 +117,11 @@ export const CollapseMenuBody = ({ isOpen }) => {
            </Button>
          </>
        )}
+        <ModalView
+          isOpen={isRecommendationsModalOpen}
+          onClose={toggleRecommendationsModal}
+          variation={experimentVariation}
+        />
      </div>
    )
  );
--- a/src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.test.jsx
+++ b/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}")`),
 }));
--- a/src/containers/LearnerDashboardHeader/CollapsedHeader/snapshots/CollapseMenuBody.test.jsx.snap
+++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/snapshots/CollapseMenuBody.test.jsx.snap
@@ -13,22 +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>
  <Button
    as="a"
-    href="http://localhost:18000/support"
    variant="inverse-primary"
  >
    Help
@@ -42,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>
 `;

@@ -79,25 +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>
  <Button
    as="a"
-    href="http://localhost:18000/support"
    variant="inverse-primary"
  >
    Help
  </Button>
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+  />
 </div>
 `;
--- a/src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx
+++ b/src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx
@@ -36,7 +36,9 @@ export const CollapsedHeader = () => {
          />
          <BrandLogo />
        </header>
-        <CollapseMenuBody isOpen={isOpen} />
+        <CollapseMenuBody
+          isOpen={isOpen}
+        />
      </>
    )
  );
--- a/src/containers/LearnerDashboardHeader/ExpandedHeader/snapshots/index.test.jsx.snap
+++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/snapshots/index.test.jsx.snap
@@ -46,6 +46,10 @@ exports[`ExpandedHeader render 1`] = `
    </Button>
  </div>
  <AuthenticatedUserDropdown />
+  <ModalView
+    isOpen={false}
+    onClose={[MockFunction]}
+  />
 </header>
 `;

--- a/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx
+++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx
@@ -10,15 +10,32 @@ import { reduxHooks } from 'hooks';
 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 && (
@@ -51,6 +68,15 @@ export const ExpandedHeader = () => {
        >
          {formatMessage(messages.discoverNew)}
        </Button>
+        {(!experimentLoading && isPaintedDoorNavbarBtnVariation) && (
+        <Button
+          variant="inverse-primary"
+          className="p-4"
+          onClick={handleSeeAllRecommendationsClick}
+        >
+          {formatMessage(messages.recommendedForYou)}
+        </Button>
+        )}
        <span className="flex-grow-1" />
        <Button
          as="a"
@@ -63,6 +89,11 @@ export const ExpandedHeader = () => {
      </div>

      <AuthenticatedUserDropdown />
+      <ModalView
+        isOpen={isRecommendationsModalOpen}
+        onClose={toggleRecommendationsModal}
+        variation={experimentVariation}
+      />
    </header>
    )
  );
--- a/src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx
+++ b/src/containers/LearnerDashboardHeader/ExpandedHeader/index.test.jsx
@@ -3,6 +3,7 @@ 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',
@@ -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);
--- a/src/containers/LearnerDashboardHeader/messages.js
+++ b/src/containers/LearnerDashboardHeader/messages.js
@@ -51,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',
--- a/src/widgets/LookingForChallengeWidget/index.jsx
+++ b/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
--- a/src/widgets/LookingForChallengeWidget/index.test.jsx
+++ b/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();
+  });
 });
--- a/src/widgets/RecommendationsPanel/LoadedView.jsx
+++ b/src/widgets/RecommendationsPanel/LoadedView.jsx
@@ -10,8 +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 '../../RecsPaintedDoorExpContext';
+import { useRecommendationsModal } from '../../components/ModalView/hooks';
+import { trackPaintedDoorRecommendationHomeBtnClicked } from './recsPaintedDoorExpTrack';

 export const LoadedView = ({
  courses,
@@ -19,33 +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">
-        <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}
+      />
+    </>
  );
 };

--- a/src/widgets/RecommendationsPanel/LoadedView.test.jsx
+++ b/src/widgets/RecommendationsPanel/LoadedView.test.jsx
@@ -19,11 +19,19 @@ jest.mock('./track', () => ({
  findCoursesWidgetClicked: (href) => jest.fn().mockName(`track.findCoursesWidgetClicked('${href}')`),
 }));
 jest.mock('./components/CourseCard', () => 'CourseCard');
+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,
  };
  describe('snapshot', () => {
    test('without personalize recommendation', () => {
--- a/src/widgets/RecommendationsPanel/snapshots/LoadedView.test.jsx.snap
+++ b/src/widgets/RecommendationsPanel/snapshots/LoadedView.test.jsx.snap
@@ -1,151 +1,163 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`RecommendationsPanel LoadedView snapshot 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>
+<Fragment>
  <div
-    className="text-center explore-courses-btn"
+    className="p-4 w-100 panel-background"
  >
-    <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"
+    <h3
+      className="pb-2"
    >
-      Explore courses
-    </Button>
+      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 snapshot 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>
+<Fragment>
  <div
-    className="text-center explore-courses-btn"
+    className="p-4 w-100 panel-background"
  >
-    <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"
+    <h3
+      className="pb-2"
    >
-      Explore courses
-    </Button>
+      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>
 `;
--- a/src/widgets/RecommendationsPanel/index.jsx
+++ b/src/widgets/RecommendationsPanel/index.jsx
@@ -19,7 +19,10 @@ export const RecommendationsPanel = () => {
  }
  if (isLoaded && courses.length > 0) {
    return (
-      <LoadedView courses={courses} isControl={isControl} />
+      <LoadedView
+        courses={courses}
+        isControl={isControl}
+      />
    );
  }
  if (isFailed) {
--- a/src/widgets/RecommendationsPanel/index.test.jsx
+++ b/src/widgets/RecommendationsPanel/index.test.jsx
@@ -7,10 +7,14 @@ import mockData from './mockData';
 import LoadedView from './LoadedView';
 import LoadingView from './LoadingView';
 import RecommendationsPanel from '.';
+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');
@@ -21,6 +25,8 @@ describe('RecommendationsPanel snapshot', () => {
  const defaultLoadedViewProps = {
    courses: [],
    isControl: false,
+    setIsRecommendationsModalOpen: jest.fn(),
+    isRecommendationsModalOpen: false,
  };
  const defaultValues = {
    isFailed: false,
@@ -29,6 +35,10 @@ describe('RecommendationsPanel snapshot', () => {
    ...defaultLoadedViewProps,
  };
  it('displays LoadingView if request is loading', () => {
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
+    });
    hooks.useRecommendationPanelData.mockReturnValueOnce({
      ...defaultValues,
      isLoading: true,
@@ -36,16 +46,23 @@ describe('RecommendationsPanel snapshot', () => {
    expect(shallow(<RecommendationsPanel />)).toMatchObject(shallow(<LoadingView />));
  });
  it('displays LoadedView with courses if request is loaded', () => {
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
+    });
    hooks.useRecommendationPanelData.mockReturnValueOnce({
      ...defaultValues,
      courses,
      isLoaded: true,
    });
-    expect(shallow(<RecommendationsPanel />)).toMatchObject(
-      shallow(<LoadedView {...defaultLoadedViewProps} courses={courses} />),
-    );
+    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(),
+    });
    hooks.useRecommendationPanelData.mockReturnValueOnce({
      ...defaultValues,
      isFailed: true,
@@ -55,6 +72,10 @@ describe('RecommendationsPanel snapshot', () => {
    );
  });
  it('defaults to LookingForChallengeWidget if no flags are true', () => {
+    useRecommendationsModal.mockReturnValueOnce({
+      isRecommendationsModalOpen: false,
+      toggleRecommendationsModal: jest.fn(),
+    });
    hooks.useRecommendationPanelData.mockReturnValueOnce({
      ...defaultValues,
    });
--- a/src/widgets/RecommendationsPanel/messages.js
+++ b/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;
--- a/src/widgets/RecommendationsPanel/recsPaintedDoorExpTrack.js
+++ b/src/widgets/RecommendationsPanel/recsPaintedDoorExpTrack.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/RecommendationsPanel/track.js
+++ b/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,
 };
Author	SHA1	Message	Date
Blue	a20ec2c3e6	Ahtesham/VAN-1615/modal fixes (#194 )	2023-08-22 18:19:19 +05:00
ahtesham-quraish	362d2406d3	fix: modal outside click fix Description: Modal window should not closed when click outside the modal VAN-1615	2023-08-22 13:41:49 +05:00
Syed Sajjad Hussain Shah	736abb4247	feat: add experiment and eventing to recommendations painted door exp (#191 )	2023-08-18 18:31:21 +05:00
Syed Sajjad Hussain Shah	05bdf4ee02	feat: add experiment and eventing to recommendations painted door exp VAN-1604	2023-08-18 18:00:23 +05:00
Blue	30fadadb26	Ahtesham/van 1601/stack buttons (#190 ) Stacked the button for modal window for mobile screen	2023-08-17 12:52:42 +05:00
ahtesham-quraish	825cca2d8d	fix: buttons are stacked in modal window Description: We have stacked the buttons those come in modal window VAN-1601	2023-08-17 12:41:28 +05:00
Blue	3bad4897ba	feat: add recommendations modal (#189 )	2023-08-16 21:23:44 +05:00
Blue	743c233f6d	Merge branch 'master' into ahtesham/VAN-1601/design	2023-08-16 21:13:25 +05:00
ahtesham-quraish	6cecc38e85	feat: add recommendations modal Description: Add recommendations buttons and modal for painted door experiment VAN-1601	2023-08-16 12:52:54 +05:00