fix: set auditTrialLengthDays + nits

src/components/Sidebar/Sidebar.scss

@@ -34,6 +34,7 @@
   }
 
   .trial-header {
+    font-size: 0.9em;
     background-color: #F49974;
   }
 }

src/components/Sidebar/index.jsx

@@ -7,6 +7,9 @@ import {
 } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
 
+// Commenting this out for now until we figure out a solution for getting the upgrade url
+// import { useModel } from '@src/generic/model-store';
+
 import showSurvey from '../../utils/surveyMonkey';
 
 import APIError from '../APIError';
@@ -31,6 +34,17 @@ const Sidebar = ({
   } = useSelector(state => state.learningAssistant);
   const chatboxContainerRef = useRef(null);
 
+  // Commenting this out for now until we figure out a solution for getting the upgrade url
+  // const courseHomeMeta = useModel('courseHomeMeta', courseId);
+  // const {
+  //   verifiedMode,
+  // } = courseHomeMeta;
+
+  // const course = useModel('coursewareMeta', courseId);
+  // const {
+  //   offer,
+  // } = course;
+
   // this use effect is intended to scroll to the bottom of the chat window, in the case
   // that a message is larger than the chat window height.
   useEffect(() => {
@@ -77,40 +91,36 @@ const Sidebar = ({
     <MessageForm courseId={courseId} shouldAutofocus unitId={unitId} />
   );
 
-
   // Get this to work
   const getDaysRemainingMessage = () => {
-    // if enrollment mode is NOT upgrade eligible, there's no audit trial data
-    if (!isUpgradeEligible) {
-      return
-
-      // if enrollment mode IS upgrade eligible, return if the trial is expired
-    } else {
-      const auditTrialExpirationDate = new Date(auditTrial.expirationDate);
-      const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
-      const daysRemaining = Math.ceil((auditTrialExpirationDate - Date.now()) / oneDay);
-
-      if (daysRemaining > 1) {
-        return (
-          <div>
-            {daysRemaining} days remaining. <a href=''>Upgrade</a> for full access to Xpert.
-          </div>
-        );
-      } else if (daysRemaining === 1) {
-        return (
-          <div>
-            Your trial ends today! <a href=''>Upgrade</a> for full access to Xpert.
-          </div>
-        );
-      } else {
-        // TODO: Show the upgrade screen instead of this banner, to be done in future ticket
-        return (
-          <div>
-            Your trial has expired. <a href=''>Upgrade</a> for full access to Xpert.
-          </div>
-        );
-      };
+    const auditTrialExpirationDate = new Date(auditTrial.expirationDate);
+    const oneDay = 24 * 60 * 60 * 1000; // hours*minutes*seconds*milliseconds
+    const daysRemaining = Math.ceil((auditTrialExpirationDate - Date.now()) / oneDay);
+
+    // Commenting this out for now until we figure out a solution for getting the upgrade url
+    // const upgradeURL = offer ? offer.upgradeUrl : verifiedMode.upgradeUrl;
+    const upgradeURL = '';
+
+    if (daysRemaining > 1) {
+      const irtl = new Intl.RelativeTimeFormat({ style: 'long' });
+      return (
+        <div>
+          Your trial ends {irtl.format(daysRemaining, 'day')}. <a href={upgradeURL}>Upgrade</a> for full access to Xpert.
+        </div>
+      );
+    } if (daysRemaining === 1) {
+      return (
+        <div>
+          Your trial ends today! <a href={upgradeURL}>Upgrade</a> for full access to Xpert.
+        </div>
+      );
     }
+    // TODO: Show the upgrade screen instead of this banner, to be done in future ticket
+    return (
+      <div>
+        Your trial has expired. <a href={upgradeURL}>Upgrade</a> for full access to Xpert.
+      </div>
+    );
   };
 
   /**
@@ -123,10 +133,12 @@ const Sidebar = ({
       <div className="p-3 sidebar-header" data-testid="sidebar-xpert-header">
         <XpertLogo />
       </div>
-      {}
-      <div className="p-3 trial-header">
-        {getDaysRemainingMessage()}
-      </div>
+      {isUpgradeEligible
+        && (
+        <div className="p-3 trial-header">
+          {getDaysRemainingMessage()}
+        </div>
+        )}
       <span className="separator" />
       <ChatBox
         chatboxContainerRef={chatboxContainerRef}

src/data/slice.js

@@ -12,6 +12,7 @@ export const initialState = {
   sidebarIsOpen: false,
   isEnabled: false,
   auditTrial: {},
+  auditTrialLengthDays: null,
 };
 
 export const learningAssistantSlice = createSlice({
@@ -48,6 +49,9 @@ export const learningAssistantSlice = createSlice({
     setAuditTrial: (state, { payload }) => {
       state.auditTrial = payload;
     },
+    setAuditTrialLengthDays: (state, { payload }) => {
+      state.auditTrialLengthDays = payload;
+    },
   },
 });
 
@@ -62,6 +66,7 @@ export const {
   setSidebarIsOpen,
   setIsEnabled,
   setAuditTrial,
+  setAuditTrialLengthDays,
 } = learningAssistantSlice.actions;
 
 export const {

src/data/thunks.js

@@ -17,9 +17,56 @@ import {
   setSidebarIsOpen,
   setIsEnabled,
   setAuditTrial,
+  setAuditTrialLengthDays,
 } from './slice';
 import { OPTIMIZELY_PROMPT_EXPERIMENT_KEY } from './optimizely';
 
+export function getLearningAssistantChatSummary(courseId) {
+  return async (dispatch) => {
+    dispatch(setApiIsLoading(true));
+
+    try {
+      const data = await fetchLearningAssistantChatSummary(courseId);
+
+      // Enabled
+      dispatch(setIsEnabled(data.enabled));
+
+      // Message History
+      const rawMessageList = data.message_history;
+
+      // If returned message history data is not empty
+      if (rawMessageList.length) {
+        const messageList = rawMessageList
+          .map(({ timestamp, ...msg }) => ({
+            ...msg,
+            timestamp: new Date(timestamp).toString(), // Parse ISO time to Date()
+          }));
+
+        dispatch(setMessageList({ messageList }));
+
+        // If it has chat history, then we assume the user already aknowledged.
+        dispatch(setDisclosureAcknowledged(true));
+      }
+
+      // Audit Trial
+      const auditTrial = {
+        startDate: data.audit_trial.start_date,
+        expirationDate: data.audit_trial.expiration_date,
+      };
+
+      // If returned audit trial data is not empty
+      if (Object.keys(auditTrial).length !== 0) {
+        dispatch(setAuditTrial(auditTrial));
+      }
+
+      dispatch(setAuditTrialLengthDays(data.audit_trial_length_days));
+    } catch (error) {
+      dispatch(setApiError());
+    }
+    dispatch(setApiIsLoading(false));
+  };
+}
+
 export function addChatMessage(role, content, courseId, promptExperimentVariationKey = undefined) {
   return (dispatch, getState) => {
     const { messageList, conversationId } = getState().learningAssistant;
@@ -70,9 +117,9 @@ export function getChatResponse(courseId, unitId, promptExperimentVariationKey =
 
       dispatch(setApiIsLoading(false));
       dispatch(addChatMessage(message.role, message.content, courseId, promptExperimentVariationKey));
-      if (message.audit_trial_created) {
-        dispatch(getLearningAssistantChatSummary(courseId));
-      }
+      // NOTE for self: There could be a case where the user just keeps a tab open to keep
+      // their trial going. Though this is unlikely, this call prevents the trial from continuing in the UI
+      dispatch(getLearningAssistantChatSummary(courseId));
     } catch (error) {
       dispatch(setApiError());
       dispatch(setApiIsLoading(false));
@@ -103,48 +150,3 @@ export function updateSidebarIsOpen(isOpen) {
     dispatch(setSidebarIsOpen(isOpen));
   };
 }
-
-export function getLearningAssistantChatSummary(courseId) {
-  return async (dispatch) => {
-    dispatch(setApiIsLoading(true));
-
-    try {
-      const data = await fetchLearningAssistantChatSummary(courseId);
-
-      // Enabled
-      dispatch(setIsEnabled(data.enabled));
-
-      // Message History
-      const rawMessageList = data.message_history;
-
-      // If returned message history data is not empty
-      if (rawMessageList.length) {
-        const messageList = rawMessageList
-          .map(({ timestamp, ...msg }) => ({
-            ...msg,
-            timestamp: new Date(timestamp).toString(), // Parse ISO time to Date()
-          }));
-
-        dispatch(setMessageList({ messageList }));
-
-        // If it has chat history, then we assume the user already aknowledged.
-        dispatch(setDisclosureAcknowledged(true));
-      }
-
-      // Audit Trial
-      const auditTrial = {
-        startDate: data.audit_trial.start_date,
-        expirationDate: data.audit_trial.expiration_date,
-      };
-      console.log("thunks auditTrial:", auditTrial);
-
-      // If returned audit trial data is not empty
-      if (Object.keys(auditTrial).length !== 0) {
-        dispatch(setAuditTrial(auditTrial));
-      }
-    } catch (error) {
-      dispatch(setApiError());
-    }
-    dispatch(setApiIsLoading(false));
-  };
-}

src/widgets/Xpert.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useEffect, useState } from 'react';
+import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { updateSidebarIsOpen, getLearningAssistantChatSummary } from '../data/thunks';