diff --git a/src/components/course/CoursePage.jsx b/src/components/course/CoursePage.jsx
index 488fe1a14..19346c8b9 100644
--- a/src/components/course/CoursePage.jsx
+++ b/src/components/course/CoursePage.jsx
@@ -2,10 +2,12 @@ import React from 'react';
import Course from './Course';
import AuthenticatedUserSubsidyPage from '../app/AuthenticatedUserSubsidyPage';
+import OffersAlert from '../enterprise-user-subsidy/OffersAlert';
export default function CoursePage() {
return (
+
);
diff --git a/src/components/enterprise-user-subsidy/OffersAlert.jsx b/src/components/enterprise-user-subsidy/OffersAlert.jsx
index ce496a06a..137d47c63 100644
--- a/src/components/enterprise-user-subsidy/OffersAlert.jsx
+++ b/src/components/enterprise-user-subsidy/OffersAlert.jsx
@@ -1,14 +1,15 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext } from 'react';
import { Alert, Container } from '@edx/paragon';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
+import { UserSubsidyContext } from '.';
-export const getOffersText = (number) => `You have ${number} course redemption voucher${number > 1 ? 's' : ''} left to use.`;
+export const getOffersText = (number) => `You have ${number} enrollment codes${number > 1 ? 's' : ''} left to use.`;
-const OffersAlert = ({ offers }) => {
- if (!offers.offersCount) {
+const OffersAlert = () => {
+ const { offers } = useContext(UserSubsidyContext);
+ if (!offers?.offersCount) {
return null;
}
return (
@@ -21,10 +22,4 @@ const OffersAlert = ({ offers }) => {
);
};
-OffersAlert.propTypes = {
- offers: PropTypes.shape({
- offersCount: PropTypes.number.isRequired,
- }).isRequired,
-};
-
export default OffersAlert;
diff --git a/src/components/enterprise-user-subsidy/UserSubsidyAlerts.jsx b/src/components/enterprise-user-subsidy/UserSubsidyAlerts.jsx
index 53c5719da..fd0354258 100644
--- a/src/components/enterprise-user-subsidy/UserSubsidyAlerts.jsx
+++ b/src/components/enterprise-user-subsidy/UserSubsidyAlerts.jsx
@@ -1,7 +1,6 @@
import React, { useContext } from 'react';
import { AppContext } from '@edx/frontend-platform/react';
import { UserSubsidyContext } from '.';
-import OffersAlert from './OffersAlert';
import SubscriptionSubsidy from './SubscriptionSubsidy';
const UserSubsidyAlerts = () => {
@@ -10,7 +9,6 @@ const UserSubsidyAlerts = () => {
return (
<>
- {offers && }
{/**
* SubscriptionSubsidy takes care of redirecting the user to `/${enterpriseConfig.slug}`
* if their organization has a subscription plan but they don't have appropriate access
diff --git a/src/components/enterprise-user-subsidy/tests/OffersAlert.test.jsx b/src/components/enterprise-user-subsidy/tests/OffersAlert.test.jsx
index b8578c309..b6589ea9b 100644
--- a/src/components/enterprise-user-subsidy/tests/OffersAlert.test.jsx
+++ b/src/components/enterprise-user-subsidy/tests/OffersAlert.test.jsx
@@ -3,20 +3,39 @@ import { screen, render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import OffersAlert, { getOffersText } from '../OffersAlert';
+import { UserSubsidyContext } from '..';
-describe('', () => {
- const offers = {
- loading: false,
- offers: [],
- offersCount: 3,
- };
+/* eslint-disable react/prop-types */
+const OffersAlertWithContext = ({
+ subsidyContext = {},
+}) => (
+
+
+
+);
+/* eslint-enable react/prop-types */
+describe('', () => {
it('renders an alert when loading is complete and there are offers', () => {
- render();
- expect(screen.queryByText(getOffersText(offers.offersCount))).toBeInTheDocument();
+ const subsidyContext = {
+ offers: {
+ loading: false,
+ offers: [],
+ offersCount: 3,
+ },
+ };
+ render();
+ expect(screen.queryByText(getOffersText(subsidyContext.offers.offersCount))).toBeInTheDocument();
});
it('does not render an alert if there are no offers', () => {
- render();
- expect(screen.queryByText(getOffersText(offers.offersCount))).not.toBeInTheDocument();
+ const subsidyContext = {
+ offers: {
+ loading: false,
+ offers: [],
+ offersCount: 0,
+ },
+ };
+ render();
+ expect(screen.queryByText(getOffersText(subsidyContext.offers.offersCount))).not.toBeInTheDocument();
});
});
diff --git a/src/components/search/SearchPage.jsx b/src/components/search/SearchPage.jsx
index 14c88b98b..0e615dba5 100644
--- a/src/components/search/SearchPage.jsx
+++ b/src/components/search/SearchPage.jsx
@@ -3,9 +3,11 @@ import React from 'react';
import { SearchData } from '@edx/frontend-enterprise';
import Search from './Search';
import AuthenticatedUserSubsidyPage from '../app/AuthenticatedUserSubsidyPage';
+import OffersAlert from '../enterprise-user-subsidy/OffersAlert';
const SearchPage = () => (
+