Use query parameters when loading checkout page

static/js/containers/pages/CheckoutPage.js

@@ -2,19 +2,22 @@
 import React from "react"
 import * as R from "ramda"
 import { connect } from "react-redux"
-import { connectRequest, mutateAsync } from "redux-query"
+import { mutateAsync, requestAsync } from "redux-query"
 import { compose } from "redux"
+import queryString from "query-string"
 
 import queries from "../../lib/queries"
 import {
   calculateDiscount,
   calculatePrice,
   formatPrice,
-  formatRunTitle
+  formatRunTitle,
+  formatErrors
 } from "../../lib/ecommerce"
 import { createCyberSourceForm } from "../../lib/form"
 
 import type { Response } from "redux-query"
+import type { Location } from "react-router"
 import type {
   BasketResponse,
   BasketPayload,
@@ -50,6 +53,8 @@ export const calcSelectedRunIds = (item: BasketItem): { [number]: number } => {
 type Props = {
   basket: ?BasketResponse,
   checkout: () => Promise<Response<CheckoutResponse>>,
+  fetchBasket: () => Promise<*>,
+  location: Location,
   updateBasket: (payload: BasketPayload) => Promise<*>
 }
 type State = {
@@ -64,6 +69,26 @@ export class CheckoutPage extends React.Component<Props, State> {
     errors:       null
   }
 
+  componentDidMount = async () => {
+    const {
+      fetchBasket,
+      location: { search }
+    } = this.props
+    const params = queryString.parse(search)
+    const productId = parseInt(params.product)
+    if (!productId) {
+      await fetchBasket()
+      return
+    }
+
+    await this.updateBasket({ items: [{ id: productId }] })
+
+    const couponCode = params.code
+    if (couponCode) {
+      await this.updateBasket({ coupons: [{ code: couponCode }] })
+    }
+  }
+
   handleErrors = async (responsePromise: Promise<*>) => {
     const response = await responsePromise
     if (response.body.errors) {
@@ -202,13 +227,14 @@ export class CheckoutPage extends React.Component<Props, State> {
     const { basket } = this.props
     const { couponCode, errors } = this.state
 
-    if (!basket) {
-      return null
-    }
-
-    const item = basket.items[0]
-    if (!item) {
-      return <div>No item in basket</div>
+    const item = basket && basket.items[0]
+    if (!basket || !item) {
+      return (
+        <div className="checkout-page">
+          No item in basket
+          {formatErrors(errors)}
+        </div>
+      )
     }
 
     const coupon = basket.coupons.find(coupon =>
@@ -259,7 +285,7 @@ export class CheckoutPage extends React.Component<Props, State> {
                     Apply
                   </button>
                 </div>
-                {errors ? <div className="error">Error: {errors}</div> : null}
+                {formatErrors(errors)}
               </form>
             </div>
           </div>
@@ -302,15 +328,14 @@ const mapStateToProps = state => ({
 })
 const mapDispatchToProps = dispatch => ({
   checkout:     () => dispatch(mutateAsync(queries.ecommerce.checkoutMutation())),
+  fetchBasket:  () => dispatch(requestAsync(queries.ecommerce.basketQuery())),
   updateBasket: payload =>
     dispatch(mutateAsync(queries.ecommerce.basketMutation(payload)))
 })
-const mapPropsToConfigs = () => [queries.ecommerce.basketQuery()]
 
 export default compose(
   connect(
     mapStateToProps,
     mapDispatchToProps
-  ),
-  connectRequest(mapPropsToConfigs)
+  )
 )(CheckoutPage)

static/js/containers/pages/CheckoutPage_test.js

@@ -36,7 +36,9 @@ describe("CheckoutPage", () => {
           basket
         }
       },
-      {}
+      {
+        location: {}
+      }
     )
   })
 
@@ -167,10 +169,7 @@ describe("CheckoutPage", () => {
     })
 
     assert.equal(inner.state().errors, errors)
-    assert.equal(
-      inner.find(".enrollment-input .error").text(),
-      "Error: Unknown error"
-    )
+    assert.equal(inner.find(".enrollment-input .error").text(), "Unknown error")
     assert.isTrue(inner.find(".enrollment-input input.error-border").exists())
   })
 

static/js/lib/ecommerce.js

@@ -1,4 +1,5 @@
 // @flow
+import React from "react"
 import Decimal from "decimal.js-light"
 import * as R from "ramda"
 import { equals } from "ramda"
@@ -57,6 +58,24 @@ const formatDateForRun = (dateString: ?string) =>
 export const formatRunTitle = (run: CourseRun) =>
   `${formatDateForRun(run.start_date)} - ${formatDateForRun(run.end_date)}`
 
+export const formatErrors = (errors: string | Object) => {
+  if (!errors) {
+    return null
+  }
+
+  let errorString
+  if (typeof errors === "object") {
+    if (errors.items) {
+      errorString = errors.items[0]
+    } else {
+      errorString = errors[0]
+    }
+  } else {
+    errorString = errors
+  }
+  return <div className="error">{errorString}</div>
+}
+
 export const isPromo = equals(COUPON_TYPE_PROMO)
 
 export const createProductMap = (