Use query parameters when loading checkout page

package.json

@@ -66,7 +66,7 @@
     "postcss-loader": "^2.0.6",
     "prettier-eslint-cli": "^4.3.2",
     "prop-types": "^15.5.10",
-    "query-string": "^6.4.0",
+    "query-string": "^6.5.0",
     "raf": "^3.4.1",
     "ramda": "^0.26.1",
     "raven-js": "^3.26.4",

static/js/containers/pages/CheckoutPage.js

@@ -2,8 +2,9 @@
 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 {
@@ -63,6 +64,28 @@ 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) {
+      const payload = {
+        items: [{ id: productId }]
+      }
+      const couponCode = params.code
+
+      if (couponCode) {
+        payload.coupons = [{ code: couponCode }]
+      }
+      await this.updateBasket(payload)
+    } else {
+      await fetchBasket()
+    }
+  }
+
   handleErrors = async (responsePromise: Promise<*>) => {
     const response = await responsePromise
     if (response.body.errors) {
@@ -257,15 +280,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)

yarn.lock

@@ -7157,12 +7157,13 @@ query-string@^4.1.0:
     object-assign "^4.1.0"
     strict-uri-encode "^1.0.0"
 
-query-string@^6.4.0:
-  version "6.4.0"
-  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.4.0.tgz#1566c0cec3a2da2d82c222ed3f9e2a921dba5e6a"
-  integrity sha512-Werid2I41/tJTqOGPJ3cC3vwrIh/8ZupBQbp7BSsqXzr+pTin3aMJ/EZb8UEuk7ZO3VqQFvq2qck/ihc6wqIdw==
+query-string@^6.5.0:
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/query-string/-/query-string-6.5.0.tgz#2e1a70125af01f6f04573692d02c09302a1d8bfc"
+  integrity sha512-TYC4hDjZSvVxLMEucDMySkuAS9UIzSbAiYGyA9GWCjLKB8fQpviFbjd20fD7uejCDxZS+ftSdBKE6DS+xucJFg==
   dependencies:
     decode-uri-component "^0.2.0"
+    split-on-first "^1.0.0"
     strict-uri-encode "^2.0.0"
 
 querystring-es3@^0.2.0:
@@ -8324,6 +8325,11 @@ spdx-license-ids@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.3.tgz#81c0ce8f21474756148bbb5f3bfc0f36bf15d76e"
 
+split-on-first@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/split-on-first/-/split-on-first-1.1.0.tgz#f610afeee3b12bce1d0c30425e76398b78249a5f"
+  integrity sha512-43ZssAJaMusuKWL8sKUBQXHWOpq8d6CfN/u1p4gUzfJkM05C8rxTmYrkIPTXapZpORA6LkkzcUulJ8FqA7Uudw==
+
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"