feat: add experiment and eventing to recommendations painted door exp (#191)

src/containers/LearnerDashboardHeader/CollapsedHeader/CollapseMenuBody.jsx

@@ -14,15 +14,31 @@ 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, isRecommendationsModalOpen, setIsRecommendationsModalOpen }) => {
+export const CollapseMenuBody = ({ isOpen }) => {
   const { formatMessage } = useIntl();
   const { authenticatedUser } = React.useContext(AppContext);
 
   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 && (
@@ -41,12 +57,14 @@ export const CollapseMenuBody = ({ isOpen, isRecommendationsModalOpen, setIsReco
         >
           {formatMessage(messages.discoverNew)}
         </Button>
+        {(!experimentLoading && isPaintedDoorNavbarBtnVariation) && (
         <Button
           variant="inverse-primary"
-          onClick={setIsRecommendationsModalOpen}
+          onClick={handleSeeAllRecommendationsClick}
         >
           {formatMessage(messages.recommendedForYou)}
         </Button>
+        )}
         <Button as="a" href={getConfig().SUPPORT_URL} variant="inverse-primary">
           {formatMessage(messages.help)}
         </Button>
@@ -99,7 +117,11 @@ export const CollapseMenuBody = ({ isOpen, isRecommendationsModalOpen, setIsReco
             </Button>
           </>
         )}
-        <ModalView isOpen={isRecommendationsModalOpen} onClose={setIsRecommendationsModalOpen} />
+        <ModalView
+          isOpen={isRecommendationsModalOpen}
+          onClose={toggleRecommendationsModal}
+          variation={experimentVariation}
+        />
       </div>
     )
   );
@@ -107,13 +129,6 @@ export const CollapseMenuBody = ({ isOpen, isRecommendationsModalOpen, setIsReco
 
 CollapseMenuBody.propTypes = {
   isOpen: PropTypes.bool.isRequired,
-  isRecommendationsModalOpen: PropTypes.bool,
-  setIsRecommendationsModalOpen: PropTypes.func,
-};
-
-CollapseMenuBody.defaultProps = {
-  isRecommendationsModalOpen: false,
-  setIsRecommendationsModalOpen: () => {},
 };
 
 export default CollapseMenuBody;

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

@@ -30,6 +30,13 @@ jest.mock('hooks', () => ({
   },
 }));
 
+jest.mock('../../../components/ModalView/hooks', () => ({
+  useRecommendationsModal: jest.fn(() => ({
+    isRecommendationsModalOpen: false,
+    toggleRecommendationsModal: jest.fn(),
+  })),
+}));
+
 jest.mock('../hooks', () => ({
   findCoursesNavDropdownClicked: (url) => jest.fn().mockName(`findCoursesNavDropdownClicked("${url}")`),
 }));

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

@@ -26,12 +26,6 @@ exports[`CollapseMenuBody render 1`] = `
   >
     Discover New
   </Button>
-  <Button
-    onClick={[Function]}
-    variant="inverse-primary"
-  >
-    Recommended for you
-  </Button>
   <Button
     as="a"
     variant="inverse-primary"
@@ -74,7 +68,7 @@ exports[`CollapseMenuBody render 1`] = `
   </Button>
   <ModalView
     isOpen={false}
-    onClose={[Function]}
+    onClose={[MockFunction]}
   />
 </div>
 `;
@@ -107,12 +101,6 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   >
     Discover New
   </Button>
-  <Button
-    onClick={[Function]}
-    variant="inverse-primary"
-  >
-    Recommended for you
-  </Button>
   <Button
     as="a"
     variant="inverse-primary"
@@ -121,7 +109,7 @@ exports[`CollapseMenuBody render unauthenticated 1`] = `
   </Button>
   <ModalView
     isOpen={false}
-    onClose={[Function]}
+    onClose={[MockFunction]}
   />
 </div>
 `;

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

@@ -20,8 +20,6 @@ exports[`CollapsedHeader renders 1`] = `
   </header>
   <mockConstructor
     isOpen={false}
-    isRecommendationsModalOpen={false}
-    setIsRecommendationsModalOpen={[MockFunction]}
   />
 </Fragment>
 `;
@@ -45,8 +43,6 @@ exports[`CollapsedHeader renders with isOpen true 1`] = `
   </header>
   <mockConstructor
     isOpen={true}
-    isRecommendationsModalOpen={false}
-    setIsRecommendationsModalOpen={[MockFunction]}
   />
 </Fragment>
 `;

src/containers/LearnerDashboardHeader/CollapsedHeader/index.jsx

@@ -5,7 +5,6 @@ import { Menu, Close } from '@edx/paragon/icons';
 import { IconButton, Icon } from '@edx/paragon';
 
 import { useLearnerDashboardHeaderData, useIsCollapsed } from '../hooks';
-import { useRecommendationsModal } from '../../../components/ModalView/hooks';
 
 import CollapseMenuBody from './CollapseMenuBody';
 import BrandLogo from '../BrandLogo';
@@ -16,7 +15,6 @@ export const CollapsedHeader = () => {
   const { formatMessage } = useIntl();
   const isCollapsed = useIsCollapsed();
   const { isOpen, toggleIsOpen } = useLearnerDashboardHeaderData();
-  const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal();
 
   return (
     isCollapsed && (
@@ -40,8 +38,6 @@ export const CollapsedHeader = () => {
         </header>
         <CollapseMenuBody
           isOpen={isOpen}
-          setIsRecommendationsModalOpen={toggleRecommendationsModal}
-          isRecommendationsModalOpen={isRecommendationsModalOpen}
         />
       </>
     )

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

@@ -3,7 +3,6 @@ import { shallow } from 'enzyme';
 import CollapsedHeader from '.';
 
 import { useLearnerDashboardHeaderData, useIsCollapsed } from '../hooks';
-import { useRecommendationsModal } from '../../../components/ModalView/hooks';
 
 jest.mock('../BrandLogo', () => jest.fn(() => 'BrandLogo'));
 jest.mock('./CollapseMenuBody', () => jest.fn(() => 'CollapseMenuBody'));
@@ -16,26 +15,14 @@ jest.mock('../hooks', () => ({
   })),
 }));
 
-jest.mock('../../../components/ModalView/hooks', () => ({
-  useRecommendationsModal: jest.fn(),
-}));
-
 describe('CollapsedHeader', () => {
   it('renders', () => {
-    useRecommendationsModal.mockReturnValueOnce({
-      isRecommendationsModalOpen: false,
-      toggleRecommendationsModal: jest.fn(),
-    });
     const wrapper = shallow(<CollapsedHeader />);
     expect(wrapper).toMatchSnapshot();
   });
 
   it('render nothing if not collapsed', () => {
     useIsCollapsed.mockReturnValueOnce(false);
-    useRecommendationsModal.mockReturnValueOnce({
-      isRecommendationsModalOpen: false,
-      toggleRecommendationsModal: jest.fn(),
-    });
     const wrapper = shallow(<CollapsedHeader />);
     expect(wrapper).toMatchSnapshot();
   });
@@ -45,10 +32,6 @@ describe('CollapsedHeader', () => {
       isOpen: true,
       toggleIsOpen: jest.fn().mockName('toggleIsOpen'),
     });
-    useRecommendationsModal.mockReturnValueOnce({
-      isRecommendationsModalOpen: false,
-      toggleRecommendationsModal: jest.fn(),
-    });
     const wrapper = shallow(<CollapsedHeader />);
     expect(wrapper).toMatchSnapshot();
   });

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

@@ -33,13 +33,6 @@ exports[`ExpandedHeader render 1`] = `
     >
       Discover New
     </Button>
-    <Button
-      className="p-4"
-      onClick={[MockFunction]}
-      variant="inverse-primary"
-    >
-      Recommended for you
-    </Button>
     <span
       className="flex-grow-1"
     />

src/containers/LearnerDashboardHeader/ExpandedHeader/index.jsx

@@ -14,6 +14,10 @@ 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();
@@ -22,6 +26,16 @@ export const ExpandedHeader = () => {
   const { isRecommendationsModalOpen, toggleRecommendationsModal } = useRecommendationsModal();
 
   const exploreCoursesClick = findCoursesNavClicked(urls.baseAppUrl(courseSearchUrl));
+  const {
+    experimentVariation,
+    isPaintedDoorNavbarBtnVariation,
+    experimentLoading,
+  } = usePaintedDoorExperimentContext();
+
+  const handleSeeAllRecommendationsClick = () => {
+    toggleRecommendationsModal();
+    trackPaintedDoorRecommendationHomeBtnClicked(experimentVariation);
+  };
 
   return (
     !isCollapsed && (
@@ -54,13 +68,15 @@ export const ExpandedHeader = () => {
         >
           {formatMessage(messages.discoverNew)}
         </Button>
+        {(!experimentLoading && isPaintedDoorNavbarBtnVariation) && (
         <Button
           variant="inverse-primary"
           className="p-4"
-          onClick={toggleRecommendationsModal}
+          onClick={handleSeeAllRecommendationsClick}
         >
           {formatMessage(messages.recommendedForYou)}
         </Button>
+        )}
         <span className="flex-grow-1" />
         <Button
           as="a"
@@ -73,7 +89,11 @@ export const ExpandedHeader = () => {
       </div>
 
       <AuthenticatedUserDropdown />
-      <ModalView isOpen={isRecommendationsModalOpen} onClose={toggleRecommendationsModal} />
+      <ModalView
+        isOpen={isRecommendationsModalOpen}
+        onClose={toggleRecommendationsModal}
+        variation={experimentVariation}
+      />
     </header>
     )
   );