Add in-place enrollment to course home page.

openedx/features/course_experience/static/course_experience/fixtures/enrollment-button.html

@@ -0,0 +1 @@
+<button class="enroll-btn btn-link">Enroll Now</button>

openedx/features/course_experience/static/course_experience/js/Enrollment.js

@@ -0,0 +1,45 @@
+
+/*
+ * Course Enrollment on the Course Home page
+ */
+export class CourseEnrollment {  // eslint-disable-line import/prefer-default-export
+  /**
+   * Redirect to a URL.  Mainly useful for mocking out in tests.
+   * @param  {string} url The URL to redirect to.
+   */
+  static redirect(url) {
+    window.location.href = url;
+  }
+
+  static refresh() {
+    window.location.reload(false);
+  }
+
+  static createEnrollment(courseId) {
+    const data = JSON.stringify({
+      course_details: { course_id: courseId },
+    });
+    const enrollmentAPI = '/api/enrollment/v1/enrollment';
+    const trackSelection = '/course_modes/choose/';
+
+    return () =>
+      $.ajax(
+        {
+          type: 'POST',
+          url: enrollmentAPI,
+          data,
+          contentType: 'application/json',
+        }).done(() => {
+          window.analytics.track('edx.bi.user.course-home.enrollment');
+          CourseEnrollment.refresh();
+        }).fail(() => {
+          // If the simple enrollment we attempted failed, go to the track selection page,
+          // which is better for handling more complex enrollment situations.
+          CourseEnrollment.redirect(trackSelection + courseId);
+        });
+  }
+
+  constructor(buttonClass, courseId) {
+    $(buttonClass).click(CourseEnrollment.createEnrollment(courseId));
+  }
+}

openedx/features/course_experience/static/course_experience/js/spec/Enrollment_spec.js

@@ -0,0 +1,48 @@
+/* globals $, loadFixtures */
+
+import {
+  expectRequest,
+  requests as mockRequests,
+  respondWithJson,
+  respondWithError,
+} from 'edx-ui-toolkit/js/utils/spec-helpers/ajax-helpers';
+import { CourseEnrollment } from '../Enrollment';
+
+
+describe('CourseEnrollment tests', () => {
+  describe('Ensure button behavior', () => {
+    const endpointUrl = '/api/enrollment/v1/enrollment';
+    const courseId = 'course-v1:edX+DemoX+Demo_Course';
+    const enrollButtonClass = '.enroll-btn';
+
+    window.analytics = jasmine.createSpyObj('analytics', ['page', 'track', 'trackLink']);
+
+    beforeEach(() => {
+      loadFixtures('course_experience/fixtures/enrollment-button.html');
+      new CourseEnrollment('.enroll-btn', courseId);  // eslint-disable-line no-new
+    });
+    it('Verify that we reload on success', () => {
+      const requests = mockRequests(this);
+      $(enrollButtonClass).click();
+      expectRequest(
+        requests,
+        'POST',
+        endpointUrl,
+        `{"course_details":{"course_id":"${courseId}"}}`,
+      );
+      spyOn(CourseEnrollment, 'refresh');
+      respondWithJson(requests);
+      expect(CourseEnrollment.refresh).toHaveBeenCalled();
+      expect(window.analytics.track).toHaveBeenCalled();
+      requests.restore();
+    });
+    it('Verify that we redirect to track selection on fail', () => {
+      const requests = mockRequests(this);
+      $(enrollButtonClass).click();
+      spyOn(CourseEnrollment, 'redirect');
+      respondWithError(requests, 403);
+      expect(CourseEnrollment.redirect).toHaveBeenCalled();
+      requests.restore();
+    });
+  });
+});

openedx/features/course_experience/templates/course_experience/course-home-fragment.html

@@ -112,3 +112,7 @@ from openedx.features.course_experience import UNIFIED_COURSE_TAB_FLAG, SHOW_REV
         courseToolLink: ".course-tool-link",
     });
 </%static:webpack>
+
+<%static:webpack entry="Enrollment">
+    new CourseEnrollment('.enroll-btn', '${course_key | n, js_escaped_string}');
+</%static:webpack>