Fix coupon apply button bug

static/js/containers/pages/CheckoutPage.js

@@ -1,6 +1,6 @@
 // @flow
 import React from "react"
-import * as R from "ramda"
+import { curry } from "ramda"
 import { connect } from "react-redux"
 import { connectRequest, mutateAsync } from "redux-query"
 import { compose } from "redux"
@@ -117,7 +117,7 @@ export class CheckoutPage extends React.Component<Props, State> {
     })
   }
 
-  updateSelectedRun = R.curry((courseId: number, event: any) => {
+  updateSelectedRun = curry((courseId: number, event: any) => {
     const { selectedRuns } = this.state
     const runId = parseInt(event.target.value)
     this.setState({
@@ -128,9 +128,31 @@ export class CheckoutPage extends React.Component<Props, State> {
     })
   })
 
+  getCouponCode = (): string => {
+    const { basket } = this.props
+    const { couponCode } = this.state
+
+    if (couponCode !== null) {
+      return couponCode
+    }
+    if (!basket) {
+      return ""
+    }
+
+    const item = basket.items[0]
+    if (!item) {
+      return ""
+    }
+
+    const coupon = basket.coupons.find(coupon =>
+      coupon.targets.includes(item.id)
+    )
+    return (coupon && coupon.code) || ""
+  }
+
   submitCoupon = async (e: Event) => {
     const { updateBasket } = this.props
-    const { couponCode } = this.state
+    const couponCode = this.getCouponCode()
 
     e.preventDefault()
 
@@ -244,11 +266,7 @@ export class CheckoutPage extends React.Component<Props, State> {
                   <input
                     type="text"
                     className={errors ? "error-border" : ""}
-                    value={
-                      (couponCode !== null
-                        ? couponCode
-                        : coupon && coupon.code) || ""
-                    }
+                    value={this.getCouponCode()}
                     onChange={this.updateCouponCode}
                   />
                   <button

static/js/containers/pages/CheckoutPage_test.js

@@ -153,6 +153,21 @@ describe("CheckoutPage", () => {
     })
   })
 
+  it("submits the coupon code currently in the basket if there is none in the state", async () => {
+    const { inner } = await renderPage()
+    const code = basket.coupons[0].code
+    await inner.find(".apply-button").prop("onClick")({
+      preventDefault: helper.sandbox.stub()
+    })
+    sinon.assert.calledWith(helper.handleRequestStub, "/api/basket/", "PATCH", {
+      body:        { coupons: [{ code: code }] },
+      credentials: undefined,
+      headers:     {
+        "X-CSRFTOKEN": null
+      }
+    })
+  })
+
   it("tries to submit the coupon code but receives an error message", async () => {
     const { inner } = await renderPage()
     const errors = "Unknown error"