From 5b51d525fa6ee9edcda69b972a090d457a8c8a8e Mon Sep 17 00:00:00 2001
From: Binod Pant <bpant@edx.org>
Date: Wed, 10 Nov 2021 21:43:15 -0500
Subject: [PATCH] feat: Bulk enrollment now in modal dialog launched from
 license manage page (#641)

* feat: Show user count in Enroll button

ENT-5000

* feat: enroll button is disabled if revoked users are present

* feat: Add dialog if invalid enroll case, but still allow enrolling.

dialog shows if at least one revoked user is present. also enroll button is now shown in main table, enroll button also in dialog

* feat: enroll button does not enable if no enrollable learners

* feat: text change in dialog to be fyi-only

* feat: Cleanup code to show/hide modal and bulk enroll dialog

* refactor: new components to represent bulk enrollment warning, and button

* feat: dialog is now its own component

* feat: optimize logic a bit

* feat: wrap all of bulk enrollment flow into the modal

* feat: remove stepper, and introduce steps in the dialog itself

* feat: table actions clear selection (#640)

* feat: implement subscription page using paragon components

* fix: re-add segment events for legacy table pagination/sort and csv download (#644)

* fix: re-add segment events for legacy table pagination/sort and csv download

* docs: add info to readme about start:with-theme

* fix: needed to mock frontend-platform/analytics

* fix: assert on event dispatch for csv button clicks

* feat: add popover to course search title (#646)

* fix: hide table selection if subscription is expired (#647)

* fix: hide table selection if subscription is expired

* fix: use .find instead of .filter

* refactor: new components to represent bulk enrollment warning, and button

* feat: dialog is now its own component

* feat: restore lost changes in bulk actions file

* feat: Bring stepper back, using fullscreen modal

* style: lint

* feat: Use modal dialog with min height, update stepper component

* fix: re-introduce lost SCSS changes in sub management card

* test: fix bulk actions tests, small other fixes

* test: add tests for bulk enroll actions, one more to fix

* test: fix submit test

* test: test fix for course search results

* feat: invoke clear all after bulk enroll complets

* test: test data update

* test: test fix for addCoursesStep

* test: AddcoursesStep is mocked for now

* test: don't need the searchcontext mock anymore

Co-authored-by: Manny <manny-m@users.noreply.github.com>
Co-authored-by: Long Lin <lin.longsheng01@gmail.com>
Co-authored-by: Adam Stankiewicz <agstanki@gmail.com>
Co-authored-by: Kira Miller <31229189+kiram15@users.noreply.github.com>
---
 .../BulkEnrollmentPage/BulkEnrollButton.jsx   |  36 +++
 .../BulkEnrollmentPage/BulkEnrollDialog.jsx   |  30 +++
 .../BulkEnrollmentPage/BulkEnrollment.scss    |  28 +--
 .../BulkEnrollmentContext.jsx                 |  17 +-
 .../BulkEnrollmentWarningModal.jsx            |  50 +++++
 .../BulkEnrollmentPage/CourseSearch.jsx       |  71 ------
 .../BulkEnrollmentPage/CourseSearch.test.jsx  |  44 ----
 src/components/BulkEnrollmentPage/index.jsx   |  69 ------
 .../BulkEnrollmentPage/index.test.jsx         | 211 ------------------
 .../stepper/AddCoursesStep.jsx                |  59 +++--
 .../stepper/AddCoursesStep.test.jsx           |  24 +-
 .../stepper/AddLearnersStep.jsx               | 165 --------------
 .../stepper/AddLearnersStep.test.jsx          | 123 ----------
 .../stepper/BulkEnrollmentStepper.jsx         | 131 ++++++-----
 .../stepper/BulkEnrollmentStepper.test.jsx    | 140 ------------
 .../stepper/BulkEnrollmentSubmit.jsx          |   6 +-
 .../stepper/BulkEnrollmentSubmit.test.jsx     |   6 +-
 .../BulkEnrollmentPage/stepper/ReviewStep.jsx |  13 +-
 .../BulkEnrollmentPage/stepper/constants.jsx  |   1 -
 src/components/EnterpriseApp/index.jsx        |   9 -
 .../LicenseManagementTableBulkActions.jsx     |  78 ++++++-
 .../licenses/LicenseManagementTable/index.jsx |   9 +-
 ...LicenseManagementTableBulkActions.test.jsx |  73 ++++--
 .../subscriptions/styles/_LicenseActions.scss |   9 -
 .../styles/_SubscriptionManagementPage.scss   |  53 -----
 .../subscriptions/styles/index.scss           |  68 ++++++
 src/index.scss                                |   5 +-
 27 files changed, 457 insertions(+), 1071 deletions(-)
 create mode 100644 src/components/BulkEnrollmentPage/BulkEnrollButton.jsx
 create mode 100644 src/components/BulkEnrollmentPage/BulkEnrollDialog.jsx
 create mode 100644 src/components/BulkEnrollmentPage/BulkEnrollmentWarningModal.jsx
 delete mode 100644 src/components/BulkEnrollmentPage/CourseSearch.jsx
 delete mode 100644 src/components/BulkEnrollmentPage/CourseSearch.test.jsx
 delete mode 100644 src/components/BulkEnrollmentPage/index.jsx
 delete mode 100644 src/components/BulkEnrollmentPage/index.test.jsx
 delete mode 100644 src/components/BulkEnrollmentPage/stepper/AddLearnersStep.jsx
 delete mode 100644 src/components/BulkEnrollmentPage/stepper/AddLearnersStep.test.jsx
 delete mode 100644 src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.test.jsx
 delete mode 100644 src/components/subscriptions/styles/_LicenseActions.scss
 delete mode 100644 src/components/subscriptions/styles/_SubscriptionManagementPage.scss
 create mode 100644 src/components/subscriptions/styles/index.scss

diff --git a/src/components/BulkEnrollmentPage/BulkEnrollButton.jsx b/src/components/BulkEnrollmentPage/BulkEnrollButton.jsx
new file mode 100644
index 0000000000..8af97d7a29
--- /dev/null
+++ b/src/components/BulkEnrollmentPage/BulkEnrollButton.jsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { Button } from '@edx/paragon';
+import { BookOpen } from '@edx/paragon/icons';
+
+/**
+ * Bulk action button, meant to be used in License management page to initiate Bulk Enrollment Dialog
+ * @param {object} args Arguments
+ * @param {array<string>} args.learners set of learners being enrolled
+ * @param {Function} args.handleEnrollment function to invoke to enroll
+ * @param {string} args.buttonType type (to distinguish buttons in the dom)
+ */
+const BulkEnrollButton = ({ learners, handleEnrollment, buttonType }) => (
+  <Button
+    variant="primary"
+    onClick={handleEnrollment}
+    iconBefore={BookOpen}
+    disabled={learners.length < 1}
+    data-testid={buttonType}
+  >
+    Enroll ({learners.length })
+  </Button>
+);
+
+BulkEnrollButton.defaultProps = {
+  buttonType: 'BULK_ENROLL_DEFAULT',
+};
+
+BulkEnrollButton.propTypes = {
+  handleEnrollment: PropTypes.func.isRequired,
+  learners: PropTypes.arrayOf(PropTypes.string).isRequired,
+  buttonType: PropTypes.string,
+};
+
+export default BulkEnrollButton;
diff --git a/src/components/BulkEnrollmentPage/BulkEnrollDialog.jsx b/src/components/BulkEnrollmentPage/BulkEnrollDialog.jsx
new file mode 100644
index 0000000000..6625049055
--- /dev/null
+++ b/src/components/BulkEnrollmentPage/BulkEnrollDialog.jsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import PropTypes from 'prop-types';
+
+import BulkEnrollmentStepper from './stepper/BulkEnrollmentStepper';
+import BulkEnrollContextProvider from './BulkEnrollmentContext';
+
+/**
+* @param {object} props Props
+* @param {array<string>} props.learners learner email list to enroll
+*/
+const BulkEnrollDialog = (props) => {
+  const { learners } = props;
+  return (
+    <BulkEnrollContextProvider initialEmailsList={learners}>
+      <BulkEnrollmentStepper {...props} />
+    </BulkEnrollContextProvider>
+  );
+};
+
+const mapStateToProps = state => ({
+  enterpriseSlug: state.portalConfiguration.enterpriseSlug,
+  enterpriseId: state.portalConfiguration.enterpriseId,
+});
+
+BulkEnrollDialog.propTypes = {
+  learners: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+
+export default connect(mapStateToProps)(BulkEnrollDialog);
diff --git a/src/components/BulkEnrollmentPage/BulkEnrollment.scss b/src/components/BulkEnrollmentPage/BulkEnrollment.scss
index cefac01a1e..f4d686eefa 100644
--- a/src/components/BulkEnrollmentPage/BulkEnrollment.scss
+++ b/src/components/BulkEnrollmentPage/BulkEnrollment.scss
@@ -22,7 +22,7 @@
 
   .card-body {
     @extend .py-2;
-    @extend .px-3
+    @extend .px-3;
   }
 
   .list-item {
@@ -62,28 +62,6 @@
   }
 }
 
-.popover {
-  max-width: 400px;
+.bulk-enroll-modal {
+  min-height: 83vh;
 }
-
-.popover .popover-header {
-  border-bottom: 2px solid $gray-100;
-  font-weight: 700;
-  font-size: 15px;
-  padding-left: 0;
-  margin: 0 16px 0 16px;
-}
-
-.popover-body {
-  padding: 8px 16px 16px 16px;
-}
-
-.popover-body p {
-  margin: 0 0 8px 0;
-}
-
-.popover-body hr {
-  width: 30%;
-  border-top: 2px solid $gray-100;
-  margin: 8px 0 8px 0;
-}
\ No newline at end of file
diff --git a/src/components/BulkEnrollmentPage/BulkEnrollmentContext.jsx b/src/components/BulkEnrollmentPage/BulkEnrollmentContext.jsx
index 59d8d0695b..6556cb638d 100644
--- a/src/components/BulkEnrollmentPage/BulkEnrollmentContext.jsx
+++ b/src/components/BulkEnrollmentPage/BulkEnrollmentContext.jsx
@@ -5,9 +5,17 @@ import selectedRowsReducer from './data/reducer';
 
 export const BulkEnrollContext = createContext({});
 
-const BulkEnrollContextProvider = ({ children }) => {
+const BulkEnrollContextProvider = ({ children, initialEmailsList }) => {
   const [selectedCourses, coursesDispatch] = useReducer(selectedRowsReducer, []);
-  const [selectedEmails, emailsDispatch] = useReducer(selectedRowsReducer, []);
+  // this format is to make this consistent with the format used by ReviewStep components
+  // similar to DataTable row objects, but not exactly
+  const formattedEmailsList = initialEmailsList.map(email => ({
+    id: email,
+    values: {
+      userEmail: email,
+    },
+  }));
+  const [selectedEmails, emailsDispatch] = useReducer(selectedRowsReducer, formattedEmailsList);
   const [selectedSubscription, setSelectedSubscription] = useState({});
 
   const value = {
@@ -19,8 +27,13 @@ const BulkEnrollContextProvider = ({ children }) => {
   return <BulkEnrollContext.Provider value={value}>{children}</BulkEnrollContext.Provider>;
 };
 
+BulkEnrollContextProvider.defaultProps = {
+  initialEmailsList: [],
+};
+
 BulkEnrollContextProvider.propTypes = {
   children: PropTypes.node.isRequired,
+  initialEmailsList: PropTypes.arrayOf(PropTypes.string),
 };
 
 export default BulkEnrollContextProvider;
diff --git a/src/components/BulkEnrollmentPage/BulkEnrollmentWarningModal.jsx b/src/components/BulkEnrollmentPage/BulkEnrollmentWarningModal.jsx
new file mode 100644
index 0000000000..bce6697174
--- /dev/null
+++ b/src/components/BulkEnrollmentPage/BulkEnrollmentWarningModal.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+
+import {
+  ActionRow, AlertModal, Button, Icon,
+} from '@edx/paragon';
+import { Error } from '@edx/paragon/icons';
+
+import BulkEnrollButton from './BulkEnrollButton';
+
+const BulkEnrollWarningModal = ({
+  learners, isDialogOpen, onClose, onEnroll,
+}) => (
+  <AlertModal
+    title={(
+      <>
+        <Icon className={classNames('enroll-header', 'mr-1')} src={Error} />Revoked Learners Selected
+      </>
+      )}
+    isOpen={isDialogOpen}
+    footerNode={(
+      <ActionRow>
+        <Button variant="link" onClick={onClose}>Close</Button>
+        <BulkEnrollButton
+          learners={learners}
+          handleEnrollment={onEnroll}
+          buttonType="ENROLL_BTN_IN_WARNING_MODAL"
+        />
+      </ActionRow>
+    )}
+  >
+    Any learners with revoked licenses are not included. Click &quot;Enroll&quot; to enroll
+    active and pending learners only
+  </AlertModal>
+);
+
+BulkEnrollWarningModal.defaultProps = {
+  learners: [],
+  isDialogOpen: false,
+};
+
+BulkEnrollWarningModal.propTypes = {
+  isDialogOpen: PropTypes.bool,
+  learners: PropTypes.arrayOf(PropTypes.shape({})),
+  onEnroll: PropTypes.func.isRequired,
+  onClose: PropTypes.func.isRequired,
+};
+
+export default BulkEnrollWarningModal;
diff --git a/src/components/BulkEnrollmentPage/CourseSearch.jsx b/src/components/BulkEnrollmentPage/CourseSearch.jsx
deleted file mode 100644
index ee005310a1..0000000000
--- a/src/components/BulkEnrollmentPage/CourseSearch.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import React from 'react';
-
-import { connect } from 'react-redux';
-import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
-import { Redirect } from 'react-router';
-
-import Skeleton from 'react-loading-skeleton';
-import { useSubscriptionFromParams } from '../subscriptions/data/contextHooks';
-import { ROUTE_NAMES } from '../EnterpriseApp/constants';
-import BulkEnrollContextProvider from './BulkEnrollmentContext';
-import BulkEnrollmentStepper from './stepper/BulkEnrollmentStepper';
-
-export const NO_DATA_MESSAGE = 'There are no results';
-
-export const BaseCourseSearch = ({
-  enterpriseId, enterpriseSlug, enterpriseName, match,
-}) => {
-  const PAGE_TITLE = `Search courses - ${enterpriseName}`;
-  const [subscription, isLoadingSubscription] = useSubscriptionFromParams({ match });
-  if (!subscription && !isLoadingSubscription) {
-    return (
-      <Redirect to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.bulkEnrollment}/`} />
-    );
-  }
-  if (isLoadingSubscription) {
-    return (
-      <div data-testid="subscription-skelly">
-        <div className="sr-only">Loading...</div>
-        <Skeleton height={175} />
-        <Skeleton className="mt-3" height={50} count={25} />
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <Helmet title={PAGE_TITLE} />
-      <BulkEnrollContextProvider>
-        <BulkEnrollmentStepper
-          subscription={subscription}
-          enterpriseId={enterpriseId}
-          enterpriseSlug={enterpriseSlug}
-        />
-      </BulkEnrollContextProvider>
-    </>
-  );
-};
-
-BaseCourseSearch.defaultProps = {
-  enterpriseId: '',
-  enterpriseSlug: '',
-  enterpriseName: '',
-};
-
-BaseCourseSearch.propTypes = {
-  // from redux store
-  enterpriseId: PropTypes.string,
-  enterpriseSlug: PropTypes.string,
-  enterpriseName: PropTypes.string,
-  // from react-router
-  match: PropTypes.shape({}).isRequired,
-};
-
-const mapStateToProps = state => ({
-  enterpriseId: state.portalConfiguration.enterpriseId,
-  enterpriseSlug: state.portalConfiguration.enterpriseSlug,
-  enterpriseName: state.portalConfiguration.enterpriseName,
-});
-
-export default connect(mapStateToProps)(BaseCourseSearch);
diff --git a/src/components/BulkEnrollmentPage/CourseSearch.test.jsx b/src/components/BulkEnrollmentPage/CourseSearch.test.jsx
deleted file mode 100644
index 44fc311deb..0000000000
--- a/src/components/BulkEnrollmentPage/CourseSearch.test.jsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-
-import { useSubscriptionFromParams } from '../subscriptions/data/contextHooks';
-import { BaseCourseSearch } from './CourseSearch';
-import { renderWithRouter } from '../test/testUtils';
-import { ROUTE_NAMES } from '../EnterpriseApp/constants';
-import { ADD_COURSES_TITLE } from './stepper/constants';
-import '../../../__mocks__/react-instantsearch-dom';
-
-jest.mock('../subscriptions/data/contextHooks', () => ({
-  useSubscriptionFromParams: jest.fn(),
-}));
-
-const defaultProps = {
-  enterpriseId: 'foo',
-  enterpriseSlug: 'fancyCompany',
-  enterpriseName: 'So Fancy',
-  match: {},
-};
-
-const fakeSubscription = {
-  enterpriseCatalogUuid: 'bestCatalog',
-  uuid: 'fancy-uuid',
-};
-
-describe('<BaseCourseSearch />', () => {
-  it('renders bulk enrollment stepper', () => {
-    useSubscriptionFromParams.mockReturnValue([fakeSubscription, false]);
-    renderWithRouter(<BaseCourseSearch {...defaultProps} />);
-    expect(screen.getAllByText(ADD_COURSES_TITLE)).toHaveLength(2);
-  });
-  it('shows a loading screen ', () => {
-    useSubscriptionFromParams.mockReturnValue([null, true]);
-    renderWithRouter(<BaseCourseSearch {...defaultProps} />);
-    expect(screen.getByTestId('subscription-skelly')).toBeInTheDocument();
-  });
-  it('redirects to the subscription choosing page if there is no subscription', () => {
-    useSubscriptionFromParams.mockReturnValue([null, false]);
-    const { history } = renderWithRouter(<BaseCourseSearch {...defaultProps} />);
-    expect(history.location.pathname).toEqual(`/${defaultProps.enterpriseSlug}/admin/${ROUTE_NAMES.bulkEnrollment}/`);
-  });
-});
diff --git a/src/components/BulkEnrollmentPage/index.jsx b/src/components/BulkEnrollmentPage/index.jsx
deleted file mode 100644
index 42791346d6..0000000000
--- a/src/components/BulkEnrollmentPage/index.jsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from 'react';
-import { connect } from 'react-redux';
-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';
-import { ROUTE_NAMES } from '../EnterpriseApp/constants';
-
-function BulkEnrollmentPage({ enterpriseId }) {
-  return (
-    <div className="container-fluid bulk-enrollment">
-      <Hero title="Subscription Enrollment" />
-      <SubscriptionData enterpriseId={enterpriseId}>
-        <main role="main" className="manage-subscription">
-          <Switch>
-            <Route
-              path={`/:enterpriseSlug/admin/${ROUTE_NAMES.bulkEnrollment}`}
-              component={routeProps => (
-                <Container className="py-3" fluid>
-                  <MultipleSubscriptionsPage
-                    {...routeProps}
-                    redirectPage={ROUTE_NAMES.bulkEnrollment}
-                    useCatalog
-                    leadText="Choose a subscription to enroll your learners in courses"
-                    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>
-              )}
-              exact
-            />
-            <Route
-              path={`/:enterpriseSlug/admin/${ROUTE_NAMES.bulkEnrollment}/:subscriptionUUID`}
-              component={CourseSearch}
-              exact
-            />
-          </Switch>
-        </main>
-      </SubscriptionData>
-    </div>
-  );
-}
-
-BulkEnrollmentPage.propTypes = {
-  enterpriseId: PropTypes.string.isRequired,
-};
-
-const mapStateToProps = state => ({
-  enterpriseId: state.portalConfiguration.enterpriseId,
-});
-
-export default connect(mapStateToProps)(BulkEnrollmentPage);
diff --git a/src/components/BulkEnrollmentPage/index.test.jsx b/src/components/BulkEnrollmentPage/index.test.jsx
deleted file mode 100644
index a53a17432d..0000000000
--- a/src/components/BulkEnrollmentPage/index.test.jsx
+++ /dev/null
@@ -1,211 +0,0 @@
-import React from 'react';
-import { act, screen } from '@testing-library/react';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { Provider } from 'react-redux';
-import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-
-import BulkEnrollmentPage from './index';
-
-import { SUBSCRIPTION_DAYS_REMAINING_MODERATE } from '../subscriptions/data/constants';
-import LicenseManagerApiService from '../../data/services/LicenseManagerAPIService';
-import { ROUTE_NAMES } from '../EnterpriseApp/constants';
-import { ADD_COURSES_TITLE } from './stepper/constants';
-import { renderWithRouter } from '../test/testUtils';
-import '../../../__mocks__/react-instantsearch-dom';
-
-jest.mock('../../data/services/LicenseManagerAPIService', () => ({
-  __esModule: true,
-  default: {
-    fetchSubscriptions: jest.fn(),
-    fetchSubscriptionUsersOverview: jest.fn(),
-    fetchSubscriptionUsers: jest.fn(),
-    fetchCustomerAgreementData: jest.fn(),
-  },
-}));
-
-const testSlug = 'horsesRus';
-
-const sub1 = {
-  uuid: 'foo',
-  title: 'horse subscription',
-  enterpriseSlug: testSlug,
-  startDate: '01-01-2021',
-  expirationDate: '04-21-2021',
-  daysUntilExpiration: 0,
-  licenses: {
-    allocated: 5,
-    total: 20,
-  },
-  enterpriseCatalogUuid: 'blarghl2',
-};
-
-// force the expiration modal to not expire by default to avoid
-// needing to close it in unrelated tests
-const numDaysUntilExpiration = SUBSCRIPTION_DAYS_REMAINING_MODERATE + 1;
-const futureExpirationDate = new Date();
-futureExpirationDate.setDate(futureExpirationDate.getDate() + numDaysUntilExpiration);
-const sub2 = {
-  uuid: 'bearz',
-  title: 'bear subscription',
-  enterpriseSlug: testSlug,
-  startDate: '02-01-2021',
-  expirationDate: futureExpirationDate.toLocaleString(),
-  licenses: {
-    allocated: 15,
-    total: 40,
-  },
-  enterpriseCatalogUuid: 'blarghl',
-  daysUntilExpiration: numDaysUntilExpiration,
-};
-
-const mockSubscriptionCount = Promise.resolve({
-  data: [
-    { status: 'unassigned', count: 0 },
-    { status: 'assigned', count: 0 },
-    { status: 'activated', count: 2 }],
-});
-const mockFetchSubscriptionUsers = Promise.resolve({
-  count: 0,
-  next: null,
-  previous: null,
-  numPages: 1,
-  results: [],
-});
-const subscriptions = Promise.resolve({
-  data: {
-    results: [sub1, sub2],
-    errors: null,
-    setErrors: jest.fn(),
-    forceRefresh: jest.fn(),
-    loading: false,
-    count: 2,
-  },
-});
-
-const mockCustomerAgreementDataMultiSubscriptions = Promise.resolve({
-  data: {
-
-    results: [{
-      uuid: '8ed1e80c-45fd-4b97-927a-5368b6aba6ea',
-      enterpriseId: 'foo',
-      enterpriseSlug: testSlug,
-      defaultEnterpriseCatalogUuid: 'blarghl',
-      subscriptions: [sub1, sub2],
-      disableExpirationNotifications: false,
-    }],
-    errors: null,
-    setErrors: jest.fn(),
-    forceRefresh: jest.fn(),
-    loading: false,
-    count: 1,
-  },
-});
-
-const mockCustomerAgreementDataSingleSubscription = Promise.resolve({
-  data: {
-
-    results: [{
-      uuid: '8ed1e80c-45fd-4b97-927a-5368b6aba6ea',
-      enterpriseId: 'foo',
-      enterpriseSlug: testSlug,
-      defaultEnterpriseCatalogUuid: 'blarghl',
-      subscriptions: [sub1],
-      disableExpirationNotifications: false,
-    }],
-    errors: null,
-    setErrors: jest.fn(),
-    forceRefresh: jest.fn(),
-    loading: false,
-    count: 1,
-  },
-});
-
-const singleSubscription = Promise.resolve({
-  data: {
-    results: [sub1],
-    errors: null,
-    setErrors: jest.fn(),
-    forceRefresh: jest.fn(),
-    loading: false,
-    count: 1,
-  },
-});
-const mockSingleSubscriptionCount = Promise.resolve({
-  data: [
-    { status: 'unassigned', count: 0 },
-    { status: 'assigned', count: 0 },
-    { status: 'activated', count: 1 }],
-});
-
-const fakeStore = {
-  portalConfiguration: {
-    enterpriseId: 'foo',
-    enableCodeManagementScreen: false,
-    enableSubscriptionManagementScreen: true,
-  },
-};
-const mockStore = configureMockStore([thunk]);
-const BulkEnrollmentWrapper = () => (
-  <Provider store={mockStore(fakeStore)}>
-    <BulkEnrollmentPage />
-  </Provider>
-);
-
-LicenseManagerApiService.fetchCustomerAgreementData.mockImplementation(
-  () => mockCustomerAgreementDataMultiSubscriptions,
-);
-LicenseManagerApiService.fetchSubscriptions.mockImplementation(() => subscriptions);
-LicenseManagerApiService.fetchSubscriptionUsersOverview.mockImplementation(() => mockSubscriptionCount);
-LicenseManagerApiService.fetchSubscriptionUsers.mockImplementation(() => mockFetchSubscriptionUsers);
-
-describe('<BulkEnrollmentPage />', () => {
-  describe('multiple subscriptions', () => {
-    it('renders the bulk enrollment component', async () => {
-      renderWithRouter(<BulkEnrollmentWrapper />);
-      screen.getByText('Subscription Enrollment');
-      await act(() => subscriptions);
-    });
-    it('renders the subscription picker', async () => {
-      renderWithRouter(<BulkEnrollmentWrapper />, { route: `/${testSlug}/admin/${ROUTE_NAMES.bulkEnrollment}` });
-      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);
-      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(ADD_COURSES_TITLE);
-    });
-    it('renders course search page when navigating via subscription picker', async () => {
-      renderWithRouter(<BulkEnrollmentWrapper />, { route: `/${testSlug}/admin/${ROUTE_NAMES.bulkEnrollment}` });
-      await act(() => subscriptions);
-      const sub1Button = screen.getAllByRole('link', { name: 'Enroll learners' })[0];
-      userEvent.click(sub1Button);
-      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(ADD_COURSES_TITLE);
-    });
-  });
-  describe('single subscription', () => {
-    it('with one subscription, directly renders the course search page', async () => {
-      LicenseManagerApiService.fetchCustomerAgreementData.mockImplementation(
-        () => mockCustomerAgreementDataSingleSubscription,
-      );
-      LicenseManagerApiService.fetchSubscriptions.mockImplementation(() => singleSubscription);
-      LicenseManagerApiService.fetchSubscriptionUsersOverview.mockImplementation(() => mockSingleSubscriptionCount);
-      renderWithRouter(<BulkEnrollmentWrapper />, { route: `/${testSlug}/admin/${ROUTE_NAMES.bulkEnrollment}` });
-      await act(() => subscriptions);
-      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(ADD_COURSES_TITLE);
-    });
-  });
-});
diff --git a/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.jsx b/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.jsx
index 8a88fa58f7..2aee03fcb2 100644
--- a/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.jsx
+++ b/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import algoliasearch from 'algoliasearch/lite';
 import { InstantSearch, Configure } from 'react-instantsearch-dom';
@@ -7,6 +7,7 @@ import DismissibleCourseWarning from './DismissibleCourseWarning';
 
 import { configuration } from '../../../config';
 import { ADD_COURSES_TITLE, ADD_COURSE_DESCRIPTION } from './constants';
+import { BulkEnrollContext } from '../BulkEnrollmentContext';
 
 import CourseSearchResults from '../CourseSearchResults';
 
@@ -19,34 +20,33 @@ const searchClient = algoliasearch(
 );
 
 const AddCoursesStep = ({
-  enterpriseId, enterpriseSlug, subscription, selectedCoursesNum,
-}) => (
-  <>
-    <p>{ADD_COURSE_DESCRIPTION}</p>
-    <h2>{ADD_COURSES_TITLE}</h2>
-    {selectedCoursesNum > MAX_COURSES ? <DismissibleCourseWarning /> : null}
-    <SearchData>
-      <InstantSearch
-        indexName={configuration.ALGOLIA.INDEX_NAME}
-        searchClient={searchClient}
-      >
-        <Configure
-          filters={`enterprise_catalog_uuids:${subscription.enterpriseCatalogUuid} AND advertised_course_run.upgrade_deadline>${currentEpoch}`}
-          hitsPerPage={25}
-        />
-        <SearchHeader variant="default" />
-        <CourseSearchResults
-          enterpriseId={enterpriseId}
-          enterpriseSlug={enterpriseSlug}
-          subscriptionUUID={subscription.uuid}
-        />
-      </InstantSearch>
-    </SearchData>
-  </>
-);
-
-AddCoursesStep.defaultProps = {
-  selectedCoursesNum: 0,
+  enterpriseId, enterpriseSlug, subscription,
+}) => {
+  const { courses: [selectedCourses] } = useContext(BulkEnrollContext);
+  return (
+    <>
+      <p>{ADD_COURSE_DESCRIPTION}</p>
+      <h2>{ADD_COURSES_TITLE}</h2>
+      {(selectedCourses?.length || 0) > MAX_COURSES ? <DismissibleCourseWarning /> : null}
+      <SearchData>
+        <InstantSearch
+          indexName={configuration.ALGOLIA.INDEX_NAME}
+          searchClient={searchClient}
+        >
+          <Configure
+            filters={`enterprise_catalog_uuids:${subscription.enterpriseCatalogUuid} AND advertised_course_run.upgrade_deadline>${currentEpoch}`}
+            hitsPerPage={25}
+          />
+          <SearchHeader variant="default" />
+          <CourseSearchResults
+            enterpriseId={enterpriseId}
+            enterpriseSlug={enterpriseSlug}
+            subscriptionUUID={subscription.uuid}
+          />
+        </InstantSearch>
+      </SearchData>
+    </>
+  );
 };
 
 AddCoursesStep.propTypes = {
@@ -56,7 +56,6 @@ AddCoursesStep.propTypes = {
     uuid: PropTypes.string.isRequired,
     enterpriseCatalogUuid: PropTypes.string.isRequired,
   }).isRequired,
-  selectedCoursesNum: PropTypes.number,
 };
 
 export default AddCoursesStep;
diff --git a/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.test.jsx b/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.test.jsx
index db733124b8..31ecbebd96 100644
--- a/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.test.jsx
+++ b/src/components/BulkEnrollmentPage/stepper/AddCoursesStep.test.jsx
@@ -3,7 +3,7 @@ import '@testing-library/jest-dom/extend-expect';
 import React from 'react';
 
 import { ADD_COURSES_TITLE, WARNING_ALERT_TITLE_TEXT } from './constants';
-import BulkEnrollContextProvider from '../BulkEnrollmentContext';
+import { BulkEnrollContext } from '../BulkEnrollmentContext';
 import { TABLE_HEADERS } from '../CourseSearchResults';
 
 import '../../../../__mocks__/react-instantsearch-dom';
@@ -15,14 +15,22 @@ const defaultProps = {
   enterpriseSlug: 'sluggy',
   subscription: { uuid: 'foo', enterpriseCatalogUuid: 'bar' },
   enterpriseId: 'fancyEnt',
-  selectedCoursesNum: 8,
 };
 
-const StepperWrapper = (props) => (
-  <BulkEnrollContextProvider>
-    <AddCoursesStep {...props} />
-  </BulkEnrollContextProvider>
-);
+const StepperWrapper = (props) => {
+  const selectedCourses = [...Array(8).keys()].map(n => `course-${n}`);
+  const selectedEmails = [];
+  const value = {
+    courses: [selectedCourses, () => {}],
+    emails: [selectedEmails, () => {}],
+    subscription: [{}, () => {}],
+  };
+  return (
+    <BulkEnrollContext.Provider value={value}>
+      <AddCoursesStep {...props} />
+    </BulkEnrollContext.Provider>
+  );
+};
 
 describe('AddCoursesStep', () => {
   it('displays a title', () => {
@@ -34,7 +42,7 @@ describe('AddCoursesStep', () => {
     expect(screen.getByText(TABLE_HEADERS.courseName)).toBeInTheDocument();
     expect(screen.getByText(TABLE_HEADERS.courseAvailability)).toBeInTheDocument();
   });
-  it('displays that warning dialog text', () => {
+  it('more than max selected courses causes display of warning dialog text', () => {
     renderWithRouter(<StepperWrapper {...defaultProps} />);
     expect(screen.getByText(WARNING_ALERT_TITLE_TEXT)).toBeInTheDocument();
   });
diff --git a/src/components/BulkEnrollmentPage/stepper/AddLearnersStep.jsx b/src/components/BulkEnrollmentPage/stepper/AddLearnersStep.jsx
deleted file mode 100644
index 61c234134e..0000000000
--- a/src/components/BulkEnrollmentPage/stepper/AddLearnersStep.jsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import React, {
-  useContext, useState, useMemo, useEffect, useRef,
-} from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
-
-import {
-  Alert, DataTable, TextFilter,
-} from '@edx/paragon';
-import { camelCaseObject } from '@edx/frontend-platform/utils';
-import { logError } from '@edx/frontend-platform/logging';
-
-import { Link } from 'react-router-dom';
-import { BulkEnrollContext } from '../BulkEnrollmentContext';
-import { ADD_LEARNERS_TITLE, ADD_LEARNERS_DESCRIPTION } from './constants';
-import TableLoadingSkeleton from '../../TableComponent/TableLoadingSkeleton';
-import { BaseSelectWithContext, BaseSelectWithContextHeader } from '../table/BulkEnrollSelect';
-import BaseSelectionStatus from '../table/BaseSelectionStatus';
-import { ROUTE_NAMES } from '../../EnterpriseApp/constants';
-import LicenseManagerApiService from '../../../data/services/LicenseManagerAPIService';
-import { DEBOUNCE_TIME_MILLIS } from '../../../algoliaUtils';
-
-export const ADD_LEARNERS_ERROR_TEXT = 'There was an error retrieving email data. Please try again later.';
-export const TABLE_HEADERS = {
-  email: 'Email',
-};
-
-export const LINK_TEXT = 'Subscription management';
-
-const AddLearnersSelectionStatus = (props) => {
-  const { emails: [selectedEmails, dispatch] } = useContext(BulkEnrollContext);
-
-  return <BaseSelectionStatus selectedRows={selectedEmails} dispatch={dispatch} {...props} />;
-};
-
-const FilterStatus = () => <DataTable.FilterStatus showFilteredFields={false} />;
-
-const SelectWithContext = (props) => <BaseSelectWithContext contextKey="emails" {...props} />;
-
-const SelectWithContextHeader = (props) => <BaseSelectWithContextHeader contextKey="emails" {...props} />;
-
-const selectColumn = {
-  id: 'selection',
-  Header: SelectWithContextHeader,
-  Cell: SelectWithContext,
-  disableSortBy: true,
-};
-
-const tableColumns = [
-  selectColumn,
-  {
-    Header: TABLE_HEADERS.email,
-    accessor: 'userEmail',
-    Filter: TextFilter,
-    cellClassName: 'cell-max-width-override',
-  },
-];
-
-const INITIAL_PAGE_INDEX = 0;
-export const LEARNERS_PAGE_SIZE = 25;
-
-const useIsMounted = () => {
-  const componentIsMounted = useRef(true);
-  useEffect(() => () => { componentIsMounted.current = false; }, []);
-  return componentIsMounted;
-};
-
-const AddLearnersStep = ({
-  subscriptionUUID,
-  enterpriseSlug,
-}) => {
-  const [errors, setErrors] = useState('');
-  const [loading, setLoading] = useState(true);
-  const [data, setData] = useState({ results: [], count: 0, numPages: 1 });
-  const { emails: [selectedEmails] } = useContext(BulkEnrollContext);
-  const { results, count, numPages } = data;
-  const isMounted = useIsMounted();
-
-  const fetchData = (tableInstance = {}) => {
-    const pageIndex = tableInstance.pageIndex || INITIAL_PAGE_INDEX;
-    let options = { active_only: 1, page_size: LEARNERS_PAGE_SIZE, page: pageIndex + 1 };
-
-    const { filters } = tableInstance;
-    const emailFilter = filters.find(item => item.id === 'userEmail');
-    if (emailFilter) {
-      options = { ...options, search: emailFilter.value };
-    }
-    LicenseManagerApiService.fetchSubscriptionUsers(
-      subscriptionUUID,
-      options,
-    ).then((response) => {
-      if (isMounted.current) {
-        setData(camelCaseObject(response.data));
-        setErrors('');
-      }
-    }).catch((err) => {
-      logError(err);
-      if (isMounted.current) {
-        setErrors(err.message);
-      }
-    }).finally(() => {
-      if (isMounted.current) {
-        setLoading(false);
-      }
-    });
-  };
-
-  const debouncedFetchData = useMemo(
-    () => debounce(fetchData, DEBOUNCE_TIME_MILLIS),
-    [subscriptionUUID, enterpriseSlug],
-  );
-  // Stop the invocation of the debounced function on unmount
-  useEffect(() => () => {
-    debouncedFetchData.cancel();
-  }, []);
-
-  const initialTableOptions = useMemo(() => ({
-    getRowId: (row, relativeIndex, parent) => row?.uuid || (parent ? [parent.id, relativeIndex].join('.') : relativeIndex),
-  }), []);
-
-  return (
-    <>
-      <p>
-        {ADD_LEARNERS_DESCRIPTION}{' '}
-        <Link to={`/${enterpriseSlug}/admin/${ROUTE_NAMES.subscriptionManagement}/${subscriptionUUID}`}>{LINK_TEXT}</Link>
-      </p>
-      <h2>{ADD_LEARNERS_TITLE}</h2>
-      {errors && <Alert variant="danger">{ADD_LEARNERS_ERROR_TEXT}</Alert>}
-      <div className="data-table-selector-column-wrapper">
-        <DataTable
-          isFilterable
-          manualFilters
-          columns={tableColumns}
-          data={results}
-          itemCount={count}
-          isPaginated
-          pageCount={numPages}
-          manualPagination
-          fetchData={debouncedFetchData}
-          SelectionStatusComponent={AddLearnersSelectionStatus}
-          initialTableOptions={initialTableOptions}
-          selectedFlatRows={selectedEmails}
-          FilterStatusComponent={FilterStatus}
-        >
-          {loading && <TableLoadingSkeleton data-testid="skelly" />}
-          {!loading
-            && (
-            <>
-              <DataTable.TableControlBar />
-              <DataTable.Table />
-              <DataTable.TableFooter />
-            </>
-            )}
-        </DataTable>
-      </div>
-    </>
-  );
-};
-
-AddLearnersStep.propTypes = {
-  subscriptionUUID: PropTypes.string.isRequired,
-  enterpriseSlug: PropTypes.string.isRequired,
-};
-
-export default AddLearnersStep;
diff --git a/src/components/BulkEnrollmentPage/stepper/AddLearnersStep.test.jsx b/src/components/BulkEnrollmentPage/stepper/AddLearnersStep.test.jsx
deleted file mode 100644
index 9952a525ad..0000000000
--- a/src/components/BulkEnrollmentPage/stepper/AddLearnersStep.test.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { screen, act } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import userEvent from '@testing-library/user-event';
-import React from 'react';
-import { renderWithRouter } from '../../test/testUtils';
-import { ROUTE_NAMES } from '../../EnterpriseApp/constants';
-import LicenseManagerApiService from '../../../data/services/LicenseManagerAPIService';
-
-import BulkEnrollContextProvider from '../BulkEnrollmentContext';
-import { ADD_LEARNERS_TITLE } from './constants';
-import AddLearnersStep, {
-  ADD_LEARNERS_ERROR_TEXT, LEARNERS_PAGE_SIZE, LINK_TEXT, TABLE_HEADERS,
-} from './AddLearnersStep';
-
-jest.mock('../../../data/services/LicenseManagerAPIService', () => ({
-  __esModule: true,
-  default: {
-    fetchSubscriptionUsers: jest.fn(),
-  },
-}));
-
-jest.mock('lodash.debounce', () => fn => {
-  // eslint-disable-next-line no-param-reassign
-  fn.cancel = jest.fn();
-  return fn;
-});
-
-jest.mock('@edx/frontend-platform/logging', () => ({
-  logError: jest.fn(),
-}));
-
-const mockResults = [
-  { uuid: 'foo', userEmail: 'y@z.com' },
-  { uuid: 'bar', userEmail: 'a@z.com' },
-  { uuid: 'afam', userEmail: 'afam@family.com' },
-  { uuid: 'bears', userEmail: 'bears@jungle.org' },
-];
-
-const mockTableData = Promise.resolve({
-  data: {
-    results: mockResults,
-    count: 4,
-    numPages: 6,
-  },
-});
-LicenseManagerApiService.fetchSubscriptionUsers.mockReturnValue(mockTableData);
-
-const defaultProps = {
-  subscriptionUUID: 'fakest-uuid',
-  enterpriseSlug: 'sluggiest',
-};
-
-const StepperWrapper = (props) => (
-  <BulkEnrollContextProvider>
-    <AddLearnersStep {...props} />
-  </BulkEnrollContextProvider>
-);
-
-const flushPromises = () => new Promise(setImmediate);
-
-describe('AddLearnersStep', () => {
-  it('displays a title', async () => {
-    act(() => { renderWithRouter(<StepperWrapper {...defaultProps} />); });
-    expect(screen.getByText(ADD_LEARNERS_TITLE)).toBeInTheDocument();
-    await act(() => mockTableData);
-  });
-  it('displays a table', async () => {
-    act(() => {
-      renderWithRouter(<StepperWrapper {...defaultProps} />);
-      flushPromises();
-    });
-    const columnHeader = await screen.findByText(TABLE_HEADERS.email);
-    expect(columnHeader).toBeInTheDocument();
-    expect(await screen.findByText(mockResults[0].userEmail)).toBeInTheDocument();
-    expect(await screen.findByText(mockResults[1].userEmail)).toBeInTheDocument();
-    await act(() => mockTableData);
-  });
-  it('allows search by email', async () => {
-    act(() => {
-      renderWithRouter(<StepperWrapper {...defaultProps} />);
-    });
-    expect(await screen.findByText('Search Email')).toBeInTheDocument();
-    await act(() => mockTableData);
-    const oldFilterMessage = screen.queryByText(/Filtered by userEmail/);
-    expect(oldFilterMessage).toBeNull();
-    userEvent.type(screen.getByPlaceholderText('Search Email'), 'beAR');
-    const { subscriptionUUID } = defaultProps;
-    // multiple calls will occur to this function, we only test for the last one
-    // for correctness, and don't test backend filtering part here (tested in backend).
-    // currently debouncing is mocked out since the use of jest.useFakeTimers() did not work
-    // due to an issue with lodash.debounce + jest. Perhaps a newer version of jest will do better.
-    await screen.findByDisplayValue('beAR');
-    expect(LicenseManagerApiService.fetchSubscriptionUsers).toHaveBeenLastCalledWith(
-      subscriptionUUID,
-      {
-        active_only: 1, page_size: LEARNERS_PAGE_SIZE, page: 1, search: 'beAR',
-      },
-    );
-  });
-  it('logs Error when response fails', async () => {
-    LicenseManagerApiService.fetchSubscriptionUsers.mockImplementation(async () => {
-      throw new Error('Failed response');
-    });
-    expect(screen.queryByText(ADD_LEARNERS_ERROR_TEXT)).not.toBeInTheDocument();
-    act(() => { renderWithRouter(<StepperWrapper {...defaultProps} />); });
-    await expect(LicenseManagerApiService.fetchSubscriptionUsers).toHaveBeenCalled();
-    expect(await screen.findByText(ADD_LEARNERS_ERROR_TEXT)).toBeInTheDocument();
-  });
-  it('displays a table skeleton when loading', () => {
-    LicenseManagerApiService.fetchSubscriptionUsers.mockReturnValue(new Promise(() => {}));
-    act(() => { renderWithRouter(<StepperWrapper {...defaultProps} />); });
-    expect(screen.getByTestId('skelly')).toBeInTheDocument();
-  });
-  it('links leaners to subscription management', async () => {
-    act(() => {
-      const { history } = renderWithRouter(<StepperWrapper {...defaultProps} />);
-      const link = screen.getByText(LINK_TEXT);
-      userEvent.click(link);
-      expect(history.location.pathname).toEqual(`/${defaultProps.enterpriseSlug}/admin/${ROUTE_NAMES.subscriptionManagement}/${defaultProps.subscriptionUUID}`);
-    });
-    await act(() => mockTableData);
-  });
-});
diff --git a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx
index 99aa77cc77..8723c3248b 100644
--- a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx
+++ b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.jsx
@@ -1,71 +1,95 @@
-import React, { useState, useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
+
 import {
-  Stepper, Button, Container, Scrollable,
+  Button, ModalDialog, Stepper,
 } from '@edx/paragon';
 
+import BulkEnrollmentSubmit from './BulkEnrollmentSubmit';
 import AddCoursesStep from './AddCoursesStep';
-import AddLearnersStep from './AddLearnersStep';
 import ReviewStep from './ReviewStep';
+
 import {
   PREV_BUTTON_TEST_ID,
   NEXT_BUTTON_TEXT,
   PREVIOUS_BUTTON_TEXT,
   NEXT_BUTTON_TEST_ID,
-  ADD_LEARNERS_STEP,
   REVIEW_STEP,
   ADD_COURSES_STEP,
   ADD_COURSES_TITLE,
-  ADD_LEARNERS_TITLE,
   REVIEW_TITLE,
 } from './constants';
 import { BulkEnrollContext } from '../BulkEnrollmentContext';
-import BulkEnrollmentSubmit from './BulkEnrollmentSubmit';
 
-const BulkEnrollmentStepper = ({ subscription, enterpriseSlug, enterpriseId }) => {
-  const steps = [ADD_COURSES_STEP, ADD_LEARNERS_STEP, REVIEW_STEP];
+/**
+ * Modal dialog to house Bulk enrollment workflow that starts after selecting learners and
+ * clicking 'Enroll'. Course selection will happen as part of the workflow in this window.
+ * Learner emails will be sourced from whatever learner emails were selected before opening this
+ * dialog, from the license management bulk actions table
+ *
+ * @param {object} args
+ * @param {object} args.subscription subscription plan to enroll into
+ * @param {boolean} args.isOpen whether to show dialog (for controlling open/close)
+ * @param {function} args.onClose handler to call on dialog close event
+ * @param {function} args.onSuccess handler for successful enrollment
+ * @returns Modal dialog from Paragon
+ */
+const BulkEnrollStepper = ({
+  enterpriseId, enterpriseSlug, subscription, isOpen, onClose, onSuccess,
+}) => {
+  const steps = [ADD_COURSES_STEP, REVIEW_STEP];
   const [currentStep, setCurrentStep] = useState(steps[0]);
-  const { emails: [selectedEmails], courses: [selectedCourses] } = useContext(BulkEnrollContext);
+  const { courses: [selectedCourses] } = useContext(BulkEnrollContext);
 
+  const handleEnrollComplete = () => {
+    onClose();
+    onSuccess();
+  };
   return (
     <Stepper activeKey={currentStep}>
-      <Stepper.Header className="my-3" />
-      <div className="sticky-footer-wrapper">
-        <Scrollable>
-          <Container size="xl">
-            <Stepper.Step eventKey={ADD_COURSES_STEP} title={ADD_COURSES_TITLE}>
-              <AddCoursesStep
-                enterpriseId={enterpriseId}
-                enterpriseSlug={enterpriseSlug}
-                subscription={subscription}
-                selectedCoursesNum={selectedCourses.length}
-              />
-            </Stepper.Step>
+      <ModalDialog
+        hasCloseButton
+        isFullscreenOnMobile
+        title="Subscription Enrollment"
+        isOpen={isOpen}
+        size="xl"
+        onClose={onClose}
+        className="bulk-enroll-modal"
+      >
+        <ModalDialog.Header>
+          <ModalDialog.Title>
+            Subscription Enrollment
+          </ModalDialog.Title>
+        </ModalDialog.Header>
 
-            <Stepper.Step eventKey={ADD_LEARNERS_STEP} title={ADD_LEARNERS_TITLE}>
-              <AddLearnersStep
-                subscriptionUUID={subscription.uuid}
-                enterpriseSlug={enterpriseSlug}
-              />
-            </Stepper.Step>
+        <ModalDialog.Body>
+          <Stepper.Step eventKey={ADD_COURSES_STEP} title={ADD_COURSES_TITLE}>
+            <AddCoursesStep
+              enterpriseId={enterpriseId}
+              enterpriseSlug={enterpriseSlug}
+              subscription={subscription}
+              selectedCoursesNum={selectedCourses.length}
+            />
+          </Stepper.Step>
+          <Stepper.Step eventKey={REVIEW_STEP} title={REVIEW_TITLE}>
+            <ReviewStep
+              returnToLearnerSelection={onClose}
+              returnToCourseSelection={() => setCurrentStep(ADD_COURSES_STEP)}
+            />
+          </Stepper.Step>
+        </ModalDialog.Body>
 
-            <Stepper.Step eventKey={REVIEW_STEP} title={REVIEW_TITLE}>
-              <ReviewStep setCurrentStep={setCurrentStep} />
-            </Stepper.Step>
-          </Container>
-        </Scrollable>
-        <Container size="xl" className="pb-3 pt-5">
+        <ModalDialog.Footer>
           <Stepper.ActionRow eventKey={ADD_COURSES_STEP}>
-            <Stepper.ActionRow.Spacer />
             <Button
-              onClick={() => setCurrentStep(ADD_LEARNERS_STEP)}
+              onClick={() => setCurrentStep(REVIEW_STEP)}
               data-testid={NEXT_BUTTON_TEST_ID}
               disabled={selectedCourses.length < 1}
             >
               {NEXT_BUTTON_TEXT}
             </Button>
           </Stepper.ActionRow>
-          <Stepper.ActionRow eventKey={ADD_LEARNERS_STEP}>
+          <Stepper.ActionRow eventKey={REVIEW_STEP}>
             <Button
               variant="outline-primary"
               onClick={() => setCurrentStep(ADD_COURSES_STEP)}
@@ -74,43 +98,26 @@ const BulkEnrollmentStepper = ({ subscription, enterpriseSlug, enterpriseId }) =
               {PREVIOUS_BUTTON_TEXT}
             </Button>
             <Stepper.ActionRow.Spacer />
-            <Button
-              onClick={() => setCurrentStep(REVIEW_STEP)}
-              data-testid={NEXT_BUTTON_TEST_ID}
-              disabled={selectedEmails.length < 1}
-            >
-              {NEXT_BUTTON_TEXT}
-            </Button>
-          </Stepper.ActionRow>
-
-          <Stepper.ActionRow eventKey="review">
-            <Button
-              variant="outline-primary"
-              onClick={() => setCurrentStep(ADD_LEARNERS_STEP)}
-              data-testid={PREV_BUTTON_TEST_ID}
-            >
-              {PREVIOUS_BUTTON_TEXT}
-            </Button>
-            <Stepper.ActionRow.Spacer />
             <BulkEnrollmentSubmit
               enterpriseId={enterpriseId}
               enterpriseSlug={enterpriseSlug}
               subscription={subscription}
-              returnToInitialStep={() => setCurrentStep(ADD_COURSES_STEP)}
+              onEnrollComplete={handleEnrollComplete}
             />
           </Stepper.ActionRow>
-        </Container>
-      </div>
+        </ModalDialog.Footer>
+      </ModalDialog>
     </Stepper>
   );
 };
 
-BulkEnrollmentStepper.propTypes = {
+BulkEnrollStepper.propTypes = {
   enterpriseId: PropTypes.string.isRequired,
   enterpriseSlug: PropTypes.string.isRequired,
-  subscription: PropTypes.shape({
-    uuid: PropTypes.string.isRequired,
-  }).isRequired,
+  subscription: PropTypes.shape({ title: PropTypes.string }).isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onClose: PropTypes.func.isRequired,
+  onSuccess: PropTypes.func.isRequired,
 };
 
-export default BulkEnrollmentStepper;
+export default BulkEnrollStepper;
diff --git a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.test.jsx b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.test.jsx
deleted file mode 100644
index a60ad7d6c2..0000000000
--- a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentStepper.test.jsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { act, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import userEvent from '@testing-library/user-event';
-
-import LicenseManagerApiService from '../../../data/services/LicenseManagerAPIService';
-
-import BulkEnrollmentStepper from './BulkEnrollmentStepper';
-import {
-  ADD_LEARNERS_TITLE, REVIEW_TITLE, PREV_BUTTON_TEST_ID, NEXT_BUTTON_TEST_ID, FINAL_BUTTON_TEXT,
-  ADD_COURSES_TITLE, WARNING_ALERT_TITLE_TEXT,
-} from './constants';
-import BulkEnrollContextProvider from '../BulkEnrollmentContext';
-
-import '../../../../__mocks__/react-instantsearch-dom';
-import { renderWithRouter } from '../../test/testUtils';
-import { ToastsContext } from '../../Toasts/ToastsProvider';
-
-jest.mock('../../../data/services/LicenseManagerAPIService', () => ({
-  __esModule: true,
-  default: {
-    fetchSubscriptionUsers: jest.fn(),
-  },
-}));
-
-const mockLearnerData = [{ uuid: 'foo', userEmail: 'y@z.com' }, { uuid: 'bar', userEmail: 'a@z.com' }];
-
-const mockEmailResponse = Promise.resolve({
-  data: {
-    results: mockLearnerData,
-    count: 2,
-    numPages: 6,
-  },
-});
-
-LicenseManagerApiService.fetchSubscriptionUsers.mockReturnValue(mockEmailResponse);
-const flushPromises = () => new Promise(setImmediate);
-const defaultProps = {
-  enterpriseId: 'fakeID',
-  enterpriseSlug: 'fakr',
-  subscription: { uuid: 'fakest-uuid', enterpriseName: 'fakeCo', enterpriseCatalogUuid: '12345' },
-};
-
-const addToast = jest.fn();
-
-const StepperWrapper = (props) => (
-  <ToastsContext.Provider value={{ addToast }}>
-    <BulkEnrollContextProvider>
-      <BulkEnrollmentStepper {...props} />
-    </BulkEnrollContextProvider>
-  </ToastsContext.Provider>
-);
-
-const navigateToAddLearners = () => {
-  const selectAll = screen.getByTestId('selectAll');
-  userEvent.click(selectAll);
-  userEvent.click(screen.getByTestId(NEXT_BUTTON_TEST_ID));
-  flushPromises();
-};
-
-const navigateToReview = async () => {
-  navigateToAddLearners();
-  const selectAll = await screen.findByTestId('selectAll');
-  userEvent.click(selectAll);
-  const nextButton = screen.getByTestId(NEXT_BUTTON_TEST_ID);
-  userEvent.click(nextButton);
-};
-
-describe('BulkEnrollmentStepper', () => {
-  it('starts on the add courses step', () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-    expect(screen.getAllByText(ADD_COURSES_TITLE)).toHaveLength(2);
-  });
-  it('displays the step names on the add courses step', () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-    expect(screen.getAllByText(ADD_COURSES_TITLE)).toHaveLength(2);
-    expect(screen.getAllByText(ADD_LEARNERS_TITLE)).toHaveLength(1);
-    expect(screen.getAllByText(REVIEW_TITLE)).toHaveLength(1);
-  });
-  it('disables the next button if no courses are selected', async () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-    expect(screen.getByTestId(NEXT_BUTTON_TEST_ID)).toHaveAttribute('disabled');
-    await act(() => mockEmailResponse);
-  });
-  it('selects all courses when clicking on the select column header', async () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-
-    const selectAll = screen.getByTestId('selectAll');
-    userEvent.click(selectAll);
-    expect(screen.queryByText(WARNING_ALERT_TITLE_TEXT)).not.toBeInTheDocument();
-    const checkboxes = screen.getAllByTestId('selectOne');
-    checkboxes.forEach((checkbox) => {
-      expect(checkbox).toHaveProperty('checked', true);
-    });
-    await act(() => mockEmailResponse);
-  });
-  it('clicking next brings you to the Add learners step', async () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-
-    navigateToAddLearners();
-
-    expect(screen.getAllByText(ADD_LEARNERS_TITLE)).toHaveLength(2);
-    expect(screen.getByTestId(NEXT_BUTTON_TEST_ID)).toBeInTheDocument();
-    expect(screen.queryByTestId(FINAL_BUTTON_TEXT)).not.toBeInTheDocument();
-    expect(screen.queryByTestId(PREV_BUTTON_TEST_ID)).toBeInTheDocument();
-    await act(() => mockEmailResponse);
-  });
-  it('clicking previous from Add learners brings you back to Add courses and retains selection', async () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-    navigateToAddLearners();
-    const prevButton = screen.getByTestId(PREV_BUTTON_TEST_ID);
-    userEvent.click(prevButton);
-    expect(screen.getAllByText(ADD_COURSES_TITLE)).toHaveLength(2);
-    expect(screen.getByText('2 selected')).toBeInTheDocument();
-    await act(() => mockEmailResponse);
-  });
-  it('displays the user emails', async () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-    navigateToAddLearners();
-    expect(await screen.findByText(mockLearnerData[0].userEmail)).toBeInTheDocument();
-    expect(await screen.findByText(mockLearnerData[1].userEmail)).toBeInTheDocument();
-    await act(() => mockEmailResponse);
-  });
-  it('takes users to the review step when they click next', async () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-    await navigateToReview();
-    expect(screen.getAllByText(REVIEW_TITLE)).toHaveLength(2);
-    expect(screen.getByText(FINAL_BUTTON_TEXT)).toBeInTheDocument();
-  });
-  it('returns users to the add learners step when they click previous', async () => {
-    renderWithRouter(<StepperWrapper {...defaultProps} />);
-    await navigateToReview();
-    const prevButton = screen.getByTestId(PREV_BUTTON_TEST_ID);
-
-    userEvent.click(prevButton);
-
-    expect(screen.getAllByText(ADD_LEARNERS_TITLE)).toHaveLength(2);
-    await act(() => mockEmailResponse);
-  });
-});
diff --git a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.jsx b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.jsx
index 70195f13d0..afa77682ff 100644
--- a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.jsx
+++ b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.jsx
@@ -72,7 +72,7 @@ export const generateSuccessMessage = numEmails => {
 };
 
 const BulkEnrollmentSubmit = ({
-  enterpriseId, enterpriseSlug, subscription, returnToInitialStep,
+  enterpriseId, enterpriseSlug, subscription, onEnrollComplete,
 }) => {
   const [loading, setLoading] = useState(false);
   const [checked, setChecked] = useState(true);
@@ -108,7 +108,7 @@ const BulkEnrollmentSubmit = ({
       coursesDispatch(clearSelectionAction());
       emailsDispatch(clearSelectionAction());
       addToast(generateSuccessMessage(selectedEmails.length));
-      returnToInitialStep();
+      onEnrollComplete();
     }).catch((err) => {
       logError(err);
       setError(err);
@@ -151,7 +151,7 @@ BulkEnrollmentSubmit.propTypes = {
     uuid: PropTypes.string.isRequired,
     enterpriseCatalogUuid: PropTypes.string.isRequired,
   }).isRequired,
-  returnToInitialStep: PropTypes.func.isRequired,
+  onEnrollComplete: PropTypes.func.isRequired,
 };
 
 export default BulkEnrollmentSubmit;
diff --git a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.test.jsx b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.test.jsx
index 81cc7c0bcb..c6492b9a94 100644
--- a/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.test.jsx
+++ b/src/components/BulkEnrollmentPage/stepper/BulkEnrollmentSubmit.test.jsx
@@ -38,7 +38,7 @@ const defaultProps = {
   enterpriseId: testEntId,
   enterpriseSlug: testSlug,
   subscription: { uuid: 'foo', enterpriseCatalogUuid: 'bar' },
-  returnToInitialStep: jest.fn(),
+  onEnrollComplete: jest.fn(),
 };
 const defaultAlertProps = {
   isOpen: true,
@@ -139,7 +139,7 @@ describe('BulkEnrollmentSubmit', () => {
     coursesDispatch.mockClear();
     addToast.mockClear();
     logError.mockClear();
-    defaultProps.returnToInitialStep.mockClear();
+    defaultProps.onEnrollComplete.mockClear();
   });
 
   it('displays checkbox and button', () => {
@@ -367,7 +367,7 @@ describe('BulkEnrollmentSubmit', () => {
     );
     const button = screen.getByTestId(FINAL_BUTTON_TEST_ID);
     await userEvent.click(button);
-    expect(defaultProps.returnToInitialStep).toHaveBeenCalledTimes(1);
+    expect(defaultProps.onEnrollComplete).toHaveBeenCalledTimes(1);
     await act(() => mockPromiseResolve);
   });
 });
diff --git a/src/components/BulkEnrollmentPage/stepper/ReviewStep.jsx b/src/components/BulkEnrollmentPage/stepper/ReviewStep.jsx
index 2f3325c8e7..c33aae96a7 100644
--- a/src/components/BulkEnrollmentPage/stepper/ReviewStep.jsx
+++ b/src/components/BulkEnrollmentPage/stepper/ReviewStep.jsx
@@ -3,7 +3,7 @@ import { Row } from '@edx/paragon';
 import PropTypes from 'prop-types';
 
 import { BulkEnrollContext } from '../BulkEnrollmentContext';
-import { ADD_LEARNERS_STEP, ADD_COURSES_STEP, REVIEW_TITLE } from './constants';
+import { REVIEW_TITLE } from './constants';
 import ReviewList from './ReviewList';
 
 const LEARNERS = {
@@ -20,7 +20,7 @@ const COURSES = {
   removal: 'Remove course',
 };
 
-const ReviewStep = ({ setCurrentStep }) => {
+const ReviewStep = ({ returnToLearnerSelection, returnToCourseSelection }) => {
   const {
     emails: [selectedEmails, emailsDispatch],
     courses: [selectedCourses, coursesDispatch],
@@ -41,7 +41,7 @@ const ReviewStep = ({ setCurrentStep }) => {
           accessor="title"
           dispatch={coursesDispatch}
           subject={COURSES}
-          returnToSelection={() => setCurrentStep(ADD_COURSES_STEP)}
+          returnToSelection={returnToCourseSelection}
         />
         <ReviewList
           key="emails"
@@ -49,7 +49,7 @@ const ReviewStep = ({ setCurrentStep }) => {
           accessor="userEmail"
           dispatch={emailsDispatch}
           subject={LEARNERS}
-          returnToSelection={() => setCurrentStep(ADD_LEARNERS_STEP)}
+          returnToSelection={returnToLearnerSelection}
         />
       </Row>
     </>
@@ -57,8 +57,9 @@ const ReviewStep = ({ setCurrentStep }) => {
 };
 
 ReviewStep.propTypes = {
-  /* Function from the stepper to change steps */
-  setCurrentStep: PropTypes.func.isRequired,
+  /* Function to return to prior step */
+  returnToLearnerSelection: PropTypes.func.isRequired,
+  returnToCourseSelection: PropTypes.func.isRequired,
 };
 
 export default ReviewStep;
diff --git a/src/components/BulkEnrollmentPage/stepper/constants.jsx b/src/components/BulkEnrollmentPage/stepper/constants.jsx
index 7c7cd925a0..a2dc47bb8a 100644
--- a/src/components/BulkEnrollmentPage/stepper/constants.jsx
+++ b/src/components/BulkEnrollmentPage/stepper/constants.jsx
@@ -9,7 +9,6 @@ export const PREV_BUTTON_TEST_ID = 'stepper-prev';
 export const FINAL_BUTTON_TEST_ID = 'stepper-final';
 export const NOTIFY_CHECKBOX_TEST_ID = 'notify-checkbox';
 export const CUSTOMER_SUPPORT_HYPERLINK_TEST_ID = 'customer-support-hyperlink';
-export const ADD_LEARNERS_STEP = 'addLearners';
 export const REVIEW_STEP = 'review';
 export const ADD_COURSES_STEP = 'chooseCourses';
 export const ADD_COURSES_TITLE = 'Add courses';
diff --git a/src/components/EnterpriseApp/index.jsx b/src/components/EnterpriseApp/index.jsx
index be6604f2fc..d552b5a7a9 100644
--- a/src/components/EnterpriseApp/index.jsx
+++ b/src/components/EnterpriseApp/index.jsx
@@ -7,7 +7,6 @@ import { breakpoints } from '@edx/paragon';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import AdminPage from '../../containers/AdminPage';
 import CodeManagementPage from '../../containers/CodeManagementPage';
-import BulkEnrollmentPage from '../BulkEnrollmentPage';
 import RequestCodesPage from '../RequestCodesPage';
 import Sidebar from '../../containers/Sidebar';
 import SamlProviderConfiguration from '../../containers/SamlProviderConfiguration';
@@ -177,14 +176,6 @@ class EnterpriseApp extends React.Component {
                       )}
                     />,
                   ]}
-                  {(features.BULK_ENROLLMENT && enableSubscriptionManagementScreen)
-                    && (
-                    <Route
-                      key={ROUTE_NAMES.bulkEnrollment}
-                      path={`${baseUrl}/admin/${ROUTE_NAMES.bulkEnrollment}`}
-                      render={routeProps => <BulkEnrollmentPage {...routeProps} />}
-                    />
-                    )}
                   {features.REPORTING_CONFIGURATIONS && (
                     <Route
                       key="reporting-config"
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx
index c971188ed9..94ddee376c 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/LicenseManagementTableBulkActions.jsx
@@ -1,10 +1,9 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   ActionRow, Button, Icon, ModalPopup, useToggle,
 } from '@edx/paragon';
 import {
-  BookOpen,
   Email,
   RemoveCircle,
   MoreVert,
@@ -12,6 +11,11 @@ import {
 import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 
 import { canRemindLicense, canRevokeLicense } from '../../data/utils';
+import { ACTIVATED, ASSIGNED, REVOKED } from '../../data/constants';
+import BulkEnrollWarningModal from '../../../BulkEnrollmentPage/BulkEnrollmentWarningModal';
+import BulkEnrollButton from '../../../BulkEnrollmentPage/BulkEnrollButton';
+import BulkEnrollDialog from '../../../BulkEnrollmentPage/BulkEnrollDialog';
+
 import LicenseManagementRevokeModal from '../LicenseManagementModals/LicenseManagementRevokeModal';
 import LicenseManagementRemindModal from '../LicenseManagementModals/LicenseManagementRemindModal';
 import {
@@ -22,10 +26,10 @@ import { SUBSCRIPTION_TABLE_EVENTS } from '../../../../eventTracking';
 
 const LicenseManagementTableBulkActions = ({
   subscription,
-  enrollmentLink,
   selectedUsers,
   onRemindSuccess,
   onRevokeSuccess,
+  onEnrollSuccess,
   allUsersSelected,
   activatedUsers,
   assignedUsers,
@@ -37,6 +41,16 @@ const LicenseManagementTableBulkActions = ({
   const [isOpen, open, close] = useToggle(false);
   const target = React.useRef(null);
 
+  const revokedUsers = useMemo(() => selectedUsers.filter(user => user.status === REVOKED), [selectedUsers]);
+  const enrollableLearners = useMemo(
+    () => selectedUsers.filter(
+      user => [ACTIVATED, ASSIGNED].includes(user.status),
+    ).map(user => user.email), [selectedUsers],
+  );
+
+  const [showBulkEnrollWarning, setShowBulkEnrollWarning] = useState(false);
+  const [showBulkEnrollModal, setShowBulkEnrollModal] = useState(false);
+
   // Divides selectedUsers users into two arrays
   const [usersToRemind, usersToRevoke] = useMemo(() => {
     if (allUsersSelected) {
@@ -100,6 +114,27 @@ const LicenseManagementTableBulkActions = ({
     onRemindSuccess();
   };
 
+  const handleBulkEnrollment = ({ setOfRevokedUsers, validateRevoked = true }) => {
+    /**
+     * if validation is not needed, just go ahead and proceed to enrollment
+     */
+
+    if (validateRevoked && setOfRevokedUsers && setOfRevokedUsers.length > 0) {
+      setShowBulkEnrollWarning(true);
+      // whether to show the bulk enroll main dialog
+      setShowBulkEnrollModal(false);
+    } else {
+      setShowBulkEnrollWarning(false);
+      // whether to show the bulk enroll main dialog
+      setShowBulkEnrollModal(true);
+    }
+  };
+
+  const handleBulkEnrollmentForced = ({ setOfRevokedUsers }) => handleBulkEnrollment({
+    setOfRevokedUsers,
+    validateRevoked: false,
+  });
+
   const handleRemindSubmit = () => {
     sendEnterpriseTrackEvent(
       subscription.enterpriseCustomerUuid,
@@ -162,7 +197,7 @@ const LicenseManagementTableBulkActions = ({
             <Button
               variant="outline-danger"
               iconBefore={RemoveCircle}
-              onClick={() => revokeOnClick(usersToRevoke, allUsersSelected)}
+              onClick={() => revokeOnClick(usersToRevoke)}
               disabled={(!usersToRevoke.length && !allUsersSelected) || disabled}
             >
               Revoke ({allUsersSelected ? activatedUsers + assignedUsers : usersToRevoke.length})
@@ -177,13 +212,32 @@ const LicenseManagementTableBulkActions = ({
         >
           Remind ({allUsersSelected ? assignedUsers : usersToRemind.length })
         </Button>
-        <Button
-          variant="primary"
-          href={enrollmentLink}
-          iconBefore={BookOpen}
-        >
-          Enroll
-        </Button>
+        <BulkEnrollButton
+          learners={enrollableLearners}
+          handleEnrollment={() => handleBulkEnrollment({ setOfRevokedUsers: revokedUsers })}
+        />
+
+        {/* warning modal shows when there is 1 or more revoked licenses selected */}
+        {showBulkEnrollWarning
+        && (
+        <BulkEnrollWarningModal
+          learners={enrollableLearners}
+          isDialogOpen={showBulkEnrollWarning}
+          onClose={() => setShowBulkEnrollWarning(false)}
+          onEnroll={() => handleBulkEnrollmentForced({ setOfRevokedUsers: revokedUsers })}
+        />
+        )}
+
+        {/* Bulk Enrollment shows in a dialog when enrollment conditions are met */}
+        {showBulkEnrollModal && (
+        <BulkEnrollDialog
+          isOpen={showBulkEnrollModal}
+          onClose={() => { setShowBulkEnrollModal(false); }}
+          subscription={subscription}
+          learners={enrollableLearners}
+          onSuccess={onEnrollSuccess}
+        />
+        )}
       </ActionRow>
       <LicenseManagementRevokeModal
         isOpen={revokeModal.isOpen}
@@ -224,7 +278,6 @@ LicenseManagementTableBulkActions.propTypes = {
       remaining: PropTypes.number.isRequired,
     }),
   }).isRequired,
-  enrollmentLink: PropTypes.string.isRequired,
   selectedUsers: PropTypes.arrayOf(
     PropTypes.shape({
       status: PropTypes.string.isRequired,
@@ -232,6 +285,7 @@ LicenseManagementTableBulkActions.propTypes = {
   ).isRequired,
   onRemindSuccess: PropTypes.func.isRequired,
   onRevokeSuccess: PropTypes.func.isRequired,
+  onEnrollSuccess: PropTypes.func.isRequired,
   allUsersSelected: PropTypes.bool.isRequired,
   activatedUsers: PropTypes.number.isRequired,
   assignedUsers: PropTypes.number.isRequired,
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
index 940091a622..4ecdda7ef3 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/index.jsx
@@ -75,9 +75,6 @@ const LicenseManagementTable = () => {
   } = useContext(SubscriptionDetailContext);
 
   const isExpired = moment().isAfter(subscription.expirationDate);
-  // this is not the cleanest way of getting this, but this will be removed when the
-  // enrollment modal is implemented
-  const enrollmentLink = (window.location.href).replace('subscriptions', 'enrollment');
 
   const sendStatusFilterEvent = (statusFilter) => {
     sendEnterpriseTrackEvent(
@@ -166,6 +163,10 @@ const LicenseManagementTable = () => {
     [users],
   );
 
+  const onEnrollSuccess = (clearTableSelectionCallback) => (() => {
+    clearTableSelectionCallback();
+    forceRefreshUsers();
+  });
   // Successful action modal callback
   const onRemindSuccess = (clearTableSelectionCallback) => (() => {
     clearTableSelectionCallback();
@@ -271,10 +272,10 @@ const LicenseManagementTable = () => {
           return (
             <LicenseManagementTableBulkActions
               subscription={subscription}
-              enrollmentLink={enrollmentLink}
               selectedUsers={selectedUsers}
               onRemindSuccess={onRemindSuccess(clearSelection)}
               onRevokeSuccess={onRevokeSuccess(clearSelection)}
+              onEnrollSuccess={onEnrollSuccess(clearSelection)}
               activatedUsers={overview.activated}
               assignedUsers={overview.assigned}
               allUsersSelected={data.isEntireTableSelected}
diff --git a/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableBulkActions.test.jsx b/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableBulkActions.test.jsx
index 432709d49c..a45412c12b 100644
--- a/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableBulkActions.test.jsx
+++ b/src/components/subscriptions/licenses/LicenseManagementTable/tests/LicenseManagementTableBulkActions.test.jsx
@@ -9,10 +9,13 @@ import userEvent from '@testing-library/user-event';
 import moment from 'moment';
 import configureMockStore from 'redux-mock-store';
 import { Provider } from 'react-redux';
-import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
+import '@testing-library/jest-dom/extend-expect';
 
+import '../../../../../../__mocks__/react-instantsearch-dom';
+import { sendEnterpriseTrackEvent } from '@edx/frontend-enterprise-utils';
 import { SUBSCRIPTION_TABLE_EVENTS } from '../../../../../eventTracking';
 import LicenseManagementTableBulkActions from '../LicenseManagementTableBulkActions';
+
 import {
   ASSIGNED,
   ACTIVATED,
@@ -27,6 +30,15 @@ jest.mock('@edx/frontend-enterprise-utils', () => ({
   sendEnterpriseTrackEvent: jest.fn(),
 }));
 
+/**
+ * Instead of fighting to get the instantsearch mock, we simply mock out the AddcoursesStep
+ * component for this test, and ensure it gets rendered.
+ */
+jest.mock('../../../../BulkEnrollmentPage/stepper/AddCoursesStep', () => ({
+  __esModule: true,
+  default: () => <div>Add courses step mock</div>,
+}));
+
 const mockStore = configureMockStore();
 const store = mockStore({
   portalConfiguration: {
@@ -38,6 +50,7 @@ const basicProps = {
   selectedUsers: [],
   onRemindSuccess: () => {},
   onRevokeSuccess: () => {},
+  onEnrollSuccess: () => {},
   allUsersSelected: false,
   activatedUsers: 0,
   assignedUsers: 0,
@@ -51,7 +64,6 @@ const basicProps = {
       remaining: 10,
     },
   },
-  enrollmentLink: 'link',
 };
 
 const email = 'foo@test.edx.org';
@@ -81,18 +93,43 @@ describe('<LicenseManagementTableBulkActions />', () => {
 
   it('renders correct empty state', () => {
     render(<LicenseManagementTableBulkActionsWithContext {...basicProps} />);
-    expect(screen.getAllByRole('button').length).toBe(2);
-    expect(screen.getByText('Enroll')).toBeTruthy();
-    expect(screen.getByText('Remind (0)')).toBeTruthy();
-    expect(screen.getByTestId('revokeToggle')).toBeTruthy();
+    expect(screen.getAllByRole('button').length).toBe(3);
+    expect(screen.queryByText('Enroll (0)')).toBeInTheDocument();
+    expect(screen.queryByText('Remind (0)')).toBeInTheDocument();
+    expect(screen.queryByTestId('revokeToggle')).toBeInTheDocument();
+  });
+
+  describe('bulk enrollment bulk actions', () => {
+    it('shows warning dialog when at least 1 revoked learners selected', async () => {
+      const props = { ...basicProps, selectedUsers: [testActivatedUser, testRevokedUser, testRevokedUser] };
+      render(<LicenseManagementTableBulkActionsWithContext {...props} />);
+      const enrollButton = screen.getByText('Enroll (1)');
+      let revokedTitle = screen.queryByText('Revoked Learners Selected');
+      expect(revokedTitle).toBeNull();
+      userEvent.click(enrollButton);
+      revokedTitle = await screen.findByText('Revoked Learners Selected');
+      expect(revokedTitle).toBeVisible();
+    });
+    it('on clicking enroll in warning dialog, shows the bulk enrollment dialog', async () => {
+      const props = { ...basicProps, selectedUsers: [testActivatedUser, testRevokedUser, testRevokedUser] };
+      render(<LicenseManagementTableBulkActionsWithContext {...props} />);
+      const enrollButton = screen.getByText('Enroll (1)');
+      userEvent.click(enrollButton);
+      const enrollButtonInDialog = await screen.findByTestId('ENROLL_BTN_IN_WARNING_MODAL');
+      userEvent.click(enrollButtonInDialog);
+      // Note we mocked out the AddCoursesStep comonent above, so we expect whatever it renders, to be here.
+      // this is sufficient for now to test that bulk enrollment dialog opens up
+      const addCoursesTitle = await screen.findByText('Add courses step mock');
+      expect(addCoursesTitle).toBeVisible();
+    });
   });
 
   describe('renders correct label when not all users are selected ', () => {
     it('selected only revoked users', async () => {
       const props = { ...basicProps, selectedUsers: [testRevokedUser, testRevokedUser] };
       render(<LicenseManagementTableBulkActionsWithContext {...props} />);
-      expect(screen.getByText('Enroll')).toBeTruthy();
-      expect(screen.getByText('Remind (0)')).toBeTruthy();
+      expect(screen.queryByText('Enroll (0)')).toBeInTheDocument();
+      expect(screen.getByText('Remind (0)')).toBeInTheDocument();
       const revokeMenu = screen.getByTestId('revokeToggle');
       await act(async () => {
         await userEvent.click(revokeMenu);
@@ -102,8 +139,8 @@ describe('<LicenseManagementTableBulkActions />', () => {
     it('selected only activated users', async () => {
       const props = { ...basicProps, selectedUsers: [testActivatedUser] };
       render(<LicenseManagementTableBulkActionsWithContext {...props} />);
-      expect(screen.getByText('Enroll')).toBeTruthy();
-      expect(screen.getByText('Remind (0)')).toBeTruthy();
+      expect(screen.queryByText('Enroll (1)')).toBeInTheDocument();
+      expect(screen.getByText('Remind (0)')).toBeInTheDocument();
       const revokeMenu = screen.getByTestId('revokeToggle');
       await act(async () => {
         await userEvent.click(revokeMenu);
@@ -113,8 +150,8 @@ describe('<LicenseManagementTableBulkActions />', () => {
     it('selected only assigned users', async () => {
       const props = { ...basicProps, selectedUsers: [testAssignedUser, testAssignedUser] };
       render(<LicenseManagementTableBulkActionsWithContext {...props} />);
-      expect(screen.getByText('Enroll')).toBeTruthy();
-      expect(screen.getByText('Remind (2)')).toBeTruthy();
+      expect(screen.getByText('Enroll (2)')).toBeInTheDocument();
+      expect(screen.getByText('Remind (2)')).toBeInTheDocument();
       const revokeMenu = screen.getByTestId('revokeToggle');
       await act(async () => {
         await userEvent.click(revokeMenu);
@@ -124,8 +161,8 @@ describe('<LicenseManagementTableBulkActions />', () => {
     it('selected mix users', async () => {
       const props = { ...basicProps, selectedUsers: [testRevokedUser, testActivatedUser, testAssignedUser] };
       render(<LicenseManagementTableBulkActionsWithContext {...props} />);
-      expect(screen.getByText('Enroll')).toBeTruthy();
-      expect(screen.getByText('Remind (1)')).toBeTruthy();
+      expect(screen.getByText('Enroll (2)')).toBeInTheDocument();
+      expect(screen.getByText('Remind (1)')).toBeInTheDocument();
       const revokeMenu = screen.getByTestId('revokeToggle');
       await act(async () => {
         await userEvent.click(revokeMenu);
@@ -135,13 +172,13 @@ describe('<LicenseManagementTableBulkActions />', () => {
     it('selected undefined users', async () => {
       const props = { ...basicProps, selectedUsers: [testUndefinedUser] };
       render(<LicenseManagementTableBulkActionsWithContext {...props} />);
-      expect(screen.getByText('Enroll')).toBeTruthy();
-      expect(screen.getByText('Remind (0)')).toBeTruthy();
+      expect(screen.getByText('Enroll (0)')).toBeInTheDocument();
+      expect(screen.getByText('Remind (0)')).toBeInTheDocument();
       const revokeMenu = screen.getByTestId('revokeToggle');
       await act(async () => {
         await userEvent.click(revokeMenu);
       });
-      expect(screen.getByText('Revoke (0)')).toBeTruthy();
+      expect(screen.getByText('Revoke (0)')).toBeInTheDocument();
     });
   });
 
@@ -153,7 +190,7 @@ describe('<LicenseManagementTableBulkActions />', () => {
       assignedUsers: 1,
     };
     render(<LicenseManagementTableBulkActionsWithContext {...props} />);
-    expect(screen.getByText('Enroll')).toBeTruthy();
+    expect(screen.getByText('Enroll (0)')).toBeTruthy();
     expect(screen.getByText('Remind (1)')).toBeTruthy();
     const revokeMenu = screen.getByTestId('revokeToggle');
     await act(async () => {
diff --git a/src/components/subscriptions/styles/_LicenseActions.scss b/src/components/subscriptions/styles/_LicenseActions.scss
deleted file mode 100644
index 26689a32ff..0000000000
--- a/src/components/subscriptions/styles/_LicenseActions.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.license-actions {
-  .btn {
-    @extend .mr-2;
-
-    &:last-child {
-      @extend .mr-0;
-    }
-  }
-}
diff --git a/src/components/subscriptions/styles/_SubscriptionManagementPage.scss b/src/components/subscriptions/styles/_SubscriptionManagementPage.scss
deleted file mode 100644
index 4cb2935771..0000000000
--- a/src/components/subscriptions/styles/_SubscriptionManagementPage.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-.manage-subscription {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-
-  .add-users-dropdown {
-    .dropdown-menu {
-      z-index: $zindex-fixed;
-    }
-  }
-
-  .support-card {
-    .card-title {
-      @extend .h4;
-    }
-  }
-
-  .subscription-card {
-    margin-bottom: ($spacer * 1.875);
-
-    @include media-breakpoint-down(sm) {
-      .pgn__card-header {
-        flex-direction: column;
-      }
-
-      .pgn__card-header-actions {
-        text-align: right;
-      }
-
-      .card-body {
-        & > span {
-          margin-left: 1rem;
-        }
-
-        .row {
-          margin: 1rem 0 !important;
-        }
-      }
-    }
-
-  }
-
-  @include media-breakpoint-up(lg) {
-    .add-users-dropdown {
-      float: right;
-
-      .dropdown-menu {
-        left: inherit;
-        right: 0;
-      }
-    }
-  }
-}
diff --git a/src/components/subscriptions/styles/index.scss b/src/components/subscriptions/styles/index.scss
new file mode 100644
index 0000000000..939874b4e0
--- /dev/null
+++ b/src/components/subscriptions/styles/index.scss
@@ -0,0 +1,68 @@
+.manage-subscription {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+
+    .add-users-dropdown {
+        .dropdown-menu {
+            z-index: $zindex-fixed;
+        }
+    }
+
+    .support-card {
+        .card-title {
+            @extend .h4;
+        }
+    }
+
+    .subscription-card {
+        margin-bottom: ($spacer * 1.875);
+
+        @include media-breakpoint-down(sm) {
+            .pgn__card-header {
+                flex-direction: column;
+            }
+
+            .pgn__card-header-actions {
+                text-align: right;
+            }
+
+            .card-body {
+                & > span {
+                    margin-left: 1rem;
+                }
+
+                .row {
+                    margin: 1rem 0 !important;
+                }
+            }
+        }
+    }
+
+    @include media-breakpoint-up(lg) {
+        .add-users-dropdown {
+            float: right;
+
+            .dropdown-menu {
+                left: inherit;
+                right: 0;
+            }
+        }
+    }
+}
+
+.license-actions {
+    .btn {
+        @extend .mr-2;
+
+        &:last-child {
+            @extend .mr-0;
+        }
+    }
+}
+
+.pgn__modal-title .enroll-header {
+    display: inline-block;
+    background-color: transparent;
+    color: $red;
+}
diff --git a/src/index.scss b/src/index.scss
index cf9e571842..6f18e1bd91 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -19,10 +19,9 @@ $fa-font-path: "~font-awesome/fonts";
 @import "./components/RequestCodesPage/RequestCodesPage";
 @import "./components/Sidebar/Sidebar";
 @import "./components/SupportPage/SupportPage";
-@import "./components/subscriptions/styles/LicenseActions";
-@import "./components/subscriptions/styles/SubscriptionManagementPage";
+@import "./components/subscriptions/styles/";
 @import "./components/StatusAlert/StatusAlert";
-@import './components/LoadingMessage/LoadingMessage';
+@import "./components/LoadingMessage/LoadingMessage";
 @import "./components/TableComponent/TableComponent";
 @import "./components/TableLoadingOverlay/TableLoadingOverlay";
 @import "./components/Hero/Hero";