feat: add recommendations modal

Description:
Add recommendations buttons and modal for painted door experiment
VAN-1601

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -12,9 +12,10 @@ import { reduxHooks } from 'hooks';
 
 import { findCoursesNavDropdownClicked } from '../hooks';
 
+import ModalView from '../../../components/ModalView';
 import messages from '../messages';
 
-export const CollapseMenuBody = ({ isOpen }) => {
+export const CollapseMenuBody = ({ isOpen, isRecommendationModalOpen, setRecommendationModal }) => {
   const { formatMessage } = useIntl();
   const { authenticatedUser } = React.useContext(AppContext);
 
@@ -40,6 +41,12 @@ export const CollapseMenuBody = ({ isOpen }) => {
         >
           {formatMessage(messages.discoverNew)}
         </Button>
+        <Button
+          variant="inverse-primary"
+          onClick={() => setRecommendationModal(true)}
+        >
+          {formatMessage(messages.recommendedForYou)}
+        </Button>
         <Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
           {formatMessage(messages.help)}
         </Button>
@@ -92,6 +99,7 @@ export const CollapseMenuBody = ({ isOpen }) => {
             </Button>
           </>
         )}
+        <ModalView isOpen={isRecommendationModalOpen} onClose={setRecommendationModal} />
       </div>
     )
   );
@@ -99,6 +107,13 @@ export const CollapseMenuBody = ({ isOpen }) => {
 
 CollapseMenuBody.propTypes = {
   isOpen: PropTypes.bool.isRequired,
+  isRecommendationModalOpen: PropTypes.bool,
+  setRecommendationModal: PropTypes.func,
+};
+
+CollapseMenuBody.defaultProps = {
+  isRecommendationModalOpen: false,
+  setRecommendationModal: () => {},
 };
 
 export default CollapseMenuBody;

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

@@ -26,6 +26,12 @@ exports[`CollapseMenuBody render 1`] = `
   >
     Discover New
   </Button>
+  <Button
+    onClick={[Function]}
+    variant="inverse-primary"
+  >
+    Recommended for you
+  </Button>
   <Button
     as="a"
     href="http://localhost:18000/support"
@@ -61,6 +67,10 @@ exports[`CollapseMenuBody render 1`] = `
   >
     Sign Out
   </Button>
+  <ModalView
+    isOpen={false}
+    onClose={[Function]}
+  />
 </div>
 `;
 
@@ -92,6 +102,12 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   >
     Discover New
   </Button>
+  <Button
+    onClick={[Function]}
+    variant="inverse-primary"
+  >
+    Recommended for you
+  </Button>
   <Button
     as="a"
     href="http://localhost:18000/support"
@@ -99,5 +115,9 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   >
     Help
   </Button>
+  <ModalView
+    isOpen={false}
+    onClose={[Function]}
+  />
 </div>
 `;

src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Menu, Close } from '@edx/paragon/icons';
@@ -15,6 +15,7 @@ export const CollapsedHeader = () => {
   const { formatMessage } = useIntl();
   const isCollapsed = useIsCollapsed();
   const { isOpen, toggleIsOpen } = useLearnerDashboardHeaderData();
+  const [isRecommendationModalOpen, setRecommendationModal] = useState(false);
 
   return (
     isCollapsed && (
@@ -36,7 +37,11 @@ export const CollapsedHeader = () => {
           />
           <BrandLogo />
         </header>
-        <CollapseMenuBody isOpen={isOpen} />
+        <CollapseMenuBody
+          isOpen={isOpen}
+          setRecommendationModal={setRecommendationModal}
+          isRecommendationModalOpen={isRecommendationModalOpen}
+        />
       </>
     )
   );

src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
@@ -11,12 +11,14 @@ import AuthenticatedUserDropdown from './AuthenticatedUserDropdown';
 
 import { useIsCollapsed, findCoursesNavClicked } from '../hooks';
 import messages from '../messages';
+import ModalView from '../../../components/ModalView';
 import BrandLogo from '../BrandLogo';
 
 export const ExpandedHeader = () => {
   const { formatMessage } = useIntl();
   const { courseSearchUrl } = reduxHooks.usePlatformSettingsData();
   const isCollapsed = useIsCollapsed();
+  const [isRecommendationModalOpen, setRecommendationModal] = useState(false);
 
   const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
 
@@ -51,6 +53,13 @@ export const ExpandedHeader = () => {
         >
           {formatMessage(messages.discoverNew)}
         </Button>
+        <Button
+          variant="inverse-primary"
+          className="p-4"
+          onClick={() => setRecommendationModal(true)}
+        >
+          {formatMessage(messages.recommendedForYou)}
+        </Button>
         <span className="flex-grow-1" />
         <Button
           as="a"
@@ -63,6 +72,7 @@ export const ExpandedHeader = () => {
       </div>
 
       <AuthenticatedUserDropdown />
+      <ModalView isOpen={isRecommendationModalOpen} onClose={setRecommendationModal} />
     </header>
     )
   );

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',