feat: hide xpert if user is in control variation (#86)

* feat: hide xpert if user is in control variation

* fix: Update src/widgets/Xpert.jsx

Co-authored-by: Marcos Rigoli <rigoli82@gmail.com>

* fix: Update src/widgets/Xpert.jsx

Co-authored-by: Marcos Rigoli <rigoli82@gmail.com>

---------

Co-authored-by: Marcos Rigoli <rigoli82@gmail.com>

Author: alangsto

src/widgets/Xpert.jsx

@@ -1,11 +1,13 @@
 import PropTypes from 'prop-types';
 import { useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
+import { useModel } from '@src/generic/model-store'; // eslint-disable-line import/no-unresolved
 
 import { updateSidebarIsOpen, getLearningAssistantChatSummary } from '../data/thunks';
 import ToggleXpert from '../components/ToggleXpertButton';
 import Sidebar from '../components/Sidebar';
-import { ExperimentsProvider } from '../experiments';
+import { OPTIMIZELY_AUDIT_TRIAL_LENGTH_EXPERIMENT_VARIATION_KEYS } from '../data/optimizely';
+import { ExperimentsProvider, useAuditTrialExperimentDecision } from '../experiments';
 import { CourseInfoProvider } from '../context';
 
 const Xpert = ({
@@ -15,6 +17,15 @@ const Xpert = ({
   isUpgradeEligible,
 }) => {
   const dispatch = useDispatch();
+
+  const {
+    isStaff,
+  } = useModel('courseHomeMeta', courseId);
+
+  useEffect(() => {
+    dispatch(getLearningAssistantChatSummary(courseId));
+  }, [dispatch, courseId]);
+
   const courseInfo = useMemo(
     () => ({ courseId, unitId, isUpgradeEligible }),
     [courseId, unitId, isUpgradeEligible],
@@ -29,27 +40,36 @@ const Xpert = ({
     dispatch(updateSidebarIsOpen(isOpen));
   };
 
-  useEffect(() => {
-    dispatch(getLearningAssistantChatSummary(courseId));
-  }, [dispatch, courseId]);
+  const [decision] = useAuditTrialExperimentDecision();
+  const { enabled: experimentEnabled, variationKey } = decision || {};
+
+  // if a user is not part of the experiment, not part of the control, or not eligible for upgrade, they should
+  // still see xpert
+  const shouldDisplayXpert = (
+    !experimentEnabled
+    || !(variationKey === OPTIMIZELY_AUDIT_TRIAL_LENGTH_EXPERIMENT_VARIATION_KEYS.CONTROL)
+    || isStaff
+  );
 
   return isEnabled ? (
     <CourseInfoProvider value={courseInfo}>
       <ExperimentsProvider>
-        <>
-          <ToggleXpert
-            courseId={courseId}
-            isOpen={sidebarIsOpen}
-            setIsOpen={setSidebarIsOpen}
-            contentToolsEnabled={contentToolsEnabled}
-          />
-          <Sidebar
-            courseId={courseId}
-            isOpen={sidebarIsOpen}
-            setIsOpen={setSidebarIsOpen}
-            unitId={unitId}
-          />
-        </>
+        { shouldDisplayXpert ? (
+          <>
+            <ToggleXpert
+              courseId={courseId}
+              isOpen={sidebarIsOpen}
+              setIsOpen={setSidebarIsOpen}
+              contentToolsEnabled={contentToolsEnabled}
+            />
+            <Sidebar
+              courseId={courseId}
+              isOpen={sidebarIsOpen}
+              setIsOpen={setSidebarIsOpen}
+              unitId={unitId}
+            />
+          </>
+        ) : null }
       </ExperimentsProvider>
     </CourseInfoProvider>
   ) : null;

src/widgets/Xpert.test.jsx

@@ -2,13 +2,15 @@ import React from 'react';
 
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
+import { useModel } from '@src/generic/model-store'; // eslint-disable-line import/no-unresolved
 
 import * as api from '../data/api';
 import Xpert from './Xpert';
 
 import * as surveyMonkey from '../utils/surveyMonkey';
 import { render, createRandomResponseForTesting } from '../utils/utils.test';
-import { usePromptExperimentDecision } from '../experiments';
+import { useAuditTrialExperimentDecision, usePromptExperimentDecision } from '../experiments';
+import { OPTIMIZELY_AUDIT_TRIAL_LENGTH_EXPERIMENT_VARIATION_KEYS } from '../data/optimizely';
 
 jest.mock('@edx/frontend-platform/analytics');
 jest.mock('@edx/frontend-platform/auth', () => ({
@@ -18,12 +20,18 @@ jest.mock('@edx/frontend-platform/auth', () => ({
 jest.mock('../experiments', () => ({
   ExperimentsProvider: ({ children }) => children,
   usePromptExperimentDecision: jest.fn(),
+  useAuditTrialExperimentDecision: jest.fn(() => [{
+    enabled: true,
+    variationKey: 'test',
+  }]),
 }));
 
 jest.mock('../utils/scroll', () => ({
   scrollToBottom: jest.fn(),
 }));
 
+useModel.mockImplementation(() => ({ isStaff: false }));
+
 const initialState = {
   learningAssistant: {
     currentMessage: '',
@@ -73,7 +81,6 @@ test('doesn\'t load if not enabled', async () => {
 
   // button to open chat should not be in the DOM
   await waitFor(() => expect(screen.queryByTestId('toggle-button')).not.toBeInTheDocument());
-  // expect(screen.queryByTestId('toggle-button')).not.toBeVisible();
   await waitFor(() => (expect(screen.queryByTestId('action-message')).not.toBeInTheDocument()));
 });
 test('initial load displays correct elements', async () => {
@@ -349,3 +356,16 @@ test('survey monkey survey should appear after closing sidebar', async () => {
   expect(survey).toHaveBeenCalledTimes(1);
   survey.mockRestore();
 });
+test('Xpert is not rendered for control group', async () => {
+  useAuditTrialExperimentDecision.mockReturnValue([{
+    enabled: true,
+    variationKey: OPTIMIZELY_AUDIT_TRIAL_LENGTH_EXPERIMENT_VARIATION_KEYS.CONTROL,
+  }]);
+
+  render(
+    <Xpert courseId={courseId} contentToolsEnabled={false} unitId={unitId} />,
+    { preloadedState: initialState },
+  );
+
+  await waitFor(() => expect(screen.queryByTestId('toggle-button')).not.toBeInTheDocument());
+});