Upgrade enrollment dialog fixes (#2141)

frontend/public/src/components/CourseProductDetailEnroll.js

@@ -132,44 +132,9 @@ export class CourseProductDetailEnroll extends React.Component<
       this.toggleAddlProfileFieldsModal()
     }
   }
-
-  async checkForExistingEnrollment(run: EnrollmentFlaggedCourseRun) {
-    // Find an existing enrollment - the default should be the audit enrollment
-    // already have, so you can just upgrade in place. If you don't, you get the
-    // current run (which should be the first available one).
-    // This was changed to also make sure the run you're enrolled in is upgradeable.
-    const { enrollments } = this.props
-
-    if (enrollments) {
-      const firstAuditEnrollment = enrollments.find(
-        (enrollment: RunEnrollment) =>
-          enrollment.run.course.id === run.course.id &&
-          enrollment.enrollment_mode === "audit" &&
-          enrollment.run.enrollment_end !== null &&
-          enrollment.run.enrollment_end > moment.now() &&
-          (enrollment.run.upgrade_deadline === null ||
-            enrollment.run.upgrade_deadline > moment.now())
-      )
-
-      if (firstAuditEnrollment) {
-        this.setCurrentCourseRun(firstAuditEnrollment.run)
-        return
-      }
-    }
-
-    this.setCurrentCourseRun(run)
-  }
-
   toggleUpgradeDialogVisibility = () => {
     const { upgradeEnrollmentDialogVisibility } = this.state
-    const run = this.getCurrentCourseRun()
-
-    if (!upgradeEnrollmentDialogVisibility) {
-      this.checkForExistingEnrollment(run)
-    } else {
-      window.location = "/dashboard/"
-    }
-
+    this.setCurrentCourseRun(null)
     this.setState({
       upgradeEnrollmentDialogVisibility: !upgradeEnrollmentDialogVisibility
     })
@@ -308,6 +273,7 @@ export class CourseProductDetailEnroll extends React.Component<
         ) : null
     const { upgradeEnrollmentDialogVisibility } = this.state
     const product = run && run.products ? run.products[0] : null
+    const canUpgrade = run && run.is_upgradable && product
     const upgradableCourseRuns = courseRuns
       ? courseRuns.filter(
         (run: EnrollmentFlaggedCourseRun) => run.is_upgradable
@@ -376,11 +342,12 @@ export class CourseProductDetailEnroll extends React.Component<
                     Certificate track:{" "}
                     <strong id="certificate-price-info">
                       {product &&
+                        run.is_upgradable &&
                         formatLocalePrice(getFlexiblePriceForProduct(product))}
                     </strong>
                     <>
                       <br />
-                      {product && run.upgrade_deadline ? (
+                      {canUpgrade ? (
                         <span className="text-danger">
                           Payment date:{" "}
                           {formatPrettyDate(moment(run.upgrade_deadline))}
@@ -407,7 +374,7 @@ export class CourseProductDetailEnroll extends React.Component<
                     <button
                       type="submit"
                       className="btn btn-upgrade"
-                      disabled={!product}
+                      disabled={!canUpgrade}
                     >
                       <strong>Enroll and Pay</strong>
                       <br />

frontend/public/src/components/CourseProductDetailEnroll_test.js

@@ -622,6 +622,81 @@ describe("CourseProductDetailEnrollShallowRender", () => {
     )
     assert.isFalse(inner.find("button.btn-upgrade").exists())
   })
+  ;[
+    [false, true],
+    [true, false],
+    [true, true]
+  ].forEach(([isUpgradable, hasProduct]) => {
+    it(`renders enrollment dialog where a run is ${
+      isUpgradable ? "" : "not"
+    } upgradable and has ${hasProduct ? "" : "no"} products`, async () => {
+      const runWithMixedInfo = makeCourseRunDetailWithProduct()
+      runWithMixedInfo["is_upgradable"] = isUpgradable
+      runWithMixedInfo["upgrade_deadline"] = moment().add(11, "M")
+      if (!hasProduct) {
+        runWithMixedInfo["products"] = []
+      }
+      const courseRuns = [courseRun]
+      courseRuns.push(runWithMixedInfo)
+
+      isWithinEnrollmentPeriodStub.returns(true)
+      const { inner } = await renderPage({
+        entities: {
+          courseRuns:  courseRuns,
+          courses:     [course],
+          enrollments: [enrollment],
+          currentUser: currentUser
+        }
+      })
+
+      const enrollBtn = inner.find(".enroll-now").at(0)
+      assert.isTrue(enrollBtn.exists())
+      await enrollBtn.prop("onClick")()
+
+      const modal = inner.find(".upgrade-enrollment-modal")
+      assert.isTrue(modal.find("select.form-control").exists())
+      let upgradeBtnDisabledProp = inner
+        .find("button.btn-upgrade")
+        .at(0)
+        .prop("disabled")
+      assert.isTrue(
+        modal
+          .find("button.enroll-now-free")
+          .at(0)
+          .prop("disabled")
+      )
+      assert.isTrue(upgradeBtnDisabledProp)
+      modal
+        .find("select.form-control")
+        .simulate("change", { target: { value: runWithMixedInfo["id"] } })
+      inner.update()
+      const certPricing = inner.find(".certificate-pricing").at(0)
+      upgradeBtnDisabledProp = inner
+        .find("button.btn-upgrade")
+        .at(0)
+        .prop("disabled")
+      if (isUpgradable && hasProduct) {
+        assert.isFalse(upgradeBtnDisabledProp)
+        assert.isTrue(certPricing.exists())
+        assert.isTrue(
+          certPricing
+            .text()
+            .includes(
+              runWithMixedInfo["upgrade_deadline"].format("MMMM D, YYYY")
+            )
+        )
+      } else {
+        assert.isTrue(upgradeBtnDisabledProp)
+        assert.isTrue(certPricing.text().includes("not available"))
+      }
+      assert.isFalse(
+        inner
+          .find("button.enroll-now-free")
+          .at(0)
+          .prop("disabled")
+      )
+    })
+  })
 
   it("renders the upsell dialog with the correct date if the user has an enrollment in the past that is not upgradeable", async () => {
     const pastCourseRun = makeCourseRunDetail()