feat: display upgrade panel when audit trial is expired

src/components/Disclosure/__snapshots__/index.test.jsx.snap

@@ -119,7 +119,7 @@ exports[`<TrialDisclosure /> When trial upgrade being shown should match snapsho
             </small>
           </div>
           <a
-            class="trial-upgrade mt-3 btn btn-primary btn-block"
+            class="trial-upgrade mt-3 btn btn-brand btn-block"
             data-testid="upgrade-cta"
             href="https://upgrade.edx/course/test"
           >

src/components/Disclosure/index.jsx

@@ -1,20 +1,20 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Hyperlink, Icon, Button } from '@openedx/paragon';
+import { Hyperlink, Icon } from '@openedx/paragon';
 import { QuestionAnswerOutline, LightbulbCircle, AutoAwesome } from '@openedx/paragon/icons';
 import { ensureConfig, getConfig } from '@edx/frontend-platform/config';
-import { useCourseUpgrade, useTrackEvent } from '../../hooks';
+
+import UpgradeButton from '../UpgradeButton';
+import { useCourseUpgrade } from '../../hooks';
 
 import './Disclosure.scss';
 
 ensureConfig(['PRIVACY_POLICY_URL']);
 
 const Disclosure = ({ children }) => {
-  const { upgradeable, upgradeUrl, auditTrialLengthDays } = useCourseUpgrade();
-  const { track } = useTrackEvent();
+  const { upgradeable, auditTrialLengthDays } = useCourseUpgrade();
 
-  const handleClick = () => track('edx.ui.lms.learning_assistant.disclosure_upgrade_click');
   const freeDays = auditTrialLengthDays === 1 ? '1 day' : `${auditTrialLengthDays} days`;
 
   return (
@@ -49,15 +49,7 @@ const Disclosure = ({ children }) => {
                   Free for {freeDays}, then upgrade course for full access to Xpert features.
                 </small>
               </div>
-              <Button
-                onClick={handleClick}
-                href={upgradeUrl}
-                className="trial-upgrade mt-3"
-                block
-                data-testid="upgrade-cta"
-              >
-                Upgrade now
-              </Button>
+              <UpgradeButton trackingEventName="edx.ui.lms.learning_assistant.disclosure_upgrade_click" />
             </div>
           </div>
         ) : null}

src/components/Disclosure/index.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
-import { fireEvent, screen } from '@testing-library/react';
+import { screen } from '@testing-library/react';
 import { render } from '../../utils/utils.test';
-import { useCourseUpgrade, useTrackEvent } from '../../hooks';
+import { useCourseUpgrade } from '../../hooks';
 
 import TrialDisclosure from '.';
 
@@ -53,15 +53,12 @@ describe('<TrialDisclosure />', () => {
   });
 
   describe('When trial upgrade being shown', () => {
-    const mockedTrackEvent = jest.fn();
-
     beforeEach(() => {
       useCourseUpgrade.mockReturnValue({
         upgradeable: true,
         upgradeUrl: mockedUpgradeUrl,
         auditTrialLengthDays: mockedAuditTrialDays,
       });
-      useTrackEvent.mockReturnValue({ track: mockedTrackEvent });
       ({ container } = render(<TrialDisclosure showTrial><span>Children</span></TrialDisclosure>));
     });
 
@@ -78,16 +75,6 @@ describe('<TrialDisclosure />', () => {
       expect(upgradeCta).toHaveAttribute('href', mockedUpgradeUrl);
     });
 
-    it('should call the track event on click', () => {
-      const upgradeCta = screen.queryByTestId('upgrade-cta');
-
-      expect(mockedTrackEvent).not.toHaveBeenCalled();
-
-      fireEvent.click(upgradeCta);
-
-      expect(mockedTrackEvent).toHaveBeenCalledWith('edx.ui.lms.learning_assistant.disclosure_upgrade_click');
-    });
-
     it('should match snapshot', () => {
       expect(container).toMatchSnapshot();
     });

src/components/Sidebar/index.jsx

@@ -7,11 +7,13 @@ import {
 } from '@openedx/paragon';
 import { Close } from '@openedx/paragon/icons';
 
+import { useCourseUpgrade } from '../../hooks';
 import showSurvey from '../../utils/surveyMonkey';
 
 import APIError from '../APIError';
 import ChatBox from '../ChatBox';
 import Disclosure from '../Disclosure';
+import UpgradePanel from '../UpgradePanel';
 import MessageForm from '../MessageForm';
 import { ReactComponent as XpertLogo } from '../../assets/xpert-logo.svg';
 import './Sidebar.scss';
@@ -27,6 +29,9 @@ const Sidebar = ({
     disclosureAcknowledged,
     messageList,
   } = useSelector(state => state.learningAssistant);
+
+  const { upgradeable, auditTrialExpired } = useCourseUpgrade();
+
   const chatboxContainerRef = useRef(null);
 
   // this use effect is intended to scroll to the bottom of the chat window, in the case
@@ -97,6 +102,15 @@ const Sidebar = ({
     </div>
   );
 
+  const getPanel = () => {
+    const showUpgrade = upgradeable && auditTrialExpired;
+
+    if (showUpgrade) {
+      return <UpgradePanel />;
+    }
+    return (disclosureAcknowledged ? (getSidebar()) : (<Disclosure>{getMessageForm()}</Disclosure>));
+  };
+
   return (
     isOpen && (
       <div
@@ -114,7 +128,7 @@ const Sidebar = ({
           invertColors
           data-testid="close-button"
         />
-        {disclosureAcknowledged ? (getSidebar()) : (<Disclosure>{getMessageForm()}</Disclosure>)}
+        {getPanel()}
       </div>
     )
   );

src/components/Sidebar/index.test.jsx

@@ -5,6 +5,7 @@ import { usePromptExperimentDecision } from '../../experiments';
 import { render as renderComponent } from '../../utils/utils.test';
 import { initialState } from '../../data/slice';
 import showSurvey from '../../utils/surveyMonkey';
+import { useCourseUpgrade, useTrackEvent } from '../../hooks';
 
 import Sidebar from '.';
 
@@ -33,6 +34,11 @@ jest.mock('../../experiments', () => ({
   usePromptExperimentDecision: jest.fn(),
 }));
 
+jest.mock('../../hooks', () => ({
+  useCourseUpgrade: jest.fn(),
+  useTrackEvent: jest.fn(),
+}));
+
 const defaultProps = {
   courseId: 'some-course-id',
   isOpen: true,
@@ -63,6 +69,8 @@ const render = async (props = {}, sliceState = {}) => {
 describe('<Sidebar />', () => {
   beforeEach(() => {
     jest.resetAllMocks();
+    useCourseUpgrade.mockReturnValue({ upgradeable: false });
+    useTrackEvent.mockReturnValue({ track: jest.fn() });
     usePromptExperimentDecision.mockReturnValue([]);
   });
 
@@ -81,6 +89,15 @@ describe('<Sidebar />', () => {
       render(undefined, { disclosureAcknowledged: true });
       expect(screen.queryByTestId('sidebar-xpert')).toBeInTheDocument();
     });
+
+    it('should not render xpert if audit trial is expired', () => {
+      useCourseUpgrade.mockReturnValue({
+        upgradeable: true,
+        auditTrialExpired: true,
+      });
+      render();
+      expect(screen.queryByTestId('sidebar-xpert')).not.toBeInTheDocument();
+    });
   });
 
   describe('when it\'s not open', () => {

src/components/UpgradeButton/UpgradeButton.scss

@@ -0,0 +1,3 @@
+.trial-upgrade {
+  border-radius: 99rem;
+}

src/components/UpgradeButton/index.jsx

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import { Button, Icon } from '@openedx/paragon';
+import { LockOpen } from '@openedx/paragon/icons';
+import { useCourseUpgrade, useTrackEvent } from '../../hooks';
+
+import './UpgradeButton.scss';
+
+const UpgradeButton = ({ includeLockIcon, trackingEventName }) => {
+  const { upgradeUrl } = useCourseUpgrade();
+  const { track } = useTrackEvent();
+
+  const handleClick = () => track(trackingEventName);
+
+  return (
+    <Button
+      onClick={handleClick}
+      href={upgradeUrl}
+      className="trial-upgrade mt-3"
+      variant="brand"
+      data-testid="upgrade-cta"
+      block
+    >
+      { includeLockIcon ? <Icon src={LockOpen} className="my-0 mx-2" data-testid="lock-icon" /> : null }
+      Upgrade now
+    </Button>
+  );
+};
+
+UpgradeButton.propTypes = {
+  includeLockIcon: PropTypes.bool,
+  trackingEventName: PropTypes.string.isRequired,
+};
+
+UpgradeButton.defaultProps = {
+  includeLockIcon: false,
+};
+
+export default UpgradeButton;

src/components/UpgradeButton/index.test.jsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+import { render } from '../../utils/utils.test';
+import { useCourseUpgrade, useTrackEvent } from '../../hooks';
+
+import UpgradeButton from '.';
+
+jest.mock('../../hooks', () => ({
+  useCourseUpgrade: jest.fn(),
+  useTrackEvent: jest.fn(),
+}));
+
+describe('UpgradeButton', () => {
+  beforeEach(() => {
+    useCourseUpgrade.mockReturnValue({ upgradeUrl: 'www.test.com' });
+    useTrackEvent.mockReturnValue({ track: jest.fn() });
+  });
+
+  it('should render UpgradeButton', () => {
+    render(<UpgradeButton trackingEventName="test.tracking" />);
+    expect(screen.queryByText('Upgrade now')).toBeInTheDocument();
+    expect(screen.queryByTestId('upgrade-cta')).toHaveAttribute('href', 'www.test.com');
+    expect(screen.queryByTestId('lock-icon')).not.toBeInTheDocument();
+  });
+
+  it('should call track event on click', () => {
+    const mockedTrackEvent = jest.fn();
+    useTrackEvent.mockReturnValue({ track: mockedTrackEvent });
+
+    render(<UpgradeButton trackingEventName="test.tracking" />);
+
+    const upgradeCta = screen.queryByTestId('upgrade-cta');
+    expect(mockedTrackEvent).not.toHaveBeenCalled();
+    fireEvent.click(upgradeCta);
+    expect(mockedTrackEvent).toHaveBeenCalledWith('test.tracking');
+  });
+
+  it('should render lock icon', () => {
+    render(<UpgradeButton trackingEventName="test.tracking" includeLockIcon />);
+    expect(screen.queryByTestId('lock-icon')).toBeInTheDocument();
+  });
+});

src/components/UpgradePanel/UpgradePanel.scss

@@ -0,0 +1,21 @@
+@use '../../utils/variables';
+
+.upgrade-panel {
+  height: 100%;
+
+  overflow-y: auto;
+  background-color: variables.$dark-green;
+
+  h2 {
+    font-size: 1.375rem;
+  }
+
+  .xpert-value-prop-check {
+    color: variables.$accent-yellow;
+  }
+
+  .xpert-value-prop {
+    margin-bottom: 1rem;
+    font-size: 0.875rem;
+  }
+}