feat: show expiration modal on dashboard and search page (#1206)

Co-authored-by: Maham Akif <[email protected]>

src/components/course/routes/CourseAbout.jsx

@@ -13,7 +13,7 @@ import {
   useIsAssignmentsOnlyLearner,
   usePassLearnerCsodParams,
 } from '../../app/data';
-import ExpiredSubscriptionModal from '../ExpiredSubscriptionModal';
+import ExpiredSubscriptionModal from '../../expired-subscription-modal';
 
 const CourseAbout = () => {
   const { data: canOnlyViewHighlightSets } = useCanOnlyViewHighlights();

src/components/dashboard/DashboardPage.jsx

@@ -16,6 +16,7 @@ import {
   useSubscriptions,
 } from '../app/data';
 import BudgetExpiryNotification from '../budget-expiry-notification';
+import ExpiredSubscriptionModal from '../expired-subscription-modal';
 
 const DashboardPage = () => {
   const intl = useIntl();
@@ -95,6 +96,13 @@ const DashboardPage = () => {
         {tabs.map((tab) => React.cloneElement(tab, { key: tab.props.eventKey }))}
       </Tabs>
       <IntegrationWarningModal isEnabled={enterpriseCustomer.showIntegrationWarning} />
+      {/* ExpiredSubscriptionModal is specifically tailored for learners with an expired license and is
+      triggered when the learner has hasCustomLicenseExpirationMessaging enabled.
+      Ideally, the existing SubscriptionExpirationModal should be extended or repurposed to incorporate
+      this logic and support the custom messaging.
+      This is noted as a TO-DO, and a ticket will be created to address this enhancement.
+      Ticket: https://2u-internal.atlassian.net/browse/ENT-9512 */}
+      <ExpiredSubscriptionModal />
       {subscriptions.subscriptionPlan && subscriptions.showExpirationNotifications && <SubscriptionExpirationModal />}
     </Container>
   );

src/components/expired-subscription-modal/tests/ExpiredSubscriptionModal.test.jsx

@@ -0,0 +1,71 @@
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import ExpiredSubscriptionModal from '../index';
+import { useSubscriptions } from '../../app/data';
+import { renderWithRouter } from '../../../utils/tests';
+
+jest.mock('../../app/data', () => ({
+  ...jest.requireActual('../../app/data'),
+  useSubscriptions: jest.fn(),
+}));
+
+describe('<ExpiredSubscriptionModal />', () => {
+  beforeEach(() => {
+    useSubscriptions.mockReturnValue({
+      data: {
+        customerAgreement: {
+          hasCustomLicenseExpirationMessaging: false,
+          expiredSubscriptionModalMessaging: null,
+          urlForExpiredModal: null,
+          hyperLinkTextForExpiredModal: null,
+        },
+      },
+    });
+  });
+
+  test('does not renderwithrouter if `hasCustomLicenseExpirationMessaging` is false', () => {
+    const { container } = renderWithRouter(<ExpiredSubscriptionModal />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test('renderwithrouters modal with messaging when `hasCustomLicenseExpirationMessaging` is true', () => {
+    useSubscriptions.mockReturnValue({
+      data: {
+        customerAgreement: {
+          hasCustomLicenseExpirationMessaging: true,
+          expiredSubscriptionModalMessaging: 'Your subscription has expired.',
+          urlForExpiredModal: '/renew',
+          hyperLinkTextForExpiredModal: 'Click here to renew',
+        },
+      },
+    });
+
+    renderWithRouter(<ExpiredSubscriptionModal />);
+
+    expect(screen.getByText('Your subscription has expired.')).toBeInTheDocument();
+    expect(screen.getByText('Click here to renew')).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: 'Click here to renew' })).toHaveAttribute('href', '/renew');
+  });
+
+  test('does not renderwithrouter modal if no customer agreement data is present', () => {
+    useSubscriptions.mockReturnValue({ data: { customerAgreement: null } });
+    const { container } = renderWithRouter(<ExpiredSubscriptionModal />);
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  test('renderwithrouters close button in modal', () => {
+    useSubscriptions.mockReturnValue({
+      data: {
+        customerAgreement: {
+          hasCustomLicenseExpirationMessaging: true,
+          expiredSubscriptionModalMessaging: 'Subscription expired',
+          urlForExpiredModal: '/renew',
+          hyperLinkTextForExpiredModal: 'Renew',
+        },
+      },
+    });
+
+    renderWithRouter(<ExpiredSubscriptionModal />);
+    expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument();
+  });
+});

src/components/search/Search.jsx

@@ -32,6 +32,7 @@ import ContentTypeSearchResultsContainer from './ContentTypeSearchResultsContain
 import SearchVideo from './SearchVideo';
 import { hasActivatedAndCurrentSubscription } from './utils';
 import VideoBanner from '../microlearning/VideoBanner';
+import ExpiredSubscriptionModal from '../expired-subscription-modal';
 
 function useSearchPathwayModal() {
   const [isLearnerPathwayModalOpen, openLearnerPathwayModal, close] = useToggle(false);
@@ -113,6 +114,7 @@ const Search = () => {
 
   return (
     <>
+      <ExpiredSubscriptionModal />
       <Helmet title={PAGE_TITLE} />
       <InstantSearch
         indexName={config.ALGOLIA_INDEX_NAME}