From bc92a386ffca35c911ca34b21a20696de33caf04 Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Sat, 8 Jul 2023 09:37:45 +0200
Subject: [PATCH 01/10] feat: Implemented product recommendations experiment

---
 src/App.jsx                                   |   7 +-
 src/App.test.jsx                              |   6 +-
 src/__snapshots__/App.test.jsx.snap           |   4 +-
 .../WidgetContainers/LoadedSidebar/index.jsx  |   4 +-
 .../LoadedSidebar/index.test.jsx              |  18 +-
 .../NoCoursesSidebar/index.jsx                |   4 +-
 .../NoCoursesSidebar/index.test.jsx           |  18 +-
 .../WidgetContainers/WidgetFooter/index.jsx   |   5 +-
 .../WidgetFooter/index.test.jsx               |  17 +-
 src/experimentContext.jsx                     |  74 ++++++
 src/experimentContext.test.jsx                | 158 +++++++++++++
 src/setupTest.jsx                             |   1 +
 src/test/app.test.jsx                         |   5 +
 src/widgets/ProductRecommendations/api.js     |   4 +
 .../ProductRecommendations/api.test.js        |  10 +-
 .../components/ProductCard.jsx                |  89 +++++---
 .../components/ProductCard.test.jsx           |  80 +++++--
 .../components/ProductCardContainer.jsx       |   6 +-
 .../components/ProductCardContainer.test.jsx  |   3 +-
 .../components/ProductCardHeader.jsx          |  24 +-
 .../components/ProductCardHeader.test.jsx     |  43 +++-
 .../__snapshots__/ProductCard.test.jsx.snap   |   1 +
 .../ProductCardContainer.test.jsx.snap        |   6 +
 .../ProductCardHeader.test.jsx.snap           |   3 +-
 .../ProductRecommendations/constants.js       |   7 +
 src/widgets/ProductRecommendations/hooks.js   |  93 +++++++-
 .../ProductRecommendations/hooks.test.js      | 211 +++++++++++++++++-
 .../optimizelyExperiment.js                   |   5 +-
 .../optimizelyExperiment.test.js              |  20 +-
 .../ProductRecommendations/testData.js        |   7 +-
 src/widgets/ProductRecommendations/track.js   |   8 +-
 .../ProductRecommendations/track.test.js      |  30 ++-
 src/widgets/ProductRecommendations/utils.js   |  23 +-
 33 files changed, 852 insertions(+), 142 deletions(-)
 create mode 100644 src/experimentContext.jsx
 create mode 100644 src/experimentContext.test.jsx
 create mode 100644 src/widgets/ProductRecommendations/constants.js

diff --git a/src/App.jsx b/src/App.jsx
index 5adba841..51ec36e7 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,6 +19,7 @@ import {
 import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 import ZendeskFab from 'components/ZendeskFab';
+import { ExperimentProvider } from 'experimentContext';
 
 import track from 'tracking';
 
@@ -84,7 +85,11 @@ export const App = () => {
               <Alert variant="danger">
                 <ErrorPage message={formatMessage(messages.errorMessage, { supportEmail })} />
               </Alert>
-            ) : (<Dashboard />)}
+            ) : (
+              <ExperimentProvider>
+                <Dashboard />
+              </ExperimentProvider>
+            )}
         </main>
         <Footer logo={process.env.LOGO_POWERED_BY_OPEN_EDX_URL_SVG} />
         <ZendeskFab />
diff --git a/src/App.test.jsx b/src/App.test.jsx
index bc57ea77..b9af20ab 100644
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -13,6 +13,7 @@ import { RequestKeys } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
+import { ExperimentProvider } from 'experimentContext';
 import { App } from './App';
 import messages from './messages';
 
@@ -21,6 +22,9 @@ jest.mock('@edx/frontend-component-footer', () => 'Footer');
 jest.mock('containers/Dashboard', () => 'Dashboard');
 jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
 jest.mock('components/ZendeskFab', () => 'ZendeskFab');
+jest.mock('experimentContext', () => ({
+  ExperimentProvider: 'ExperimentProvider',
+}));
 jest.mock('data/redux', () => ({
   selectors: 'redux.selectors',
   actions: 'redux.actions',
@@ -71,7 +75,7 @@ describe('App router component', () => {
       runBasicTests();
       it('loads dashboard', () => {
         expect(el.find('main')).toMatchObject(shallow(
-          <main><Dashboard /></main>,
+          <main><ExperimentProvider><Dashboard /></ExperimentProvider></main>,
         ));
       });
     });
diff --git a/src/__snapshots__/App.test.jsx.snap b/src/__snapshots__/App.test.jsx.snap
index d819557e..cec5dc86 100644
--- a/src/__snapshots__/App.test.jsx.snap
+++ b/src/__snapshots__/App.test.jsx.snap
@@ -42,7 +42,9 @@ exports[`App router component component no network failure snapshot 1`] = `
   <div>
     <LearnerDashboardHeader />
     <main>
-      <Dashboard />
+      <ExperimentProvider>
+        <Dashboard />
+      </ExperimentProvider>
     </main>
     <Footer
       logo="fakeLogo.png"
diff --git a/src/containers/WidgetContainers/LoadedSidebar/index.jsx b/src/containers/WidgetContainers/LoadedSidebar/index.jsx
index 6dc0c5cd..34d36f15 100644
--- a/src/containers/WidgetContainers/LoadedSidebar/index.jsx
+++ b/src/containers/WidgetContainers/LoadedSidebar/index.jsx
@@ -5,9 +5,9 @@ import RecommendationsPanel from 'widgets/RecommendationsPanel';
 import hooks from 'widgets/ProductRecommendations/hooks';
 
 export const WidgetSidebar = ({ setSidebarShowing }) => {
-  const { shouldShowFooter } = hooks.useShowRecommendationsFooter();
+  const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (!shouldShowFooter) {
+  if (!inRecommendationsVariant && isExperimentActive) {
     setSidebarShowing(true);
 
     return (
diff --git a/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx b/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx
index b9bffdb2..2efbe9fe 100644
--- a/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx
+++ b/src/containers/WidgetContainers/LoadedSidebar/index.test.jsx
@@ -18,19 +18,31 @@ describe('WidgetSidebar', () => {
   describe('snapshots', () => {
     test('default', () => {
       hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-        mockFooterRecommendationsHook.dontShowOrLoad,
+        mockFooterRecommendationsHook.activeControl,
       );
       const wrapper = shallow(<WidgetSidebar {...props} />);
+
       expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
       expect(wrapper).toMatchSnapshot();
     });
   });
 
-  test('is hidden if footer is shown', () => {
+  test('is hidden when the has the default values', () => {
+    hooks.useShowRecommendationsFooter.mockReturnValueOnce(
+      mockFooterRecommendationsHook.default,
+    );
+    const wrapper = shallow(<WidgetSidebar {...props} />);
+
+    expect(props.setSidebarShowing).not.toHaveBeenCalled();
+    expect(wrapper.type()).toBeNull();
+  });
+
+  test('is hidden when the has the treatment values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.showDontLoad,
+      mockFooterRecommendationsHook.activeTreatment,
     );
     const wrapper = shallow(<WidgetSidebar {...props} />);
+
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });
diff --git a/src/containers/WidgetContainers/NoCoursesSidebar/index.jsx b/src/containers/WidgetContainers/NoCoursesSidebar/index.jsx
index 091940b7..c3e669ad 100644
--- a/src/containers/WidgetContainers/NoCoursesSidebar/index.jsx
+++ b/src/containers/WidgetContainers/NoCoursesSidebar/index.jsx
@@ -5,9 +5,9 @@ import RecommendationsPanel from 'widgets/RecommendationsPanel';
 import hooks from 'widgets/ProductRecommendations/hooks';
 
 export const WidgetSidebar = ({ setSidebarShowing }) => {
-  const { shouldShowFooter } = hooks.useShowRecommendationsFooter();
+  const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (!shouldShowFooter) {
+  if (!inRecommendationsVariant && isExperimentActive) {
     setSidebarShowing(true);
 
     return (
diff --git a/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx b/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx
index b9bffdb2..2efbe9fe 100644
--- a/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx
+++ b/src/containers/WidgetContainers/NoCoursesSidebar/index.test.jsx
@@ -18,19 +18,31 @@ describe('WidgetSidebar', () => {
   describe('snapshots', () => {
     test('default', () => {
       hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-        mockFooterRecommendationsHook.dontShowOrLoad,
+        mockFooterRecommendationsHook.activeControl,
       );
       const wrapper = shallow(<WidgetSidebar {...props} />);
+
       expect(props.setSidebarShowing).toHaveBeenCalledWith(true);
       expect(wrapper).toMatchSnapshot();
     });
   });
 
-  test('is hidden if footer is shown', () => {
+  test('is hidden when the has the default values', () => {
+    hooks.useShowRecommendationsFooter.mockReturnValueOnce(
+      mockFooterRecommendationsHook.default,
+    );
+    const wrapper = shallow(<WidgetSidebar {...props} />);
+
+    expect(props.setSidebarShowing).not.toHaveBeenCalled();
+    expect(wrapper.type()).toBeNull();
+  });
+
+  test('is hidden when the has the treatment values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.showDontLoad,
+      mockFooterRecommendationsHook.activeTreatment,
     );
     const wrapper = shallow(<WidgetSidebar {...props} />);
+
     expect(props.setSidebarShowing).not.toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });
diff --git a/src/containers/WidgetContainers/WidgetFooter/index.jsx b/src/containers/WidgetContainers/WidgetFooter/index.jsx
index 45b6acec..ed0a8271 100644
--- a/src/containers/WidgetContainers/WidgetFooter/index.jsx
+++ b/src/containers/WidgetContainers/WidgetFooter/index.jsx
@@ -4,9 +4,10 @@ import ProductRecommendations from 'widgets/ProductRecommendations';
 import hooks from 'widgets/ProductRecommendations/hooks';
 
 export const WidgetFooter = () => {
-  const { shouldShowFooter, shouldLoadFooter } = hooks.useShowRecommendationsFooter();
+  hooks.useActivateRecommendationsExperiment();
+  const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
 
-  if (shouldShowFooter && shouldLoadFooter) {
+  if (inRecommendationsVariant && isExperimentActive) {
     return (
       <div className="widget-footer">
         <ProductRecommendations />
diff --git a/src/containers/WidgetContainers/WidgetFooter/index.test.jsx b/src/containers/WidgetContainers/WidgetFooter/index.test.jsx
index 7c739361..df2aedc6 100644
--- a/src/containers/WidgetContainers/WidgetFooter/index.test.jsx
+++ b/src/containers/WidgetContainers/WidgetFooter/index.test.jsx
@@ -6,6 +6,7 @@ import WidgetFooter from '.';
 
 jest.mock('widgets/LookingForChallengeWidget', () => 'LookingForChallengeWidget');
 jest.mock('widgets/ProductRecommendations/hooks', () => ({
+  useActivateRecommendationsExperiment: jest.fn(),
   useShowRecommendationsFooter: jest.fn(),
 }));
 
@@ -13,26 +14,32 @@ describe('WidgetFooter', () => {
   describe('snapshots', () => {
     test('default', () => {
       hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-        mockFooterRecommendationsHook.showAndLoad,
+        mockFooterRecommendationsHook.activeTreatment,
       );
       const wrapper = shallow(<WidgetFooter />);
+
+      expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
       expect(wrapper).toMatchSnapshot();
     });
   });
 
-  test('is hidden when shouldShowFooter is false but shouldLoadFooter is true', () => {
+  test('is hidden when the experiment has the default values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.loadDontShow,
+      mockFooterRecommendationsHook.default,
     );
     const wrapper = shallow(<WidgetFooter />);
+
+    expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });
 
-  test('is hidden when shouldLoadFooter is false but shouldShowFooter is true', () => {
+  test('is hidden when the experiment has the control values', () => {
     hooks.useShowRecommendationsFooter.mockReturnValueOnce(
-      mockFooterRecommendationsHook.showDontLoad,
+      mockFooterRecommendationsHook.activeControl,
     );
     const wrapper = shallow(<WidgetFooter />);
+
+    expect(hooks.useActivateRecommendationsExperiment).toHaveBeenCalled();
     expect(wrapper.type()).toBeNull();
   });
 });
diff --git a/src/experimentContext.jsx b/src/experimentContext.jsx
new file mode 100644
index 00000000..89f02924
--- /dev/null
+++ b/src/experimentContext.jsx
@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useWindowSize, breakpoints } from '@edx/paragon';
+import { StrictDict } from 'utils';
+import api from 'widgets/ProductRecommendations/api';
+import * as module from './experimentContext';
+
+export const state = StrictDict({
+  experiment: (val) => React.useState(val), // eslint-disable-line
+  countryCode: (val) => React.useState(val), // eslint-disable-line
+});
+
+export const useCountryCode = (setCountryCode) => {
+  React.useEffect(() => {
+    let isMounted = true;
+
+    api
+      .fetchRecommendationsContext()
+      .then((response) => {
+        if (isMounted) {
+          setCountryCode(response.data.countryCode);
+        }
+      })
+      .catch(() => {
+        if (isMounted) {
+          setCountryCode('');
+        }
+      });
+
+    return () => {
+      isMounted = false;
+    };
+    /* eslint-disable */
+}, []);
+};
+
+export const ExperimentContext = React.createContext();
+
+export const ExperimentProvider = ({ children }) => {
+  const [countryCode, setCountryCode] = module.state.countryCode(null);
+  const [experiment, setExperiment] = module.state.experiment({
+    isExperimentActive: false,
+    inRecommendationsVariant: true,
+  });
+
+  module.useCountryCode(setCountryCode);
+  const { width } = useWindowSize();
+  const isMobile = width < breakpoints.small.minWidth;
+
+  const contextValue = React.useMemo(
+    () => ({
+      experiment,
+      countryCode,
+      setExperiment,
+      setCountryCode,
+      isMobile,
+    }),
+    [experiment, countryCode, setExperiment, setCountryCode, isMobile]
+  );
+
+  return (
+    <ExperimentContext.Provider value={contextValue}>
+      {children}
+    </ExperimentContext.Provider>
+  );
+};
+
+export const useExperimentContext = () => React.useContext(ExperimentContext);
+
+ExperimentProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default { useCountryCode, useExperimentContext };
diff --git a/src/experimentContext.test.jsx b/src/experimentContext.test.jsx
new file mode 100644
index 00000000..8f5a1788
--- /dev/null
+++ b/src/experimentContext.test.jsx
@@ -0,0 +1,158 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { waitFor } from '@testing-library/react';
+import { useWindowSize } from '@edx/paragon';
+
+import api from 'widgets/ProductRecommendations/api';
+import { wait } from 'widgets/ProductRecommendations/utils';
+import { MockUseState } from 'testUtils';
+
+import * as experiment from 'experimentContext';
+
+const state = new MockUseState(experiment);
+
+jest.unmock('react');
+jest.spyOn(React, 'useEffect').mockImplementation((cb, prereqs) => ({ useEffect: { cb, prereqs } }));
+
+jest.mock('widgets/ProductRecommendations/api', () => ({
+  fetchRecommendationsContext: jest.fn(),
+}));
+
+describe('experiments context', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('useCountryCode', () => {
+    describe('behaviour', () => {
+      describe('useEffect call', () => {
+        let calls;
+        let cb;
+        const setCountryCode = jest.fn();
+        const successfulFetch = { data: { countryCode: 'ZA' } };
+
+        beforeEach(() => {
+          experiment.useCountryCode(setCountryCode);
+
+          ({ calls } = React.useEffect.mock);
+          [[cb]] = calls;
+        });
+
+        it('calls useEffect once', () => {
+          expect(calls.length).toEqual(1);
+        });
+        describe('successfull fetch while mounted', () => {
+          it('sets the country code', async () => {
+            let resolveFn;
+            api.fetchRecommendationsContext.mockReturnValueOnce(
+              new Promise((resolve) => {
+                resolveFn = resolve;
+              }),
+            );
+
+            cb();
+            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
+            expect(setCountryCode).not.toHaveBeenCalled();
+            resolveFn(successfulFetch);
+            await waitFor(() => {
+              expect(setCountryCode).toHaveBeenCalledWith(successfulFetch.data.countryCode);
+            });
+          });
+        });
+        describe('successfull fetch while unmounted', () => {
+          it('does not set the country code', async () => {
+            let resolveFn;
+            api.fetchRecommendationsContext.mockReturnValueOnce(
+              new Promise((resolve) => {
+                resolveFn = resolve;
+              }),
+            );
+            const unmount = cb();
+            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
+            expect(setCountryCode).not.toHaveBeenCalled();
+            unmount();
+            resolveFn(successfulFetch);
+            await wait(10);
+            expect(setCountryCode).not.toHaveBeenCalled();
+          });
+        });
+        describe('unsuccessfull fetch while mounted', () => {
+          it('sets the country code to an empty string', async () => {
+            let rejectFn;
+            api.fetchRecommendationsContext.mockReturnValueOnce(
+              new Promise((resolve, reject) => {
+                rejectFn = reject;
+              }),
+            );
+            cb();
+            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
+            expect(setCountryCode).not.toHaveBeenCalled();
+            rejectFn();
+            await waitFor(() => {
+              expect(setCountryCode).toHaveBeenCalledWith('');
+            });
+          });
+        });
+        describe('unsuccessfull fetch while unmounted', () => {
+          it('does not set the country code', async () => {
+            let rejectFn;
+            api.fetchRecommendationsContext.mockReturnValueOnce(
+              new Promise((resolve, reject) => {
+                rejectFn = reject;
+              }),
+            );
+            const unmount = cb();
+            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
+            expect(setCountryCode).not.toHaveBeenCalled();
+            unmount();
+            rejectFn();
+            await wait(10);
+            expect(setCountryCode).not.toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+
+  describe('ExperimentProvider', () => {
+    const { ExperimentProvider } = experiment;
+
+    const TestComponent = () => {
+      const {
+        experiment: exp,
+        setExperiment,
+        countryCode,
+        setCountryCode,
+        isMobile,
+      } = experiment.useExperimentContext();
+
+      expect(exp.isExperimentActive).toBeFalsy();
+      expect(exp.inRecommendationsVariant).toBeTruthy();
+      expect(countryCode).toBeNull();
+      expect(isMobile).toBe(false);
+      expect(setExperiment).toBeDefined();
+      expect(setCountryCode).toBeDefined();
+
+      return (
+        <div />
+      );
+    };
+
+    it('allows access to child components with the context stateful values', () => {
+      const countryCodeSpy = jest.spyOn(experiment, 'useCountryCode').mockImplementationOnce(() => {});
+      useWindowSize.mockImplementationOnce(() => ({ width: 577, height: 943 }));
+
+      state.mock();
+
+      mount(
+        <ExperimentProvider>
+          <TestComponent />
+        </ExperimentProvider>,
+      );
+
+      expect(countryCodeSpy).toHaveBeenCalledWith(state.setState.countryCode);
+      state.expectInitializedWith(state.keys.countryCode, null);
+      state.expectInitializedWith(state.keys.experiment, { isExperimentActive: false, inRecommendationsVariant: true });
+    });
+  });
+});
diff --git a/src/setupTest.jsx b/src/setupTest.jsx
index 60b4af2d..e9fbbc4a 100755
--- a/src/setupTest.jsx
+++ b/src/setupTest.jsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-underscore-dangle */
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';
diff --git a/src/test/app.test.jsx b/src/test/app.test.jsx
index 6a38aa63..2074be27 100644
--- a/src/test/app.test.jsx
+++ b/src/test/app.test.jsx
@@ -44,6 +44,7 @@ jest.unmock('hooks');
 
 jest.mock('containers/WidgetContainers/LoadedSidebar', () => jest.fn(() => 'loaded-widget-sidebar'));
 jest.mock('containers/WidgetContainers/NoCoursesSidebar', () => jest.fn(() => 'no-courses-widget-sidebar'));
+jest.mock('containers/WidgetContainers/WidgetFooter', () => 'product-recommendations-footer');
 jest.mock('components/NoticesWrapper', () => 'notices-wrapper');
 
 jest.mock('@edx/frontend-platform', () => ({
@@ -60,6 +61,10 @@ jest.mock('@edx/frontend-platform/auth', () => ({
   getLoginRedirectUrl: jest.fn(),
 }));
 
+jest.mock('experimentContext', () => ({
+  ExperimentProvider: 'div'
+}));
+
 jest.mock('@edx/frontend-enterprise-hotjar', () => ({
   initializeHotjar: jest.fn(),
 }));
diff --git a/src/widgets/ProductRecommendations/api.js b/src/widgets/ProductRecommendations/api.js
index 827e7f30..b1e15e50 100644
--- a/src/widgets/ProductRecommendations/api.js
+++ b/src/widgets/ProductRecommendations/api.js
@@ -3,6 +3,9 @@ import urls from 'data/services/lms/urls';
 
 export const crossProductAndAmplitudeRecommendationsUrl = (courseId) => `${urls.getApiUrl()}/learner_recommendations/product_recommendations/${courseId}/`;
 export const amplitudeRecommendationsUrl = () => `${urls.getApiUrl()}/learner_recommendations/product_recommendations/`;
+export const recommendationsContextUrl = () => `${urls.getApiUrl()}/learner_recommendations/recommendations_context/`;
+
+const fetchRecommendationsContext = () => get(stringifyUrl(recommendationsContextUrl()));
 
 const fetchCrossProductRecommendations = (courseId) => (
   get(stringifyUrl(crossProductAndAmplitudeRecommendationsUrl(courseId)))
@@ -12,4 +15,5 @@ const fetchAmplitudeRecommendations = () => get(stringifyUrl(amplitudeRecommenda
 export default {
   fetchCrossProductRecommendations,
   fetchAmplitudeRecommendations,
+  fetchRecommendationsContext,
 };
diff --git a/src/widgets/ProductRecommendations/api.test.js b/src/widgets/ProductRecommendations/api.test.js
index 5bce09fe..5db8c405 100644
--- a/src/widgets/ProductRecommendations/api.test.js
+++ b/src/widgets/ProductRecommendations/api.test.js
@@ -1,6 +1,6 @@
 import { get, stringifyUrl } from 'data/services/lms/utils';
 
-import api, { crossProductAndAmplitudeRecommendationsUrl, amplitudeRecommendationsUrl } from './api';
+import api, { crossProductAndAmplitudeRecommendationsUrl, amplitudeRecommendationsUrl, recommendationsContextUrl } from './api';
 
 jest.mock('data/services/lms/utils', () => ({
   stringifyUrl: (...args) => ({ stringifyUrl: args }),
@@ -23,4 +23,12 @@ describe('productRecommendationCourses api', () => {
       );
     });
   });
+
+  describe('fetchRecommendationsContext', () => {
+    it('calls get with the correct recommendation courses URL', () => {
+      expect(api.fetchRecommendationsContext()).toEqual(
+        get(stringifyUrl(recommendationsContextUrl())),
+      );
+    });
+  });
 });
diff --git a/src/widgets/ProductRecommendations/components/ProductCard.jsx b/src/widgets/ProductRecommendations/components/ProductCard.jsx
index cabb1540..f9f68c35 100644
--- a/src/widgets/ProductRecommendations/components/ProductCard.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCard.jsx
@@ -6,52 +6,77 @@ import {
   Truncate,
   Hyperlink,
 } from '@edx/paragon';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
+import { trackProductCardClicked, trackCourseCardClicked } from '../optimizelyExperiment';
+import { productCardClicked, discoveryCardClicked } from '../track';
+import { bootCamp, executiveEducation } from '../constants';
 
 const ProductCard = ({
   title,
   subtitle,
   headerImage,
+  courseRunKey,
   schoolLogo,
   courseType,
   url,
-}) => (
-  <Card
-    className="base-card d-flex text-decoration-none"
-    as={Hyperlink}
-    destination={url}
-    isClickable
-  >
-    <Card.ImageCap
-      src={headerImage}
-      srcAlt={`header image for ${title}`}
-      logoSrc={schoolLogo}
-      logoAlt={`logo for ${subtitle}`}
-    />
-    <Card.Header
-      className="mt-2"
-      title={(
-        <Truncate lines={3} ellipsis="…" className="product-card-title font-weight-bold">
-          {title}
-        </Truncate>
-      )}
-      subtitle={(
-        <Truncate lines={1} className="product-card-subtitle font-weight-normal">
-          {subtitle}
-        </Truncate>
+}) => {
+  const handleClick = (type) => {
+    const crossProductTypes = [executiveEducation, bootCamp];
+    const userId = getAuthenticatedUser().userId.toString();
+
+    if (crossProductTypes.includes(type)) {
+      trackProductCardClicked(userId);
+      productCardClicked(courseRunKey, title, type, url);
+    } else {
+      trackCourseCardClicked(userId);
+      discoveryCardClicked(courseRunKey, title, url);
+    }
+  };
+
+  return (
+    <Card
+      className="base-card d-flex text-decoration-none"
+      as={Hyperlink}
+      destination={url}
+      onClick={() => {
+        handleClick(courseType);
+      }}
+      isClickable
+    >
+      <Card.ImageCap
+        src={headerImage}
+        srcAlt={`header image for ${title}`}
+        logoSrc={schoolLogo}
+        logoAlt={`logo for ${subtitle}`}
+      />
+      <Card.Header
+        className="mt-2"
+        title={(
+          <Truncate lines={3} ellipsis="…" className="product-card-title font-weight-bold">
+            {title}
+          </Truncate>
+        )}
+        subtitle={(
+          <Truncate lines={1} className="product-card-subtitle font-weight-normal">
+            {subtitle}
+          </Truncate>
       )}
-    />
-    <Card.Section>
-      <div className="product-badge position-absolute">
-        <Badge className="bg-light-500 text-dark-500">{courseType}</Badge>
-      </div>
-    </Card.Section>
-  </Card>
-);
+      />
+      <Card.Section>
+        <div className="product-badge position-absolute">
+          <Badge className="bg-light-500 text-dark-500">{courseType}</Badge>
+        </div>
+      </Card.Section>
+    </Card>
+  );
+};
 
 ProductCard.propTypes = {
   title: PropTypes.string.isRequired,
   subtitle: PropTypes.string.isRequired,
   headerImage: PropTypes.string.isRequired,
+  courseRunKey: PropTypes.string.isRequired,
   schoolLogo: PropTypes.string.isRequired,
   courseType: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
diff --git a/src/widgets/ProductRecommendations/components/ProductCard.test.jsx b/src/widgets/ProductRecommendations/components/ProductCard.test.jsx
index aeba2534..43929370 100644
--- a/src/widgets/ProductRecommendations/components/ProductCard.test.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCard.test.jsx
@@ -1,29 +1,75 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { mockCrossProductCourses } from '../testData';
+import { mockCrossProductCourses, mockOpenCourses } from '../testData';
+import { trackProductCardClicked, trackCourseCardClicked } from '../optimizelyExperiment';
+import { productCardClicked, discoveryCardClicked } from '../track';
 import ProductCard from './ProductCard';
 import { courseTypeToProductTypeMap } from '../utils';
 
+jest.mock('../optimizelyExperiment', () => ({
+  trackProductCardClicked: jest.fn(),
+  trackCourseCardClicked: jest.fn(),
+}));
+
+jest.mock('../track', () => ({
+  productCardClicked: jest.fn(),
+  discoveryCardClicked: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(() => ({ userId: '1' })),
+}));
+
 describe('ProductRecommendations ProductCard', () => {
-  const course = mockCrossProductCourses[0];
-  const {
-    title,
-    owners: [{ name: subtitle }],
-    image: { src: headerImage },
-    owners: [{ logoImageUrl: schoolLogo }],
-  } = course;
-
-  const props = {
-    title,
-    subtitle,
-    headerImage,
-    schoolLogo,
-    courseType: courseTypeToProductTypeMap[course.courseType],
-    url: `${course.marketingUrl}&linked_from=recommender`,
+  const getProps = (course) => {
+    const {
+      title,
+      owners: [{ name: subtitle }],
+      image: { src: headerImage },
+      owners: [{ logoImageUrl: schoolLogo }],
+    } = course;
+
+    return {
+      title,
+      subtitle,
+      headerImage,
+      schoolLogo,
+      courseType: courseTypeToProductTypeMap[course.courseType],
+      courseRunKey: course.courseRunKey,
+      url: `${course.marketingUrl}&linked_from=recommender`,
+    };
   };
 
+  const crossProductProps = getProps(mockCrossProductCourses[0]);
+  const openCourseProps = getProps(mockOpenCourses[0]);
+
   it('matches snapshot', () => {
-    expect(shallow(<ProductCard {...props} />)).toMatchSnapshot();
+    expect(shallow(<ProductCard {...crossProductProps} />)).toMatchSnapshot();
+  });
+
+  it('send outs experiment events related to open courses when clicked', () => {
+    const wrapper = shallow(<ProductCard {...openCourseProps} />);
+    const { courseRunKey, title, url } = openCourseProps;
+
+    wrapper.simulate('click');
+
+    expect(trackCourseCardClicked).toHaveBeenCalledWith('1');
+    expect(discoveryCardClicked).toHaveBeenCalledWith(courseRunKey, title, url);
+  });
+
+  it('send outs experiment events related to cross product courses when clicked', () => {
+    const wrapper = shallow(<ProductCard {...crossProductProps} />);
+    const {
+      courseRunKey,
+      title,
+      courseType,
+      url,
+    } = crossProductProps;
+
+    wrapper.simulate('click');
+
+    expect(trackProductCardClicked).toHaveBeenCalledWith('1');
+    expect(productCardClicked).toHaveBeenCalledWith(courseRunKey, title, courseType, url);
   });
 });
diff --git a/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx b/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx
index 38bec383..ab9dc8c6 100644
--- a/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 import { courseShape, courseTypeToProductTypeMap } from '../utils';
+import { course } from '../constants';
 import ProductCard from './ProductCard';
 import ProductCardHeader from './ProductCardHeader';
 
@@ -14,11 +15,11 @@ const ProductCardContainer = ({ finalProductList, courseTypes }) => (
           <ProductCardHeader courseType={type} />
           <div
             className={classNames('d-flex', {
-              'course-subcontainer': type === 'Course',
+              'course-subcontainer': type === course,
             })}
           >
             {finalProductList
-              .filter((course) => courseTypeToProductTypeMap[course.courseType] === type)
+              .filter((courseObj) => courseTypeToProductTypeMap[courseObj.courseType] === type)
               .map((item) => (
                 <ProductCard
                   key={item.title}
@@ -26,6 +27,7 @@ const ProductCardContainer = ({ finalProductList, courseTypes }) => (
                   title={item.title}
                   subtitle={item.owners[0].name}
                   headerImage={item.image.src}
+                  courseRunKey={item.courseRunKey}
                   schoolLogo={item.owners[0].logoImageUrl}
                   courseType={type}
                 />
diff --git a/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx b/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx
index c7374613..6dd141e3 100644
--- a/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCardContainer.test.jsx
@@ -3,11 +3,12 @@ import { shallow } from 'enzyme';
 
 import { mockCrossProductCourses, mockOpenCourses } from '../testData';
 import ProductCardContainer from './ProductCardContainer';
+import { executiveEducation, bootCamp, course } from '../constants';
 
 describe('ProductRecommendations ProductCardContainer', () => {
   const props = {
     finalProductList: [...mockCrossProductCourses, ...mockOpenCourses],
-    courseTypes: ['Executive Education', 'Boot Camp', 'Course'],
+    courseTypes: [executiveEducation, bootCamp, course],
   };
 
   it('matches snapshot', () => {
diff --git a/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx b/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
index 8baf8737..e9bcce8a 100644
--- a/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
@@ -1,23 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 
 import { Icon, Hyperlink } from '@edx/paragon';
 import { ChevronRight } from '@edx/paragon/icons';
+import { trackProductHeaderClicked } from '../optimizelyExperiment';
+import { recommendationsHeaderClicked } from '../track';
+import { executiveEducation, bootCamp } from '../constants';
 import messages from '../messages';
 
 const ProductCardHeader = ({ courseType }) => {
-  const { formatMessage } = useIntl();
-
   const getProductTypeDetail = (type) => {
     switch (type) {
-      case 'Executive Education':
+      case executiveEducation:
         return {
           heading: messages.executiveEducationHeading,
           description: messages.executiveEducationDescription,
           url: '/executive-education?linked_from=recommender',
         };
-      case 'Boot Camp':
+      case bootCamp:
         return {
           heading: messages.bootcampHeading,
           description: messages.bootcampDescription,
@@ -33,13 +35,25 @@ const ProductCardHeader = ({ courseType }) => {
     }
   };
 
+  const handleClick = (type, url) => {
+    const userId = getAuthenticatedUser().userId.toString();
+
+    trackProductHeaderClicked(userId);
+    recommendationsHeaderClicked(type, url);
+  };
+
+  const { formatMessage } = useIntl();
   const productTypeDetail = getProductTypeDetail(courseType);
+  const headerUrl = `${process.env.MARKETING_SITE_BASE_URL}${productTypeDetail.url}`;
 
   return (
     <div>
       <Hyperlink
-        destination={`https://www.edx.org${productTypeDetail.url}`}
+        destination={headerUrl}
         className="base-card-link text-decoration-none"
+        onClick={() => {
+          handleClick(courseType, headerUrl);
+        }}
       >
         <div className="d-flex align-items-center border-bottom">
           <h3 className="h3 mb-2 text-left">
diff --git a/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx b/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx
index 185230a7..96397219 100644
--- a/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCardHeader.test.jsx
@@ -2,28 +2,53 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import ProductCardHeader from './ProductCardHeader';
+import { executiveEducation, bootCamp } from '../constants';
+import { trackProductHeaderClicked } from '../optimizelyExperiment';
+import { recommendationsHeaderClicked } from '../track';
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(() => ({ userId: '1' })),
+}));
+
+jest.mock('../optimizelyExperiment', () => ({
+  trackProductHeaderClicked: jest.fn(),
+}));
+
+jest.mock('../track', () => ({
+  recommendationsHeaderClicked: jest.fn(),
+}));
 
 describe('ProductRecommendations ProductCardHeader', () => {
-  const bootCampType = 'Boot Camp';
-  const executiveEducationType = 'Executive Education';
-  const courseType = 'Courses';
+  const coursesType = 'Courses';
 
   it('matches snapshot', () => {
-    expect(shallow(<ProductCardHeader courseType={executiveEducationType} />)).toMatchSnapshot();
+    expect(shallow(<ProductCardHeader courseType={executiveEducation} />)).toMatchSnapshot();
   });
+
   describe('with bootcamp courseType prop', () => {
     it('renders a bootcamp header', () => {
-      const wrapper = shallow(<ProductCardHeader courseType={bootCampType} />);
+      const wrapper = shallow(<ProductCardHeader courseType={bootCamp} />);
 
-      expect(wrapper.find('h3').text()).toEqual(bootCampType);
+      expect(wrapper.find('h3').text()).toEqual(bootCamp);
     });
   });
 
-  describe('with course courseType prop', () => {
+  describe('with courses courseType prop', () => {
     it('renders a courses header', () => {
-      const wrapper = shallow(<ProductCardHeader courseType={courseType} />);
+      const wrapper = shallow(<ProductCardHeader courseType={coursesType} />);
 
-      expect(wrapper.find('h3').text()).toEqual(courseType);
+      expect(wrapper.find('h3').text()).toEqual(coursesType);
     });
   });
+
+  it('send outs experiment events when clicked', () => {
+    const wrapper = shallow(<ProductCardHeader courseType={executiveEducation} />);
+    const hyperLink = wrapper.find('Hyperlink');
+    const execEdLink = 'http://localhost:18000/executive-education?linked_from=recommender';
+
+    hyperLink.simulate('click');
+
+    expect(trackProductHeaderClicked).toHaveBeenCalledWith('1');
+    expect(recommendationsHeaderClicked).toHaveBeenCalledWith(executiveEducation, execEdLink);
+  });
 });
diff --git a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCard.test.jsx.snap b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCard.test.jsx.snap
index 273ec9bf..13e228e2 100644
--- a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCard.test.jsx.snap
+++ b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCard.test.jsx.snap
@@ -6,6 +6,7 @@ exports[`ProductRecommendations ProductCard matches snapshot 1`] = `
   className="base-card d-flex text-decoration-none"
   destination="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
   isClickable={true}
+  onClick={[Function]}
 >
   <Card.ImageCap
     logoAlt="logo for Harvard University"
diff --git a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap
index 5124d823..ec692ba8 100644
--- a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap
+++ b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap
@@ -14,6 +14,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
       className="d-flex"
     >
       <ProductCard
+        courseRunKey="course-v1:Test+Course+2022T2"
         courseType="Executive Education"
         headerImage="https://www.image-2.com/ed79a49b-64c1-48d2-afdc-054bf921e38d-6a76ceb47dea.small.jpg"
         key="Introduction to Computer Science"
@@ -34,6 +35,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
       className="d-flex"
     >
       <ProductCard
+        courseRunKey="course-v1:Test+Course+2022T2"
         courseType="Boot Camp"
         headerImage="https://www.image-2.com/ed79a49b-64c1-48d2-afdc-054bf921e38d-6a76ceb47dea.small.jpg"
         key="Introduction to Computer Science"
@@ -54,6 +56,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
       className="d-flex course-subcontainer"
     >
       <ProductCard
+        courseRunKey="course-v1:Test+Course+2022T2"
         courseType="Course"
         headerImage="https://www.image-2.com/ed79a49b-64c1-48d2-afdc-054bf921e38d-6a76ceb47dea.small.jpg"
         key="Introduction to Computer Science"
@@ -63,6 +66,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
       />
       <ProductCard
+        courseRunKey="course-v1:Test+Course+2022T2"
         courseType="Course"
         headerImage="https://www.image-2.com/ed79a49b-64c1-48d2-afdc-054bf921e38d-6a76ceb47dea.small.jpg"
         key="Introduction to Computer Science"
@@ -72,6 +76,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
       />
       <ProductCard
+        courseRunKey="course-v1:Test+Course+2022T2"
         courseType="Course"
         headerImage="https://www.image-2.com/ed79a49b-64c1-48d2-afdc-054bf921e38d-6a76ceb47dea.small.jpg"
         key="Introduction to Computer Science"
@@ -81,6 +86,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
       />
       <ProductCard
+        courseRunKey="course-v1:Test+Course+2022T2"
         courseType="Course"
         headerImage="https://www.image-2.com/ed79a49b-64c1-48d2-afdc-054bf921e38d-6a76ceb47dea.small.jpg"
         key="Introduction to Computer Science"
diff --git a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardHeader.test.jsx.snap b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardHeader.test.jsx.snap
index dda93def..c8c4d9ac 100644
--- a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardHeader.test.jsx.snap
+++ b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardHeader.test.jsx.snap
@@ -4,7 +4,8 @@ exports[`ProductRecommendations ProductCardHeader matches snapshot 1`] = `
 <div>
   <Hyperlink
     className="base-card-link text-decoration-none"
-    destination="https://www.edx.org/executive-education?linked_from=recommender"
+    destination="http://localhost:18000/executive-education?linked_from=recommender"
+    onClick={[Function]}
   >
     <div
       className="d-flex align-items-center border-bottom"
diff --git a/src/widgets/ProductRecommendations/constants.js b/src/widgets/ProductRecommendations/constants.js
new file mode 100644
index 00000000..8cb3b88c
--- /dev/null
+++ b/src/widgets/ProductRecommendations/constants.js
@@ -0,0 +1,7 @@
+export const bootCamp = 'Boot Camp';
+export const executiveEducation = 'Executive Education';
+export const course = 'Course';
+
+export const control = 'control';
+export const treatment = 'treatment';
+export const noExperiment = 'no experiment';
diff --git a/src/widgets/ProductRecommendations/hooks.js b/src/widgets/ProductRecommendations/hooks.js
index 3d66b381..5154ce53 100644
--- a/src/widgets/ProductRecommendations/hooks.js
+++ b/src/widgets/ProductRecommendations/hooks.js
@@ -1,9 +1,16 @@
 import { useState, useEffect } from 'react';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+
 import { RequestStates, RequestKeys } from 'data/constants/requests';
 import { StrictDict } from 'utils';
 import { reduxHooks } from 'hooks';
 import { SortKeys } from 'data/constants/app';
 import { useWindowSize, breakpoints } from '@edx/paragon';
+import { useExperimentContext } from 'experimentContext';
+import { control, treatment, noExperiment } from './constants';
+import { activateProductRecommendationsExperiment, trackProductRecommendationsViewed } from './optimizelyExperiment';
+import { recommendationsViewed } from './track';
+
 import api from './api';
 import * as module from './hooks';
 
@@ -17,16 +24,6 @@ export const useIsMobile = () => {
   return width < breakpoints.small.minWidth;
 };
 
-export const useShowRecommendationsFooter = () => {
-  const hasAvailableDashboards = reduxHooks.useHasAvailableDashboards();
-  const hasRequestCompleted = reduxHooks.useRequestIsCompleted(RequestKeys.initialize);
-
-  return {
-    shouldShowFooter: false,
-    shouldLoadFooter: hasRequestCompleted && !hasAvailableDashboards,
-  };
-};
-
 export const useMostRecentCourseRunKey = () => {
   const mostRecentCourseRunKey = reduxHooks.useCurrentCourseList({
     sortBy: SortKeys.enrolled,
@@ -37,6 +34,61 @@ export const useMostRecentCourseRunKey = () => {
   return mostRecentCourseRunKey;
 };
 
+export const useActivateRecommendationsExperiment = () => {
+  const hasAvailableDashboards = reduxHooks.useHasAvailableDashboards();
+  const hasRequestCompleted = reduxHooks.useRequestIsCompleted(RequestKeys.initialize);
+  const mostRecentCourseRunKey = module.useMostRecentCourseRunKey();
+  const userId = getAuthenticatedUser().userId.toString();
+
+  const {
+    experiment: { isExperimentActive },
+    setExperiment,
+    isMobile,
+    countryCode,
+  } = useExperimentContext();
+
+  useEffect(() => {
+    if (!isExperimentActive && countryCode !== null) {
+      const activateExperiment = () => {
+        const userAttributes = {
+          is_mobile_user: isMobile,
+          is_enterprise_user: !!hasAvailableDashboards,
+          location: countryCode ? countryCode.toLowerCase() : '',
+        };
+        const experiment = activateProductRecommendationsExperiment(userId, userAttributes);
+
+        setExperiment((prev) => ({
+          ...prev,
+          isExperimentActive: true,
+          inRecommendationsVariant: experiment.inExperimentVariant,
+        }));
+
+        return experiment;
+      };
+
+      const sendViewedEvent = () => {
+        trackProductRecommendationsViewed(userId);
+        recommendationsViewed(true, control, mostRecentCourseRunKey);
+      };
+
+      if (hasRequestCompleted) {
+        const { experimentActivated, inExperimentVariant } = activateExperiment();
+
+        if (experimentActivated && !inExperimentVariant) {
+          sendViewedEvent();
+        }
+      }
+    }
+  /* eslint-disable */
+  }, [])
+};
+
+export const useShowRecommendationsFooter = () => {
+  const { experiment } = useExperimentContext();
+
+  return experiment;
+};
+
 export const useFetchRecommendations = (setRequestState, setData) => {
   const courseRunKey = module.useMostRecentCourseRunKey();
 
@@ -74,10 +126,29 @@ export const useFetchRecommendations = (setRequestState, setData) => {
   }, []);
 };
 
+export const useSendViewedEvents = (requestState, data) => {
+  const mostRecentCourseRunKey = module.useMostRecentCourseRunKey();
+  const userId = getAuthenticatedUser().userId.toString();
+
+  useEffect(() => {
+    if (requestState === RequestStates.completed) {
+      if (data.crossProductCourses?.length === 2) {
+        trackProductRecommendationsViewed(userId);
+        recommendationsViewed(false, treatment, mostRecentCourseRunKey);
+      } else {
+        trackProductRecommendationsViewed(userId);
+        recommendationsViewed(true, noExperiment, mostRecentCourseRunKey);
+      }
+    }
+  }, [data, requestState])
+}
+
 export const useProductRecommendationsData = () => {
   const [requestState, setRequestState] = module.state.requestState(RequestStates.pending);
   const [data, setData] = module.state.data({});
+
   module.useFetchRecommendations(setRequestState, setData);
+  module.useSendViewedEvents(requestState, data);
 
   return {
     productRecommendations: data,
@@ -87,4 +158,4 @@ export const useProductRecommendationsData = () => {
   };
 };
 
-export default { useProductRecommendationsData, useShowRecommendationsFooter, useIsMobile };
+export default { useProductRecommendationsData, useShowRecommendationsFooter, useIsMobile, useActivateRecommendationsExperiment };
diff --git a/src/widgets/ProductRecommendations/hooks.test.js b/src/widgets/ProductRecommendations/hooks.test.js
index dc4d497c..b11bf59e 100644
--- a/src/widgets/ProductRecommendations/hooks.test.js
+++ b/src/widgets/ProductRecommendations/hooks.test.js
@@ -5,7 +5,13 @@ import { MockUseState } from 'testUtils';
 import { RequestStates } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
 import { useWindowSize } from '@edx/paragon';
+import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
+import { useExperimentContext } from 'experimentContext';
+import { recommendationsViewed } from './track';
+import { activateProductRecommendationsExperiment, trackProductRecommendationsViewed } from './optimizelyExperiment';
+import { control, treatment, noExperiment } from './constants';
 import { wait } from './utils';
+import { mockCrossProductResponse, mockAmplitudeResponse } from './testData';
 
 import api from './api';
 import * as hooks from './hooks';
@@ -13,6 +19,15 @@ import * as hooks from './hooks';
 jest.mock('./api', () => ({
   fetchCrossProductRecommendations: jest.fn(),
   fetchAmplitudeRecommendations: jest.fn(),
+  fetchRecommendationsContext: jest.fn(),
+}));
+
+jest.mock('@edx/frontend-platform/auth', () => ({
+  getAuthenticatedUser: jest.fn(),
+}));
+
+jest.mock('experimentContext', () => ({
+  useExperimentContext: jest.fn(),
 }));
 
 jest.mock('hooks', () => ({
@@ -23,6 +38,15 @@ jest.mock('hooks', () => ({
   },
 }));
 
+jest.mock('./track', () => ({
+  recommendationsViewed: jest.fn(),
+}));
+
+jest.mock('./optimizelyExperiment', () => ({
+  trackProductRecommendationsViewed: jest.fn(),
+  activateProductRecommendationsExperiment: jest.fn(),
+}));
+
 const state = new MockUseState(hooks);
 const mostRecentCourseRunKey = 'course ID 1';
 
@@ -53,6 +77,7 @@ let output;
 describe('ProductRecommendations hooks', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    getAuthenticatedUser.mockImplementation(() => ({ userId: '1' }));
   });
 
   describe('state fields', () => {
@@ -86,14 +111,173 @@ describe('ProductRecommendations hooks', () => {
   });
 
   describe('useShowRecommendationsFooter', () => {
-    // TODO: Update when hardcoded value is removed
-    it('returns whether the footer widget should show and should load', () => {
-      reduxHooks.useHasAvailableDashboards.mockReturnValueOnce(false);
-      reduxHooks.useRequestIsCompleted.mockReturnValueOnce(true);
-      const { shouldShowFooter, shouldLoadFooter } = hooks.useShowRecommendationsFooter();
-
-      expect(shouldShowFooter).toBeFalsy();
-      expect(shouldLoadFooter).toBeTruthy();
+    it('returns the experiment object, stating if the experiment has activated and the variant', () => {
+      useExperimentContext
+        .mockImplementationOnce(() => ({ experiment: { inRecommendationsVariant: true, isExperimentActive: false } }));
+
+      const { inRecommendationsVariant, isExperimentActive } = hooks.useShowRecommendationsFooter();
+
+      expect(useExperimentContext).toHaveBeenCalled();
+      expect(inRecommendationsVariant).toBeTruthy();
+      expect(isExperimentActive).toBeFalsy();
+    });
+  });
+
+  describe('useActivateRecommendationsExperiment', () => {
+    describe('behavior', () => {
+      describe('useEffect call', () => {
+        let cb;
+        let calls;
+        const setExperiment = jest.fn();
+        const setCountryCode = jest.fn();
+        const userAttributes = { is_enterprise_user: false, is_mobile_user: false, location: 'za' };
+
+        const optimizelyExperimentMock = ({
+          experimentActivated = false,
+          inExperimentVariant = false,
+        }) => ({
+          experimentActivated,
+          inExperimentVariant,
+        });
+
+        const experimentContextMock = ({
+          isExperimentActive = false,
+          inRecommendationsVariant = true,
+          countryCode = 'ZA',
+          isMobile = false,
+        }) => ({
+          experiment: { isExperimentActive, inRecommendationsVariant },
+          countryCode,
+          isMobile,
+          setExperiment,
+          setCountryCode,
+        });
+
+        const setUp = (
+          isCompleted,
+          experimentContext = experimentContextMock({}),
+          optimizelyExperiment = optimizelyExperimentMock({}),
+        ) => {
+          reduxHooks.useCurrentCourseList.mockReturnValueOnce(populatedCourseListData);
+          reduxHooks.useHasAvailableDashboards.mockReturnValueOnce(null);
+          reduxHooks.useRequestIsCompleted.mockReturnValueOnce(isCompleted);
+          useExperimentContext.mockReturnValueOnce(experimentContext);
+          activateProductRecommendationsExperiment.mockReturnValueOnce(optimizelyExperiment);
+
+          hooks.useActivateRecommendationsExperiment();
+
+          ({ calls } = React.useEffect.mock);
+          ([[cb]] = calls);
+        };
+
+        it('calls effect once', () => {
+          setUp(true);
+          expect(calls.length).toEqual(1);
+        });
+        describe('when the request state is not completed', () => {
+          it('does not activate or send any events', () => {
+            setUp(false);
+            cb();
+            expect(activateProductRecommendationsExperiment).not.toHaveBeenCalled();
+            expect(trackProductRecommendationsViewed).not.toHaveBeenCalled();
+            expect(recommendationsViewed).not.toHaveBeenCalled();
+          });
+        });
+        describe('when the experiment is active', () => {
+          it('does not activate or send any events', () => {
+            setUp(true, experimentContextMock({ isExperimentActive: true }));
+            cb();
+            expect(activateProductRecommendationsExperiment).not.toHaveBeenCalled();
+            expect(trackProductRecommendationsViewed).not.toHaveBeenCalled();
+            expect(recommendationsViewed).not.toHaveBeenCalled();
+          });
+        });
+        describe('when the experiment is inactive but user country code has not been fetched', () => {
+          it('does not activate or send any events', () => {
+            setUp(true, experimentContextMock({ countryCode: null }));
+            cb();
+            expect(activateProductRecommendationsExperiment).not.toHaveBeenCalled();
+            expect(trackProductRecommendationsViewed).not.toHaveBeenCalled();
+            expect(recommendationsViewed).not.toHaveBeenCalled();
+          });
+        });
+        describe('when the experiment is inactive and user country code has been fetched', () => {
+          it('activates the experiment and sends viewed event for control group', () => {
+            setUp(
+              true,
+              experimentContextMock({}),
+              optimizelyExperimentMock({ experimentActivated: true, inExperimentVariant: false }),
+            );
+            cb();
+            expect(activateProductRecommendationsExperiment).toHaveBeenCalledWith('1', userAttributes);
+            expect(setExperiment).toHaveBeenCalled();
+            expect(trackProductRecommendationsViewed).toHaveBeenCalledWith('1');
+            expect(recommendationsViewed).toHaveBeenCalledWith(true, control, mostRecentCourseRunKey);
+          });
+          it('activates the experiment and does not sends viewed event for treatment group', () => {
+            setUp(
+              true,
+              experimentContextMock({ countryCode: '' }),
+              optimizelyExperimentMock({ experimentActivated: true, inExperimentVariant: true }),
+            );
+            cb();
+            expect(activateProductRecommendationsExperiment).toHaveBeenCalledWith('1', { ...userAttributes, location: '' });
+            expect(setExperiment).toHaveBeenCalled();
+            expect(trackProductRecommendationsViewed).not.toHaveBeenCalled();
+            expect(recommendationsViewed).not.toHaveBeenCalled();
+          });
+        });
+      });
+    });
+  });
+
+  describe('useSendViewedEvents', () => {
+    describe('behavior', () => {
+      describe('useEffect call', () => {
+        let cb;
+        let calls;
+        let prereqs;
+        const { completed, pending } = RequestStates;
+
+        const setUp = (requestState, response) => {
+          reduxHooks.useCurrentCourseList.mockReturnValueOnce(populatedCourseListData);
+          hooks.useSendViewedEvents(requestState, response);
+          ({ calls } = React.useEffect.mock);
+          ([[cb, prereqs]] = calls);
+        };
+
+        it('runs when data or requestState changes (prereqs)', () => {
+          setUp(completed, mockCrossProductResponse);
+          expect(prereqs).toEqual([mockCrossProductResponse, completed]);
+          expect(calls.length).toEqual(1);
+        });
+        describe('when the request state is not completed', () => {
+          it('does not send any events', () => {
+            setUp(pending, mockCrossProductResponse);
+            cb();
+            expect(trackProductRecommendationsViewed).not.toHaveBeenCalled();
+            expect(recommendationsViewed).not.toHaveBeenCalled();
+          });
+        });
+        describe('when the request state is completed', () => {
+          describe('with crossProduct data that has 2 cross product courses', () => {
+            it('sends out recommendations viewed event for "treatment" group', () => {
+              setUp(completed, mockCrossProductResponse);
+              cb();
+              expect(trackProductRecommendationsViewed).toHaveBeenCalledWith('1');
+              expect(recommendationsViewed).toHaveBeenCalledWith(false, treatment, mostRecentCourseRunKey);
+            });
+          });
+          describe('with amplitude data and no cross product data', () => {
+            it('sends out recommendations viewed event for "no experiment" group', () => {
+              setUp(completed, mockAmplitudeResponse);
+              cb();
+              expect(trackProductRecommendationsViewed).toHaveBeenCalledWith('1');
+              expect(recommendationsViewed).toHaveBeenCalledWith(true, noExperiment, mostRecentCourseRunKey);
+            });
+          });
+        });
+      });
     });
   });
 
@@ -281,14 +465,19 @@ describe('ProductRecommendations hooks', () => {
     });
   });
   describe('useProductRecommendationsData', () => {
-    let fetchSpy;
+    let fetchRecommendationsSpy;
+    let sendViewedEventsSpy;
     beforeEach(() => {
       state.mock();
-      fetchSpy = jest.spyOn(hooks, 'useFetchRecommendations').mockImplementationOnce(() => {});
+      fetchRecommendationsSpy = jest.spyOn(hooks, 'useFetchRecommendations').mockImplementationOnce(() => {});
+      sendViewedEventsSpy = jest.spyOn(hooks, 'useSendViewedEvents').mockImplementationOnce(() => {});
       output = hooks.useProductRecommendationsData();
     });
     it('calls useFetchRecommendations with setRequestState and setData', () => {
-      expect(fetchSpy).toHaveBeenCalledWith(state.setState.requestState, state.setState.data);
+      expect(fetchRecommendationsSpy).toHaveBeenCalledWith(state.setState.requestState, state.setState.data);
+    });
+    it('calls useFetchViewedEvents with requestState and data', () => {
+      expect(sendViewedEventsSpy).toHaveBeenCalledWith(state.stateVals.requestState, state.stateVals.data);
     });
     it('initializes requestState as RequestStates.pending', () => {
       state.expectInitializedWith(state.keys.requestState, RequestStates.pending);
diff --git a/src/widgets/ProductRecommendations/optimizelyExperiment.js b/src/widgets/ProductRecommendations/optimizelyExperiment.js
index 93cb6d13..72b0b314 100644
--- a/src/widgets/ProductRecommendations/optimizelyExperiment.js
+++ b/src/widgets/ProductRecommendations/optimizelyExperiment.js
@@ -18,7 +18,10 @@ export const activateProductRecommendationsExperiment = (userId, userAttributes)
     userAttributes,
   );
 
-  return variation === PRODUCT_RECOMMENDATIONS_EXP_VARIATION;
+  return {
+    experimentActivated: variation !== null,
+    inExperimentVariant: variation === PRODUCT_RECOMMENDATIONS_EXP_VARIATION,
+  };
 };
 
 export const trackProductRecommendationsViewed = (userId, userAttributes = {}) => {
diff --git a/src/widgets/ProductRecommendations/optimizelyExperiment.test.js b/src/widgets/ProductRecommendations/optimizelyExperiment.test.js
index ec12205f..dbd57d92 100644
--- a/src/widgets/ProductRecommendations/optimizelyExperiment.test.js
+++ b/src/widgets/ProductRecommendations/optimizelyExperiment.test.js
@@ -24,11 +24,25 @@ const userAttributes = {
 
 describe('Optimizely events', () => {
   describe('activateProductRecommendationsExperiment', () => {
-    it('activates the experiment and returns in recommendations experiment variant', () => {
+    it('activates the experiment and returns in experiment variant', () => {
       optimizelyClient.activate.mockReturnValueOnce(PRODUCT_RECOMMENDATIONS_EXP_VARIATION);
-      const inRecommendationsVariant = activateProductRecommendationsExperiment(userId, userAttributes);
+      const experiment = activateProductRecommendationsExperiment(userId, userAttributes);
 
-      expect(inRecommendationsVariant).toBeTruthy();
+      expect(experiment.experimentActivated).toBeTruthy();
+      expect(experiment.inExperimentVariant).toBeTruthy();
+      expect(optimizelyClient.activate).toHaveBeenCalledWith(
+        PRODUCT_RECOMMENDATIONS_EXP_KEY,
+        userId,
+        userAttributes,
+      );
+    });
+
+    it('does not activate the experiment and returns not in experiment variant', () => {
+      optimizelyClient.activate.mockReturnValueOnce(null);
+      const experiment = activateProductRecommendationsExperiment(userId, userAttributes);
+
+      expect(experiment.experimentActivated).toBeFalsy();
+      expect(experiment.inExperimentVariant).toBeFalsy();
       expect(optimizelyClient.activate).toHaveBeenCalledWith(
         PRODUCT_RECOMMENDATIONS_EXP_KEY,
         userId,
diff --git a/src/widgets/ProductRecommendations/testData.js b/src/widgets/ProductRecommendations/testData.js
index 2f85013f..22689d78 100644
--- a/src/widgets/ProductRecommendations/testData.js
+++ b/src/widgets/ProductRecommendations/testData.js
@@ -24,10 +24,9 @@ export const getCoursesWithType = (courseTypes) => {
 };
 
 export const mockFooterRecommendationsHook = {
-  showAndLoad: { shouldShowFooter: true, shouldLoadFooter: true },
-  showDontLoad: { shouldShowFooter: true, shouldLoadFooter: false },
-  loadDontShow: { shouldShowFooter: false, shouldLoadFooter: true },
-  dontShowOrLoad: { shouldShowFooter: false, shouldLoadFooter: false },
+  default: { isExperimentActive: false, inRecommendationsVariant: true },
+  activeControl: { isExperimentActive: true, inRecommendationsVariant: false },
+  activeTreatment: { isExperimentActive: true, inRecommendationsVariant: true },
 };
 
 export const mockCrossProductCourses = getCoursesWithType(['executive-education-2u', 'bootcamp-2u']);
diff --git a/src/widgets/ProductRecommendations/track.js b/src/widgets/ProductRecommendations/track.js
index df0cf508..6afe2926 100644
--- a/src/widgets/ProductRecommendations/track.js
+++ b/src/widgets/ProductRecommendations/track.js
@@ -12,7 +12,6 @@ export const eventNames = StrictDict({
 export const productCardClicked = (courseRunKey, courseTitle, courseType, href) => {
   createLinkTracker(
     createEventTracker(eventNames.productCardClicked, {
-      category: 'recommender',
       label: courseTitle,
       courserun_key: courseRunKey,
       page: 'dashboard',
@@ -25,7 +24,6 @@ export const productCardClicked = (courseRunKey, courseTitle, courseType, href)
 export const discoveryCardClicked = (courseRunKey, courseTitle, href) => {
   createLinkTracker(
     createEventTracker(eventNames.discoveryCardClicked, {
-      category: 'recommender',
       label: courseTitle,
       courserun_key: courseRunKey,
       page: 'dashboard',
@@ -38,7 +36,6 @@ export const discoveryCardClicked = (courseRunKey, courseTitle, href) => {
 export const recommendationsHeaderClicked = (courseType, href) => {
   createLinkTracker(
     createEventTracker(eventNames.recommendationsHeaderClicked, {
-      category: 'recommender',
       page: 'dashboard',
       product_line: courseTypeToProductLineMap[courseType],
     }),
@@ -46,10 +43,11 @@ export const recommendationsHeaderClicked = (courseType, href) => {
   );
 };
 
-export const recommendationsViewed = (isControl, courseRunKey) => {
+export const recommendationsViewed = (isControl, recommenderGroup, courseRunKey) => {
   createEventTracker(eventNames.recommendationsViewed, {
     is_control: isControl,
+    productRecommenderGroup: recommenderGroup,
     page: 'dashboard',
-    course_key: convertCourseRunKeyToCourseKey(courseRunKey),
+    course_key: courseRunKey ? convertCourseRunKeyToCourseKey(courseRunKey) : '',
   });
 };
diff --git a/src/widgets/ProductRecommendations/track.test.js b/src/widgets/ProductRecommendations/track.test.js
index 58bf4a80..7fcd5834 100644
--- a/src/widgets/ProductRecommendations/track.test.js
+++ b/src/widgets/ProductRecommendations/track.test.js
@@ -1,4 +1,5 @@
 import { createLinkTracker, createEventTracker } from 'data/services/segment/utils';
+import { bootCamp, treatment, control } from './constants';
 import {
   eventNames,
   productCardClicked,
@@ -18,17 +19,17 @@ const courseRunKeyOld = 'MITx/5.0.01/2022T2/';
 const label = 'Web Design';
 const headerLink = 'https://www.edx.org/search?tab=course?linked_from=recommender';
 const courseUrl = 'https://www.edx.org/course/some-course';
-const category = 'recommender';
 
 describe('product recommendations trackers', () => {
   describe('recommendationsViewed', () => {
     describe('with old course run key format', () => {
       it('creates an event tracker for when cross product recommendations are present', () => {
-        recommendationsViewed(false, courseRunKeyOld);
+        recommendationsViewed(false, treatment, courseRunKeyOld);
         expect(createEventTracker).toHaveBeenCalledWith(
           eventNames.recommendationsViewed,
           {
             is_control: false,
+            productRecommenderGroup: treatment,
             page: 'dashboard',
             course_key: courseKey,
           },
@@ -36,23 +37,38 @@ describe('product recommendations trackers', () => {
       });
     });
     describe('with new course run key format', () => {
-      it('creates an event tracker for when cross product recommendations are present', () => {
-        recommendationsViewed(false, courseRunKeyNew);
+      it('creates an event tracker for when a user is bucketed into the conrol group', () => {
+        recommendationsViewed(false, control, courseRunKeyNew);
+
         expect(createEventTracker).toHaveBeenCalledWith(
           eventNames.recommendationsViewed,
           {
             is_control: false,
+            productRecommenderGroup: control,
             page: 'dashboard',
             course_key: courseKey,
           },
         );
       });
     });
+    describe('with no course run key', () => {
+      it('creates an event tracker for when a user is bucketed into the conrol group', () => {
+        recommendationsViewed(false, control, '');
+        expect(createEventTracker).toHaveBeenCalledWith(
+          eventNames.recommendationsViewed,
+          {
+            is_control: false,
+            productRecommenderGroup: control,
+            page: 'dashboard',
+            course_key: '',
+          },
+        );
+      });
+    });
   });
   describe('recommendationsHeaderClicked', () => {
     it('creates a link tracker for when a recommendations header is clicked', () => {
       const attributes = {
-        category,
         product_line: 'open-courses',
         page: 'dashboard',
       };
@@ -66,7 +82,6 @@ describe('product recommendations trackers', () => {
   describe('discoveryCardClicked', () => {
     it('creates a link tracker for when a open course card is clicked', () => {
       const attributes = {
-        category,
         label,
         courserun_key: courseRunKeyNew,
         page: 'dashboard',
@@ -82,7 +97,6 @@ describe('product recommendations trackers', () => {
   describe('productCardClicked', () => {
     it('creates a link tracker for when a cross product course card is clicked', () => {
       const attributes = {
-        category,
         label,
         courserun_key: courseRunKeyNew,
         page: 'dashboard',
@@ -90,7 +104,7 @@ describe('product recommendations trackers', () => {
       };
       const args = [eventNames.productCardClicked, attributes];
 
-      productCardClicked(courseRunKeyNew, label, 'Boot Camp', courseUrl);
+      productCardClicked(courseRunKeyNew, label, bootCamp, courseUrl);
       expect(createEventTracker).toHaveBeenCalledWith(...args);
       expect(createLinkTracker).toHaveBeenCalledWith(createEventTracker(...args), courseUrl);
     });
diff --git a/src/widgets/ProductRecommendations/utils.js b/src/widgets/ProductRecommendations/utils.js
index e4074d3e..b757ac66 100644
--- a/src/widgets/ProductRecommendations/utils.js
+++ b/src/widgets/ProductRecommendations/utils.js
@@ -1,4 +1,5 @@
 import PropTypes from 'prop-types';
+import { executiveEducation, course, bootCamp } from './constants';
 
 export const courseShape = {
   uuid: PropTypes.string,
@@ -22,23 +23,23 @@ export const courseShape = {
 };
 
 export const courseTypeToProductTypeMap = {
-  course: 'Course',
-  'verified-audit': 'Course',
-  verified: 'Course',
-  audit: 'Course',
-  'credit-verified-audit': 'Course',
-  'spoc-verified-audit': 'Course',
+  course,
+  'verified-audit': course,
+  verified: course,
+  audit: course,
+  'credit-verified-audit': course,
+  'spoc-verified-audit': course,
   professional: 'Professional Certificate',
-  'bootcamp-2u': 'Boot Camp',
-  'executive-education-2u': 'Executive Education',
-  'executive-education': 'Executive Education',
+  'bootcamp-2u': bootCamp,
+  'executive-education-2u': executiveEducation,
+  'executive-education': executiveEducation,
   masters: "Master's",
   'masters-verified-audit': "Master's",
 };
 
 export const courseTypeToProductLineMap = {
-  'Executive Education': 'executive-education',
-  'Boot Camp': 'boot-camps',
+  [executiveEducation]: 'executive-education',
+  [bootCamp]: 'boot-camps',
   Course: 'open-courses',
 };
 

From 9f640e9fc7785878e67cb4db61c2687a055f7398 Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Sat, 8 Jul 2023 13:48:23 +0200
Subject: [PATCH 02/10] fix: general recommendations redirect url

---
 .../components/ProductCard.jsx                | 23 +++++++++++++++----
 .../components/ProductCard.test.jsx           | 16 +++++++++----
 .../components/ProductCardContainer.jsx       |  2 +-
 .../ProductCardContainer.test.jsx.snap        | 12 +++++-----
 src/widgets/ProductRecommendations/hooks.js   |  4 ++--
 .../ProductRecommendations/hooks.test.js      |  4 ++--
 .../ProductRecommendations/testData.js        |  8 +++++--
 src/widgets/ProductRecommendations/utils.js   |  2 +-
 8 files changed, 48 insertions(+), 23 deletions(-)

diff --git a/src/widgets/ProductRecommendations/components/ProductCard.jsx b/src/widgets/ProductRecommendations/components/ProductCard.jsx
index f9f68c35..1be5146b 100644
--- a/src/widgets/ProductRecommendations/components/ProductCard.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCard.jsx
@@ -21,26 +21,39 @@ const ProductCard = ({
   courseType,
   url,
 }) => {
-  const handleClick = (type) => {
+  const handleClick = (type, link) => {
     const crossProductTypes = [executiveEducation, bootCamp];
     const userId = getAuthenticatedUser().userId.toString();
 
     if (crossProductTypes.includes(type)) {
       trackProductCardClicked(userId);
-      productCardClicked(courseRunKey, title, type, url);
+      productCardClicked(courseRunKey, title, type, link);
     } else {
       trackCourseCardClicked(userId);
-      discoveryCardClicked(courseRunKey, title, url);
+      discoveryCardClicked(courseRunKey, title, link);
     }
   };
 
+  const getRedirectUrl = (link) => {
+    const urlObj = new URL(link);
+    const hasQueryStringParameters = urlObj.search !== '';
+
+    if (hasQueryStringParameters) {
+      return `${link}&linked_from=recommender`;
+    }
+
+    return `${link}?linked_from=recommender`;
+  };
+
+  const redirectUrl = getRedirectUrl(url);
+
   return (
     <Card
       className="base-card d-flex text-decoration-none"
       as={Hyperlink}
-      destination={url}
+      destination={redirectUrl}
       onClick={() => {
-        handleClick(courseType);
+        handleClick(courseType, redirectUrl);
       }}
       isClickable
     >
diff --git a/src/widgets/ProductRecommendations/components/ProductCard.test.jsx b/src/widgets/ProductRecommendations/components/ProductCard.test.jsx
index 43929370..1eb2fad9 100644
--- a/src/widgets/ProductRecommendations/components/ProductCard.test.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCard.test.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 
-import { mockCrossProductCourses, mockOpenCourses } from '../testData';
+import { mockCrossProductCourses, mockOpenCourses, mockFallbackOpenCourse } from '../testData';
 import { trackProductCardClicked, trackCourseCardClicked } from '../optimizelyExperiment';
 import { productCardClicked, discoveryCardClicked } from '../track';
 import ProductCard from './ProductCard';
@@ -37,17 +37,25 @@ describe('ProductRecommendations ProductCard', () => {
       schoolLogo,
       courseType: courseTypeToProductTypeMap[course.courseType],
       courseRunKey: course.courseRunKey,
-      url: `${course.marketingUrl}&linked_from=recommender`,
+      url: course.marketingUrl,
     };
   };
 
   const crossProductProps = getProps(mockCrossProductCourses[0]);
   const openCourseProps = getProps(mockOpenCourses[0]);
+  const fallbackOpenCourseProps = getProps(mockFallbackOpenCourse[0]);
 
   it('matches snapshot', () => {
     expect(shallow(<ProductCard {...crossProductProps} />)).toMatchSnapshot();
   });
 
+  it('has the query string parameter attached to a fallback recommendations url', () => {
+    const wrapper = shallow(<ProductCard {...fallbackOpenCourseProps} />);
+    const cardUrl = wrapper.find('Card').props().destination;
+
+    expect(cardUrl).toEqual('https://www.edx.org/course/some-course?linked_from=recommender');
+  });
+
   it('send outs experiment events related to open courses when clicked', () => {
     const wrapper = shallow(<ProductCard {...openCourseProps} />);
     const { courseRunKey, title, url } = openCourseProps;
@@ -55,7 +63,7 @@ describe('ProductRecommendations ProductCard', () => {
     wrapper.simulate('click');
 
     expect(trackCourseCardClicked).toHaveBeenCalledWith('1');
-    expect(discoveryCardClicked).toHaveBeenCalledWith(courseRunKey, title, url);
+    expect(discoveryCardClicked).toHaveBeenCalledWith(courseRunKey, title, `${url}&linked_from=recommender`);
   });
 
   it('send outs experiment events related to cross product courses when clicked', () => {
@@ -70,6 +78,6 @@ describe('ProductRecommendations ProductCard', () => {
     wrapper.simulate('click');
 
     expect(trackProductCardClicked).toHaveBeenCalledWith('1');
-    expect(productCardClicked).toHaveBeenCalledWith(courseRunKey, title, courseType, url);
+    expect(productCardClicked).toHaveBeenCalledWith(courseRunKey, title, courseType, `${url}&linked_from=recommender`);
   });
 });
diff --git a/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx b/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx
index ab9dc8c6..c591e11f 100644
--- a/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCardContainer.jsx
@@ -23,7 +23,7 @@ const ProductCardContainer = ({ finalProductList, courseTypes }) => (
               .map((item) => (
                 <ProductCard
                   key={item.title}
-                  url={`${item.marketingUrl}&linked_from=recommender`}
+                  url={item.marketingUrl}
                   title={item.title}
                   subtitle={item.owners[0].name}
                   headerImage={item.image.src}
diff --git a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap
index ec692ba8..3d4969b5 100644
--- a/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap
+++ b/src/widgets/ProductRecommendations/components/__snapshots__/ProductCardContainer.test.jsx.snap
@@ -21,7 +21,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         schoolLogo="http://www.image.com/ef72daf3-c9a1-4c00-ba37-b3514392bdcf-8839c516815a.png"
         subtitle="Harvard University"
         title="Introduction to Computer Science"
-        url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
+        url="https://www.edx.org/course/some-course?utm_source=source"
       />
     </div>
   </div>
@@ -42,7 +42,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         schoolLogo="http://www.image.com/ef72daf3-c9a1-4c00-ba37-b3514392bdcf-8839c516815a.png"
         subtitle="Harvard University"
         title="Introduction to Computer Science"
-        url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
+        url="https://www.edx.org/course/some-course?utm_source=source"
       />
     </div>
   </div>
@@ -63,7 +63,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         schoolLogo="http://www.image.com/ef72daf3-c9a1-4c00-ba37-b3514392bdcf-8839c516815a.png"
         subtitle="Harvard University"
         title="Introduction to Computer Science"
-        url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
+        url="https://www.edx.org/course/some-course?utm_source=source"
       />
       <ProductCard
         courseRunKey="course-v1:Test+Course+2022T2"
@@ -73,7 +73,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         schoolLogo="http://www.image.com/ef72daf3-c9a1-4c00-ba37-b3514392bdcf-8839c516815a.png"
         subtitle="Harvard University"
         title="Introduction to Computer Science"
-        url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
+        url="https://www.edx.org/course/some-course?utm_source=source"
       />
       <ProductCard
         courseRunKey="course-v1:Test+Course+2022T2"
@@ -83,7 +83,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         schoolLogo="http://www.image.com/ef72daf3-c9a1-4c00-ba37-b3514392bdcf-8839c516815a.png"
         subtitle="Harvard University"
         title="Introduction to Computer Science"
-        url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
+        url="https://www.edx.org/course/some-course?utm_source=source"
       />
       <ProductCard
         courseRunKey="course-v1:Test+Course+2022T2"
@@ -93,7 +93,7 @@ exports[`ProductRecommendations ProductCardContainer matches snapshot 1`] = `
         schoolLogo="http://www.image.com/ef72daf3-c9a1-4c00-ba37-b3514392bdcf-8839c516815a.png"
         subtitle="Harvard University"
         title="Introduction to Computer Science"
-        url="https://www.edx.org/course/some-course?utm_source=source&linked_from=recommender"
+        url="https://www.edx.org/course/some-course?utm_source=source"
       />
     </div>
   </div>
diff --git a/src/widgets/ProductRecommendations/hooks.js b/src/widgets/ProductRecommendations/hooks.js
index 5154ce53..0727c6cb 100644
--- a/src/widgets/ProductRecommendations/hooks.js
+++ b/src/widgets/ProductRecommendations/hooks.js
@@ -35,7 +35,7 @@ export const useMostRecentCourseRunKey = () => {
 };
 
 export const useActivateRecommendationsExperiment = () => {
-  const hasAvailableDashboards = reduxHooks.useHasAvailableDashboards();
+  const enterpriseDashboardData = reduxHooks.useEnterpriseDashboardData();
   const hasRequestCompleted = reduxHooks.useRequestIsCompleted(RequestKeys.initialize);
   const mostRecentCourseRunKey = module.useMostRecentCourseRunKey();
   const userId = getAuthenticatedUser().userId.toString();
@@ -52,7 +52,7 @@ export const useActivateRecommendationsExperiment = () => {
       const activateExperiment = () => {
         const userAttributes = {
           is_mobile_user: isMobile,
-          is_enterprise_user: !!hasAvailableDashboards,
+          is_enterprise_user: !!enterpriseDashboardData,
           location: countryCode ? countryCode.toLowerCase() : '',
         };
         const experiment = activateProductRecommendationsExperiment(userId, userAttributes);
diff --git a/src/widgets/ProductRecommendations/hooks.test.js b/src/widgets/ProductRecommendations/hooks.test.js
index b11bf59e..ca5da682 100644
--- a/src/widgets/ProductRecommendations/hooks.test.js
+++ b/src/widgets/ProductRecommendations/hooks.test.js
@@ -33,7 +33,7 @@ jest.mock('experimentContext', () => ({
 jest.mock('hooks', () => ({
   reduxHooks: {
     useCurrentCourseList: jest.fn(),
-    useHasAvailableDashboards: jest.fn(),
+    useEnterpriseDashboardData: jest.fn(),
     useRequestIsCompleted: jest.fn(),
   },
 }));
@@ -159,7 +159,7 @@ describe('ProductRecommendations hooks', () => {
           optimizelyExperiment = optimizelyExperimentMock({}),
         ) => {
           reduxHooks.useCurrentCourseList.mockReturnValueOnce(populatedCourseListData);
-          reduxHooks.useHasAvailableDashboards.mockReturnValueOnce(null);
+          reduxHooks.useEnterpriseDashboardData.mockReturnValueOnce(null);
           reduxHooks.useRequestIsCompleted.mockReturnValueOnce(isCompleted);
           useExperimentContext.mockReturnValueOnce(experimentContext);
           activateProductRecommendationsExperiment.mockReturnValueOnce(optimizelyExperiment);
diff --git a/src/widgets/ProductRecommendations/testData.js b/src/widgets/ProductRecommendations/testData.js
index 22689d78..45739a28 100644
--- a/src/widgets/ProductRecommendations/testData.js
+++ b/src/widgets/ProductRecommendations/testData.js
@@ -1,11 +1,14 @@
-export const getCoursesWithType = (courseTypes) => {
+export const getCoursesWithType = (courseTypes, parameters = true) => {
   const courses = [];
+  const marketingUrl = parameters
+    ? 'https://www.edx.org/course/some-course?utm_source=source'
+    : 'https://www.edx.org/course/some-course';
 
   courseTypes.forEach((type) => {
     courses.push({
       title: 'Introduction to Computer Science',
       courseRunKey: 'course-v1:Test+Course+2022T2',
-      marketingUrl: 'https://www.edx.org/course/some-course?utm_source=source',
+      marketingUrl,
       courseType: type,
       image: {
         src: 'https://www.image-2.com/ed79a49b-64c1-48d2-afdc-054bf921e38d-6a76ceb47dea.small.jpg',
@@ -31,6 +34,7 @@ export const mockFooterRecommendationsHook = {
 
 export const mockCrossProductCourses = getCoursesWithType(['executive-education-2u', 'bootcamp-2u']);
 export const mockOpenCourses = getCoursesWithType(['verified-audit', 'audit', 'verified', 'course']);
+export const mockFallbackOpenCourse = getCoursesWithType(['course'], false);
 
 export const mockCrossProductResponse = {
   crossProductCourses: mockCrossProductCourses,
diff --git a/src/widgets/ProductRecommendations/utils.js b/src/widgets/ProductRecommendations/utils.js
index b757ac66..36b8b93c 100644
--- a/src/widgets/ProductRecommendations/utils.js
+++ b/src/widgets/ProductRecommendations/utils.js
@@ -40,7 +40,7 @@ export const courseTypeToProductTypeMap = {
 export const courseTypeToProductLineMap = {
   [executiveEducation]: 'executive-education',
   [bootCamp]: 'boot-camps',
-  Course: 'open-courses',
+  [course]: 'open-courses',
 };
 
 export const convertCourseRunKeyToCourseKey = (courseRunKey) => {

From 4790bf423701b4941bac9b9d81edd3cb27d829c9 Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Sat, 8 Jul 2023 13:52:18 +0200
Subject: [PATCH 03/10] chore: removed comment

---
 src/setupTest.jsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/setupTest.jsx b/src/setupTest.jsx
index e9fbbc4a..60b4af2d 100755
--- a/src/setupTest.jsx
+++ b/src/setupTest.jsx
@@ -1,4 +1,3 @@
-/* eslint-disable no-underscore-dangle */
 /* eslint-disable import/no-extraneous-dependencies */
 import '@testing-library/jest-dom';
 import '@testing-library/jest-dom/extend-expect';

From 14b1a247d98d772938e611e71bcec3280758c5d0 Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Mon, 10 Jul 2023 16:17:27 +0200
Subject: [PATCH 04/10] fix: effect in experiment context and hook dependancy
 changes

---
 src/experimentContext.jsx                     | 14 +------
 src/experimentContext.test.jsx                | 39 +------------------
 src/widgets/ProductRecommendations/hooks.js   |  2 +-
 .../ProductRecommendations/hooks.test.js      |  6 ++-
 4 files changed, 9 insertions(+), 52 deletions(-)

diff --git a/src/experimentContext.jsx b/src/experimentContext.jsx
index 89f02924..f97db5c7 100644
--- a/src/experimentContext.jsx
+++ b/src/experimentContext.jsx
@@ -12,24 +12,14 @@ export const state = StrictDict({
 
 export const useCountryCode = (setCountryCode) => {
   React.useEffect(() => {
-    let isMounted = true;
-
     api
       .fetchRecommendationsContext()
       .then((response) => {
-        if (isMounted) {
-          setCountryCode(response.data.countryCode);
-        }
+        setCountryCode(response.data.countryCode);
       })
       .catch(() => {
-        if (isMounted) {
-          setCountryCode('');
-        }
+        setCountryCode('');
       });
-
-    return () => {
-      isMounted = false;
-    };
     /* eslint-disable */
 }, []);
 };
diff --git a/src/experimentContext.test.jsx b/src/experimentContext.test.jsx
index 8f5a1788..e7a29916 100644
--- a/src/experimentContext.test.jsx
+++ b/src/experimentContext.test.jsx
@@ -4,7 +4,6 @@ import { waitFor } from '@testing-library/react';
 import { useWindowSize } from '@edx/paragon';
 
 import api from 'widgets/ProductRecommendations/api';
-import { wait } from 'widgets/ProductRecommendations/utils';
 import { MockUseState } from 'testUtils';
 
 import * as experiment from 'experimentContext';
@@ -41,7 +40,7 @@ describe('experiments context', () => {
         it('calls useEffect once', () => {
           expect(calls.length).toEqual(1);
         });
-        describe('successfull fetch while mounted', () => {
+        describe('successfull fetch', () => {
           it('sets the country code', async () => {
             let resolveFn;
             api.fetchRecommendationsContext.mockReturnValueOnce(
@@ -59,24 +58,7 @@ describe('experiments context', () => {
             });
           });
         });
-        describe('successfull fetch while unmounted', () => {
-          it('does not set the country code', async () => {
-            let resolveFn;
-            api.fetchRecommendationsContext.mockReturnValueOnce(
-              new Promise((resolve) => {
-                resolveFn = resolve;
-              }),
-            );
-            const unmount = cb();
-            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
-            expect(setCountryCode).not.toHaveBeenCalled();
-            unmount();
-            resolveFn(successfulFetch);
-            await wait(10);
-            expect(setCountryCode).not.toHaveBeenCalled();
-          });
-        });
-        describe('unsuccessfull fetch while mounted', () => {
+        describe('unsuccessfull fetch', () => {
           it('sets the country code to an empty string', async () => {
             let rejectFn;
             api.fetchRecommendationsContext.mockReturnValueOnce(
@@ -93,23 +75,6 @@ describe('experiments context', () => {
             });
           });
         });
-        describe('unsuccessfull fetch while unmounted', () => {
-          it('does not set the country code', async () => {
-            let rejectFn;
-            api.fetchRecommendationsContext.mockReturnValueOnce(
-              new Promise((resolve, reject) => {
-                rejectFn = reject;
-              }),
-            );
-            const unmount = cb();
-            expect(api.fetchRecommendationsContext).toHaveBeenCalled();
-            expect(setCountryCode).not.toHaveBeenCalled();
-            unmount();
-            rejectFn();
-            await wait(10);
-            expect(setCountryCode).not.toHaveBeenCalled();
-          });
-        });
       });
     });
   });
diff --git a/src/widgets/ProductRecommendations/hooks.js b/src/widgets/ProductRecommendations/hooks.js
index 0727c6cb..77cc3d52 100644
--- a/src/widgets/ProductRecommendations/hooks.js
+++ b/src/widgets/ProductRecommendations/hooks.js
@@ -80,7 +80,7 @@ export const useActivateRecommendationsExperiment = () => {
       }
     }
   /* eslint-disable */
-  }, [])
+  }, [isExperimentActive, countryCode])
 };
 
 export const useShowRecommendationsFooter = () => {
diff --git a/src/widgets/ProductRecommendations/hooks.test.js b/src/widgets/ProductRecommendations/hooks.test.js
index ca5da682..f7225725 100644
--- a/src/widgets/ProductRecommendations/hooks.test.js
+++ b/src/widgets/ProductRecommendations/hooks.test.js
@@ -128,6 +128,7 @@ describe('ProductRecommendations hooks', () => {
       describe('useEffect call', () => {
         let cb;
         let calls;
+        let prereqs
         const setExperiment = jest.fn();
         const setCountryCode = jest.fn();
         const userAttributes = { is_enterprise_user: false, is_mobile_user: false, location: 'za' };
@@ -167,11 +168,12 @@ describe('ProductRecommendations hooks', () => {
           hooks.useActivateRecommendationsExperiment();
 
           ({ calls } = React.useEffect.mock);
-          ([[cb]] = calls);
+          ([[cb, prereqs]] = calls);
         };
 
-        it('calls effect once', () => {
+        it('runs when isExperimentActive or countryCode changes (prereqs)', () => {
           setUp(true);
+          expect(prereqs).toEqual([false, 'ZA']);
           expect(calls.length).toEqual(1);
         });
         describe('when the request state is not completed', () => {

From c0b7db9c8be64088d424ef4dc11fd49ea554789a Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Mon, 10 Jul 2023 16:38:51 +0200
Subject: [PATCH 05/10] chore: bracket spacing

---
 src/experimentContext.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/experimentContext.jsx b/src/experimentContext.jsx
index f97db5c7..9bb87188 100644
--- a/src/experimentContext.jsx
+++ b/src/experimentContext.jsx
@@ -21,7 +21,7 @@ export const useCountryCode = (setCountryCode) => {
         setCountryCode('');
       });
     /* eslint-disable */
-}, []);
+  }, []);
 };
 
 export const ExperimentContext = React.createContext();

From ab3387fa1fa4883f71d2c4f4afb188a3e430ccd1 Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Mon, 10 Jul 2023 16:41:34 +0200
Subject: [PATCH 06/10] chore: missing semicolon

---
 src/widgets/ProductRecommendations/hooks.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ProductRecommendations/hooks.test.js b/src/widgets/ProductRecommendations/hooks.test.js
index f7225725..2d7a51ff 100644
--- a/src/widgets/ProductRecommendations/hooks.test.js
+++ b/src/widgets/ProductRecommendations/hooks.test.js
@@ -128,7 +128,7 @@ describe('ProductRecommendations hooks', () => {
       describe('useEffect call', () => {
         let cb;
         let calls;
-        let prereqs
+        let prereqs;
         const setExperiment = jest.fn();
         const setCountryCode = jest.fn();
         const userAttributes = { is_enterprise_user: false, is_mobile_user: false, location: 'za' };

From 85e98ab3ce673a9999cdaaa7c1de56858b2f06ad Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Tue, 11 Jul 2023 12:02:51 +0200
Subject: [PATCH 07/10] fix: course search page url fix

---
 .../ProductRecommendations/components/ProductCardHeader.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx b/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
index e9bcce8a..5531f834 100644
--- a/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
+++ b/src/widgets/ProductRecommendations/components/ProductCardHeader.jsx
@@ -29,7 +29,7 @@ const ProductCardHeader = ({ courseType }) => {
         return {
           heading: messages.courseHeading,
           description: messages.courseDescription,
-          url: '/search?tab=course?linked_from=recommender',
+          url: '/search?tab=course',
         };
       }
     }

From e43dba625529a667d3545b186643c8b3e3897106 Mon Sep 17 00:00:00 2001
From: Jody Bailey <jbailey@2u.com>
Date: Tue, 11 Jul 2023 16:06:07 +0200
Subject: [PATCH 08/10] fix: experiment context file name change

---
 src/App.jsx                                      | 2 +-
 src/App.test.jsx                                 | 4 ++--
 src/experimentContext.jsx                        | 2 +-
 src/experimentContext.test.jsx                   | 2 +-
 src/test/app.test.jsx                            | 2 +-
 src/widgets/ProductRecommendations/hooks.js      | 2 +-
 src/widgets/ProductRecommendations/hooks.test.js | 4 ++--
 7 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 51ec36e7..353340c2 100755
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -19,7 +19,7 @@ import {
 import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 import ZendeskFab from 'components/ZendeskFab';
-import { ExperimentProvider } from 'experimentContext';
+import { ExperimentProvider } from 'ExperimentContext';
 
 import track from 'tracking';
 
diff --git a/src/App.test.jsx b/src/App.test.jsx
index b9af20ab..a5eb23f1 100644
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -13,7 +13,7 @@ import { RequestKeys } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
 import Dashboard from 'containers/Dashboard';
 import LearnerDashboardHeader from 'containers/LearnerDashboardHeader';
-import { ExperimentProvider } from 'experimentContext';
+import { ExperimentProvider } from 'ExperimentContext';
 import { App } from './App';
 import messages from './messages';
 
@@ -22,7 +22,7 @@ jest.mock('@edx/frontend-component-footer', () => 'Footer');
 jest.mock('containers/Dashboard', () => 'Dashboard');
 jest.mock('containers/LearnerDashboardHeader', () => 'LearnerDashboardHeader');
 jest.mock('components/ZendeskFab', () => 'ZendeskFab');
-jest.mock('experimentContext', () => ({
+jest.mock('ExperimentContext', () => ({
   ExperimentProvider: 'ExperimentProvider',
 }));
 jest.mock('data/redux', () => ({
diff --git a/src/experimentContext.jsx b/src/experimentContext.jsx
index 9bb87188..fb8a50f1 100644
--- a/src/experimentContext.jsx
+++ b/src/experimentContext.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useWindowSize, breakpoints } from '@edx/paragon';
 import { StrictDict } from 'utils';
 import api from 'widgets/ProductRecommendations/api';
-import * as module from './experimentContext';
+import * as module from './ExperimentContext';
 
 export const state = StrictDict({
   experiment: (val) => React.useState(val), // eslint-disable-line
diff --git a/src/experimentContext.test.jsx b/src/experimentContext.test.jsx
index e7a29916..c4fa7616 100644
--- a/src/experimentContext.test.jsx
+++ b/src/experimentContext.test.jsx
@@ -6,7 +6,7 @@ import { useWindowSize } from '@edx/paragon';
 import api from 'widgets/ProductRecommendations/api';
 import { MockUseState } from 'testUtils';
 
-import * as experiment from 'experimentContext';
+import * as experiment from 'ExperimentContext';
 
 const state = new MockUseState(experiment);
 
diff --git a/src/test/app.test.jsx b/src/test/app.test.jsx
index 2074be27..f4f807b0 100644
--- a/src/test/app.test.jsx
+++ b/src/test/app.test.jsx
@@ -61,7 +61,7 @@ jest.mock('@edx/frontend-platform/auth', () => ({
   getLoginRedirectUrl: jest.fn(),
 }));
 
-jest.mock('experimentContext', () => ({
+jest.mock('ExperimentContext', () => ({
   ExperimentProvider: 'div'
 }));
 
diff --git a/src/widgets/ProductRecommendations/hooks.js b/src/widgets/ProductRecommendations/hooks.js
index 77cc3d52..b889cebc 100644
--- a/src/widgets/ProductRecommendations/hooks.js
+++ b/src/widgets/ProductRecommendations/hooks.js
@@ -6,7 +6,7 @@ import { StrictDict } from 'utils';
 import { reduxHooks } from 'hooks';
 import { SortKeys } from 'data/constants/app';
 import { useWindowSize, breakpoints } from '@edx/paragon';
-import { useExperimentContext } from 'experimentContext';
+import { useExperimentContext } from 'ExperimentContext';
 import { control, treatment, noExperiment } from './constants';
 import { activateProductRecommendationsExperiment, trackProductRecommendationsViewed } from './optimizelyExperiment';
 import { recommendationsViewed } from './track';
diff --git a/src/widgets/ProductRecommendations/hooks.test.js b/src/widgets/ProductRecommendations/hooks.test.js
index 2d7a51ff..111337dc 100644
--- a/src/widgets/ProductRecommendations/hooks.test.js
+++ b/src/widgets/ProductRecommendations/hooks.test.js
@@ -6,7 +6,7 @@ import { RequestStates } from 'data/constants/requests';
 import { reduxHooks } from 'hooks';
 import { useWindowSize } from '@edx/paragon';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
-import { useExperimentContext } from 'experimentContext';
+import { useExperimentContext } from 'ExperimentContext';
 import { recommendationsViewed } from './track';
 import { activateProductRecommendationsExperiment, trackProductRecommendationsViewed } from './optimizelyExperiment';
 import { control, treatment, noExperiment } from './constants';
@@ -26,7 +26,7 @@ jest.mock('@edx/frontend-platform/auth', () => ({
   getAuthenticatedUser: jest.fn(),
 }));
 
-jest.mock('experimentContext', () => ({
+jest.mock('ExperimentContext', () => ({
   useExperimentContext: jest.fn(),
 }));
 

From d40245c14ef4b786558c9940f871cf227f79f526 Mon Sep 17 00:00:00 2001
From: Jody Bailey <110463597+JodyBaileyy@users.noreply.github.com>
Date: Tue, 11 Jul 2023 16:21:33 +0200
Subject: [PATCH 09/10] fix: rename not pulling through

---
 src/{experimentContext.jsx => ExperimentContext.jsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/{experimentContext.jsx => ExperimentContext.jsx} (100%)

diff --git a/src/experimentContext.jsx b/src/ExperimentContext.jsx
similarity index 100%
rename from src/experimentContext.jsx
rename to src/ExperimentContext.jsx

From 410dccd8c37e2dfba15a3df038cfe2e07e888dc7 Mon Sep 17 00:00:00 2001
From: Jody Bailey <110463597+JodyBaileyy@users.noreply.github.com>
Date: Tue, 11 Jul 2023 16:22:15 +0200
Subject: [PATCH 10/10] fix: second rename not pulling through

---
 src/{experimentContext.test.jsx => ExperimentContext.test.jsx} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/{experimentContext.test.jsx => ExperimentContext.test.jsx} (100%)

diff --git a/src/experimentContext.test.jsx b/src/ExperimentContext.test.jsx
similarity index 100%
rename from src/experimentContext.test.jsx
rename to src/ExperimentContext.test.jsx