Skip to content

Commit

Permalink
feat: display warning when plan is expiring
Browse files Browse the repository at this point in the history
  • Loading branch information
@zwidekalanga
zwidekalanga committed Apr 4, 2024
1 parent a19fe04 commit 733a6c5
Show file tree
Hide file tree
Showing 23 changed files with 764 additions and 155 deletions.
49 changes: 49 additions & 0 deletions src/components/Admin/Admin.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,13 @@ import thunk from 'redux-thunk';
import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
import { IntlProvider } from '@edx/frontend-platform/i18n';

import { screen, render } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import dayjs from 'dayjs';
import EnterpriseDataApiService from '../../data/services/EnterpriseDataApiService';
import Admin from './index';
import { CSV_CLICK_SEGMENT_EVENT_NAME } from '../DownloadCsvButton';
import { useEnterpriseBudgets } from '../EnterpriseSubsidiesContext/data/hooks';

jest.mock('@edx/frontend-enterprise-utils', () => {
const originalModule = jest.requireActual('@edx/frontend-enterprise-utils');
Expand All @@ -20,10 +24,20 @@ jest.mock('@edx/frontend-enterprise-utils', () => {
});
});

jest.mock('../EnterpriseSubsidiesContext/data/hooks', () => ({
...jest.requireActual('../EnterpriseSubsidiesContext/data/hooks'),
useEnterpriseBudgets: jest.fn().mockReturnValue({
data: [],
}),
}));

const mockStore = configureMockStore([thunk]);
const store = mockStore({
portalConfiguration: {
enterpriseId: 'test-enterprise-id',
enterpriseFeatures: {
topDownAssignmentRealTimeLcm: true,
},
},
table: {},
csv: {},
Expand Down Expand Up @@ -472,6 +486,7 @@ describe('<Admin />', () => {
});
});
});

describe('reset form button', () => {
it('should not be present if there is no query', () => {
const wrapper = mount((
Expand Down Expand Up @@ -551,4 +566,38 @@ describe('<Admin />', () => {
expect(link.first().props().to).toEqual(`${path}?${nonSearchQuery}`);
});
});

describe('renders expiry component when threshold is met', () => {
it('renders when date is within threshold', () => {
useEnterpriseBudgets.mockReturnValue(
{
data: [
{
end: dayjs().add(60, 'day').toString(),
},
],
},
);

render(<AdminWrapper {...baseProps} />);

expect(screen.getByTestId('expiry-notification-alert')).toBeInTheDocument();
});

it('does not render when date is not within threshold', () => {
useEnterpriseBudgets.mockReturnValue(
{
data: [
{
end: dayjs().add(160, 'day').toString(),
},
],
},
);

render(<AdminWrapper {...baseProps} />);

expect(screen.queryByTestId('expiry-notification-alert')).not.toBeInTheDocument();
});
});
});
69 changes: 57 additions & 12 deletions src/components/Admin/__snapshots__/Admin.test.jsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ exports[`<Admin /> renders correctly calls fetchDashboardAnalytics prop 1`] = `
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -190,6 +193,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -825,7 +831,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # cou
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -1059,6 +1065,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -1694,7 +1703,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -1928,6 +1937,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -2563,7 +2575,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders # of
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -2797,6 +2809,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -3432,7 +3447,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders colla
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -3666,6 +3681,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -4301,7 +4319,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders full
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -4535,6 +4553,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -5170,7 +5191,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -5404,6 +5425,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -6039,7 +6063,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders inact
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -6273,6 +6297,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -6908,7 +6935,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders learn
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -7142,6 +7169,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -7777,7 +7807,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders regis
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -8011,6 +8041,9 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -8646,7 +8679,7 @@ exports[`<Admin /> renders correctly with dashboard analytics data renders top a
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -8880,6 +8913,9 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -9564,7 +9600,7 @@ exports[`<Admin /> renders correctly with dashboard insights data renders dashbo
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down Expand Up @@ -9798,6 +9834,9 @@ exports[`<Admin /> renders correctly with error state 1`] = `
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -9952,6 +9991,9 @@ exports[`<Admin /> renders correctly with loading state 1`] = `
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -10167,6 +10209,9 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
/>
</div>
</div>
<div
className="mt-4"
/>
<div
className="container-fluid"
>
Expand Down Expand Up @@ -10802,7 +10847,7 @@ exports[`<Admin /> renders correctly with no dashboard insights data 1`] = `
className="col-12 col-md-6 col-xl-4 pt-1 pb-3"
>
Showing data as of
July 31, 2018
August 1, 2018
</div>
<div
className="col-12 col-md-6 col-xl-8"
Expand Down
21 changes: 12 additions & 9 deletions src/components/Admin/index.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@ import EmbeddedSubscription from './EmbeddedSubscription';
import { withLocation, withParams } from '../../hoc';
import AIAnalyticsSummary from './AIAnalyticsSummary';
import AIAnalyticsSummarySkeleton from './AIAnalyticsSummarySkeleton';
import BudgetExpiryAlertAndModal from '../BudgetExpiryAlertAndModal';

class Admin extends React.Component {
componentDidMount() {
Expand Down Expand Up @@ -308,6 +309,9 @@ class Admin extends React.Component {
<>
<Helmet title="Learner Progress Report" />
<Hero title="Learner Progress Report" />
<div className="mt-4">
<BudgetExpiryAlertAndModal />
</div>
<div className="container-fluid">
<div className="row mt-4">
<div className="col">
Expand Down Expand Up @@ -367,22 +371,21 @@ class Admin extends React.Component {
<div className="col-12 col-md-6 col-xl-4 pt-1 pb-3">
{lastUpdatedDate
&& (
<>
Showing data as of {formatTimestamp({ timestamp: lastUpdatedDate })}
</>
<>
Showing data as of {formatTimestamp({ timestamp: lastUpdatedDate })}
</>
)}

</div>
<div className="col-12 col-md-6 col-xl-8">
{this.renderDownloadButton()}
</div>
</div>
{this.displaySearchBar() && (
<AdminSearchForm
searchParams={searchParams}
searchEnrollmentsList={() => this.props.searchEnrollmentsList()}
tableData={this.getTableData() ? this.getTableData().results : []}
/>
<AdminSearchForm
searchParams={searchParams}
searchEnrollmentsList={() => this.props.searchEnrollmentsList()}
tableData={this.getTableData() ? this.getTableData().results : []}
/>
)}
</>
)}
Expand Down
6 changes: 6 additions & 0 deletions src/components/BudgetExpiryAlertAndModal/data/constants.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
export const SEEN_ENTERPRISE_EXPIRATION_MODAL_COOKIE_PREFIX = 'seen-enterprise-expiration-modal-';

export const PLAN_EXPIRY_VARIANTS = {
expired: 'Expired',
expiring: 'Expiring',
};
Loading

0 comments on commit 733a6c5

Please sign in to comment.