feat: implement subscription page using paragon components

openedx · Nov 2, 2021 · 154f9f2 · 154f9f2
1 parent 6ba6095
commit 154f9f2
Show file tree

Hide file tree

Showing 17 changed files with 456 additions and 153 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -53,7 +53,7 @@
     "react-loading-skeleton": "2.2.0",
     "react-markdown": "^6.0.0",
     "react-redux": "5.1.2",
-    "react-responsive": "6.1.2",
+    "react-responsive": "^8.2.0",
     "react-router": "5.2.0",
     "react-router-dom": "5.2.0",
     "react-textarea-autosize": "7.1.2",

diff --git a/src/components/BulkEnrollmentPage/index.jsx b/src/components/BulkEnrollmentPage/index.jsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Container } from '@edx/paragon';
 
 import { Switch, Route } from 'react-router-dom';
+import moment from 'moment';
 import Hero from '../Hero';
 import { MultipleSubscriptionsPage, SubscriptionData } from '../subscriptions';
 import CourseSearch from './CourseSearch';
@@ -25,7 +26,21 @@ function BulkEnrollmentPage({ enterpriseId }) {
                     redirectPage={ROUTE_NAMES.bulkEnrollment}
                     useCatalog
                     leadText="Choose a subscription to enroll your learners in courses"
-                    buttonText="Enroll learners"
+                    createActions={(subscription) => {
+                      const { params: { enterpriseSlug } } = routeProps.match;
+                      const isExpired = moment().isAfter(subscription.expirationDate);
+                      const actions = [];
+
+                      if (!isExpired) {
+                        actions.push({
+                          variant: 'primary',
+                          to: `/${enterpriseSlug}/admin/${ROUTE_NAMES.bulkEnrollment}/${subscription.uuid}`,
+                          buttonText: 'Enroll learners',
+                        });
+                      }
+
+                      return actions;
+                    }}
                   />
                 </Container>
               )}

diff --git a/src/components/BulkEnrollmentPage/index.test.jsx b/src/components/BulkEnrollmentPage/index.test.jsx
@@ -169,10 +169,20 @@ describe('<BulkEnrollmentPage />', () => {
     });
     it('renders the subscription picker', async () => {
       renderWithRouter(<BulkEnrollmentWrapper />, { route: `/${testSlug}/admin/${ROUTE_NAMES.bulkEnrollment}` });
-      expect(await screen.findByText('Cohorts')).toBeInTheDocument();
+      expect(await screen.findByText('Plans')).toBeInTheDocument();
       expect(await screen.findByText(sub1.title)).toBeInTheDocument();
       expect(await screen.findByText(sub2.title)).toBeInTheDocument();
     });
+    it('renders enroll learner button if the plan is not expired', async () => {
+      renderWithRouter(<BulkEnrollmentWrapper />, { route: `/${testSlug}/admin/${ROUTE_NAMES.bulkEnrollment}` });
+      expect((await screen.findAllByText('Enroll learners')).length).toEqual(1);
+    });
+    it('does not render enroll learner button if the plan is expired', async () => {
+      LicenseManagerApiService.fetchSubscriptions.mockImplementation(() => singleSubscription);
+
+      renderWithRouter(<BulkEnrollmentWrapper />, { route: `/${testSlug}/admin/${ROUTE_NAMES.bulkEnrollment}` });
+      expect((await screen.queryAllByText('Enroll learners')).length).toEqual(0);
+    });
     it('renders the course search page', async () => {
       renderWithRouter(<BulkEnrollmentWrapper />, { route: `/${testSlug}/admin/${ROUTE_NAMES.bulkEnrollment}/${sub1.uuid}` });
       await act(() => subscriptions);

diff --git a/src/components/subscriptions/MultipleSubscriptionPicker.jsx b/src/components/subscriptions/MultipleSubscriptionPicker.jsx
@@ -1,57 +1,46 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  CardGrid,
   Row,
   Col,
 } from '@edx/paragon';
 
 import SubscriptionCard from './SubscriptionCard';
 import { DEFAULT_LEAD_TEXT } from './data/constants';
-import { ROUTE_NAMES } from '../EnterpriseApp/constants';
 
 const MultipleSubscriptionsPicker = ({
-  enterpriseSlug, leadText, buttonText, redirectPage, subscriptions,
+  leadText, subscriptions, createActions,
 }) => (
   <>
     <Row>
-      <Col>
-        <h2>Cohorts</h2>
+      <Col xs="12">
+        <h2>Plans</h2>
         <p className="lead">
           {leadText}
         </p>
       </Col>
+      <Col lg="10">
+        {subscriptions.map(subscription => (
+          <SubscriptionCard
+            key={subscription.uuid}
+            subscription={subscription}
+            createActions={createActions}
+          />
+        ))}
+      </Col>
     </Row>
-    <CardGrid>
-      {subscriptions.map(subscription => (
-        <SubscriptionCard
-          key={subscription?.uuid}
-          uuid={subscription?.uuid}
-          title={subscription?.title}
-          enterpriseSlug={enterpriseSlug}
-          startDate={subscription?.startDate}
-          expirationDate={subscription?.expirationDate}
-          licenses={subscription?.licenses || {}}
-          redirectPage={redirectPage}
-          buttonText={buttonText}
-        />
-      ))}
-    </CardGrid>
   </>
 );
 
 MultipleSubscriptionsPicker.defaultProps = {
-  redirectPage: ROUTE_NAMES.subscriptionManagement,
   leadText: DEFAULT_LEAD_TEXT,
-  buttonText: null,
+  createActions: null,
 };
 
 MultipleSubscriptionsPicker.propTypes = {
-  buttonText: PropTypes.string,
-  enterpriseSlug: PropTypes.string.isRequired,
   leadText: PropTypes.string,
-  redirectPage: PropTypes.string,
   subscriptions: PropTypes.arrayOf(PropTypes.shape()).isRequired,
+  createActions: PropTypes.func,
 };
 
 export default MultipleSubscriptionsPicker;
diff --git a/src/components/subscriptions/MultipleSubscriptionsPage.jsx b/src/components/subscriptions/MultipleSubscriptionsPage.jsx
@@ -6,11 +6,14 @@ import { SubscriptionContext } from './SubscriptionData';
 
 import SubscriptionExpiration from './expiration/SubscriptionExpiration';
 import MultipleSubscriptionsPicker from './MultipleSubscriptionPicker';
-import { DEFAULT_LEAD_TEXT } from './data/constants';
+import {
+  DEFAULT_LEAD_TEXT,
+} from './data/constants';
+import { sortSubscriptionsByStatus } from './data/utils';
 import { ROUTE_NAMES } from '../EnterpriseApp/constants';
 
 const MultipleSubscriptionsPage = ({
-  match, redirectPage, leadText, buttonText,
+  match, redirectPage, leadText, createActions,
 }) => {
   const { params: { enterpriseSlug } } = match;
   const { data } = useContext(SubscriptionContext);
@@ -26,15 +29,17 @@ const MultipleSubscriptionsPage = ({
     );
   }
 
+  const sortedSubscriptions = sortSubscriptionsByStatus(subscriptions);
+
   return (
     <>
       <SubscriptionExpiration />
       <MultipleSubscriptionsPicker
         enterpriseSlug={enterpriseSlug}
         leadText={leadText}
-        buttonText={buttonText}
-        subscriptions={subscriptions}
+        subscriptions={sortedSubscriptions}
         redirectPage={redirectPage}
+        createActions={createActions}
       />
     </>
   );
@@ -43,7 +48,7 @@ const MultipleSubscriptionsPage = ({
 MultipleSubscriptionsPage.defaultProps = {
   redirectPage: ROUTE_NAMES.subscriptionManagement,
   leadText: DEFAULT_LEAD_TEXT,
-  buttonText: null,
+  createActions: null,
 };
 
 MultipleSubscriptionsPage.propTypes = {
@@ -54,7 +59,7 @@ MultipleSubscriptionsPage.propTypes = {
     }).isRequired,
   }).isRequired,
   leadText: PropTypes.string,
-  buttonText: PropTypes.string,
+  createActions: PropTypes.func,
 };
 
 export default MultipleSubscriptionsPage;