feat: update chat visibility (openedx#1297)

Author: alangsto

src/courseware/course/Course.jsx

@@ -70,6 +70,23 @@ const Course = ({
 
   const SidebarProviderComponent = enableNewSidebar === 'true' ? NewSidebarProvider : SidebarProvider;
 
+  const chatValidDates = () => {
+    const date = new Date();
+    const utcDate = date.toISOString();
+
+    const enrollmentStartDate = course.enrollmentStart || utcDate;
+    const startDate = course.start || enrollmentStartDate;
+    const enrollmentEndDate = course.enrollmentEnd || utcDate;
+    const endDate = course.end || enrollmentEndDate;
+
+    return (
+      startDate <= enrollmentStartDate
+      && enrollmentStartDate <= utcDate
+      && utcDate <= enrollmentEndDate
+      && enrollmentEndDate <= endDate
+    );
+  };
+
   return (
     <SidebarProviderComponent courseId={courseId} unitId={unitId}>
       <Helmet>
@@ -92,7 +109,7 @@ const Course = ({
               courseId={courseId}
               contentToolsEnabled={course.showCalculator || course.notes.enabled}
               unitId={unitId}
-              endDate={course.end ? course.end : ''}
+              validDates={chatValidDates()}
             />
           </>
         )}

src/courseware/course/chat/Chat.jsx

@@ -12,7 +12,7 @@ const Chat = ({
   courseId,
   contentToolsEnabled,
   unitId,
-  endDate,
+  validDates,
 }) => {
   const {
     activeAttempt, exam,
@@ -35,17 +35,10 @@ const Chat = ({
     && [...VERIFIED_MODES].some(mode => mode === enrollmentMode)
   );
 
-  const endDatePassed = () => {
-    const date = new Date();
-    const utcDate = date.toISOString();
-
-    return endDate ? utcDate > endDate : false; // evaluate if end date has passed only if course has end date
-  };
-
   const shouldDisplayChat = (
     enabled
     && (hasVerifiedEnrollment || isStaff) // display only to verified learners or staff
-    && !endDatePassed()
+    && validDates
     // it is necessary to check both whether the user is in an exam, and whether or not they are viewing an exam
     // this will prevent the learner from interacting with the tool at any point of the exam flow, even at the
     // entrance interstitial.
@@ -70,7 +63,7 @@ Chat.propTypes = {
   courseId: PropTypes.string.isRequired,
   contentToolsEnabled: PropTypes.bool.isRequired,
   unitId: PropTypes.string.isRequired,
-  endDate: PropTypes.string.isRequired,
+  validDates: PropTypes.bool.isRequired,
 };
 
 Chat.defaultProps = {

src/courseware/course/chat/Chat.test.jsx

@@ -38,7 +38,6 @@ const enabledModes = [
   'paid-executive-education', 'paid-bootcamp',
 ];
 const disabledModes = [null, undefined, 'xyz', 'audit', 'honor', 'unpaid-executive-education', 'unpaid-bootcamp'];
-const currentTime = new Date();
 
 describe('Chat', () => {
   let store;
@@ -73,7 +72,7 @@ describe('Chat', () => {
               enabled
               courseId={courseId}
               contentToolsEnabled={false}
-              endDate={new Date(currentTime.getTime() + 10 * 60000).toISOString()}
+              validDates
             />
           </BrowserRouter>,
           { store },
@@ -101,7 +100,7 @@ describe('Chat', () => {
             enabled
             courseId={courseId}
             contentToolsEnabled={false}
-            endDate={new Date(currentTime.getTime() + 10 * 60000).toISOString()}
+            validDates
           />
         </BrowserRouter>,
         { store },
@@ -157,7 +156,7 @@ describe('Chat', () => {
               enabled={test.enabled}
               courseId={courseId}
               contentToolsEnabled={false}
-              endDate={new Date(currentTime.getTime() + 10 * 60000).toISOString()}
+              validDates
             />
           </BrowserRouter>,
           { store },
@@ -182,7 +181,7 @@ describe('Chat', () => {
           enabled
           courseId={courseId}
           contentToolsEnabled={false}
-          endDate={new Date(currentTime.getTime() - 10 * 60000).toISOString()}
+          validDates={false}
         />
       </BrowserRouter>,
       { store },
@@ -192,25 +191,6 @@ describe('Chat', () => {
     expect(chat).not.toBeInTheDocument();
   });
 
-  it('if course has no end date, component should be visible', async () => {
-    render(
-      <BrowserRouter>
-        <Chat
-          enrollmentMode="verified"
-          isStaff
-          enabled
-          courseId={courseId}
-          contentToolsEnabled={false}
-          endDate={null}
-        />
-      </BrowserRouter>,
-      { store },
-    );
-
-    const chat = screen.queryByTestId(mockXpertTestId);
-    expect(chat).toBeInTheDocument();
-  });
-
   it('if learner has active exam attempt, component should not be visible', async () => {
     store = await initializeTestStore({
       specialExams: {
@@ -228,7 +208,7 @@ describe('Chat', () => {
           enabled
           courseId={courseId}
           contentToolsEnabled={false}
-          endDate={null}
+          validDates
         />
       </BrowserRouter>,
       { store },