feat: Updated Disclaimer screen with trial option

src/components/Disclosure/Disclosure.scss

@@ -2,16 +2,31 @@
 
 .disclosure {
     height: 100%;
-
     overflow-y: auto;
     background-color: variables.$dark-green;
+    font-family: Inter, Arial, sans-serif;
+    padding: 2rem;
+    display: flex;
+    flex-direction: column;
 
     h2 {
-        font-size: 2rem;
+        font-size: 1.375rem;
     }
 
     h3 {
+        font-family: "Roboto Mono", Inter, Arial, sans-serif;
         color: variables.$accent-yellow;
+        margin-bottom: 3rem;
+    }
+
+    small {
+        font-size: 0.875rem;
+    }
+
+    .bullet-icon {
+        width: 2rem;
+        height: 2rem;
+        margin-right: 1rem;
     }
 
     p {
@@ -30,6 +45,46 @@
     }
 
     .disclaimer {
-        font-size: 1rem;
+        font-size: 0.75rem;
+    }
+
+    .trial-period {
+        padding: 3px;
+        background: #2D494E;
+        border-radius: 0.8125rem;
+        background-image:
+            linear-gradient(#2D494E, #2D494E),
+            linear-gradient(to right, #E76F3F, #EBA7BC);
+        background-origin: border-box;
+        background-clip: content-box, border-box;
+
+        &-content {
+            padding: 0.8125rem;
+        }
+
+        .bullet-icon {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 0.5rem;
+
+            svg path {
+                fill: #E98B7E;
+            }
+        }
+    }
+
+    .trial-upgrade {
+        background: #D74000;
+        border-radius: 99rem;
+        font-size: 0
+        .875rem;
+    }
+
+    .pgn__form-group {
+        margin: 0;
+    }
+    .pgn__form-control-decorator-group {
+        margin: 0;
     }
 }
+

src/components/Disclosure/Disclosure.test.jsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+import { render } from '../../utils/utils.test';
+import { useCourseUpgrade, useTrackEvent } from '../../hooks';
+
+import TrialDisclosure from '.';
+
+const mockedUpgradeUrl = 'https://upgrade.edx/course/test';
+const mockedAuditTrialDays = 7;
+
+jest.mock('../../hooks', () => ({
+  useCourseUpgrade: jest.fn(),
+  useTrackEvent: jest.fn(() => ({ track: jest.fn() })),
+}));
+
+const PRIVACY_POLICY_URL = 'https://some.url/policy';
+jest.mock('@edx/frontend-platform/config', () => ({
+  ensureConfig: jest.fn(),
+  getConfig: () => ({ PRIVACY_POLICY_URL }),
+}));
+
+describe('<TrialDisclosure />', () => {
+  let container;
+
+  describe('When trial upgrade is not being shown', () => {
+    beforeEach(() => {
+      useCourseUpgrade.mockReturnValue({ upgradeable: false });
+      ({ container } = render(<TrialDisclosure><span>Children</span></TrialDisclosure>));
+    });
+
+    it('should have a link to the privacy policy url', () => {
+      const link = screen.queryByText('privacy policy');
+
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', PRIVACY_POLICY_URL);
+    });
+
+    it('should not show the trial message', () => {
+      const upgrade = screen.queryByTestId('free-days-label');
+
+      expect(upgrade).not.toBeInTheDocument();
+    });
+
+    it('should not show the upgrade CTA', () => {
+      const upgradeCta = screen.queryByTestId('upgrade-cta');
+
+      expect(upgradeCta).not.toBeInTheDocument();
+    });
+
+    it('should match snapshot', () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+
+  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>));
+    });
+
+    it('should show the trial message', () => {
+      const upgrade = screen.queryByTestId('free-days-label');
+
+      expect(upgrade.textContent).toBe(`Free for ${mockedAuditTrialDays} days, then upgrade course for full access to Xpert features.`);
+    });
+
+    it('should show the trial button with the proper href to upgrade', () => {
+      const upgradeCta = screen.queryByTestId('upgrade-cta');
+
+      expect(upgradeCta).toBeInTheDocument();
+      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.message');
+    });
+
+    it('should match snapshot', () => {
+      expect(container).toMatchSnapshot();
+    });
+  });
+});