Use query parameters when loading checkout page

[noisecapella]

Pre-Flight checklist

• Testing
  • Code is tested
  • Changes have been manually tested

What are the relevant tickets?

Fixes #121

What's this PR do?

Uses query parameters to populate the basket on checkout page load. This will allow links from the catalog pages to the checkout page.

How should this be manually tested?

Go to /checkout/?product_id=123456 where 123456 is a valid ProductVersion id. You should see that page loaded. If you go to ?product_id=123456&code=xyz for a valid coupon code, it should automatically apply the discount and show it on the checkout page.

If you have no query parameters, it should show you whatever your basket looked like previously.

If you have an invalid product id, the page should load with whatever the old basket content was and an error message should be displayed at the bottom of the screen. This is a rare case so the error message won't be more prominent than that.

If you have an invalid coupon code, the page should try again to patch the basket with the given product id from the query parameter and an error message should be displayed at the bottom of the screen, near the coupon code textbox.

[codecov-io]

Codecov Report

Merging #283 into master will increase coverage by 0.08%.
The diff coverage is 100%.

@@            Coverage Diff             @@
##           master     #283      +/-   ##
==========================================
+ Coverage   94.12%   94.21%   +0.08%     
==========================================
  Files         160      160              
  Lines        5400     5458      +58     
  Branches      312      312              
==========================================
+ Hits         5083     5142      +59     
+ Misses        261      260       -1     
  Partials       56       56

Impacted Files	Coverage Δ
static/js/containers/pages/CheckoutPage_test.js	100% <100%> (ø)	⬆️
static/js/lib/ecommerce.js	100% <100%> (ø)	⬆️
static/js/containers/pages/CheckoutPage.js	100% <100%> (+1.44%)	⬆️
static/js/lib/form_test.js	100% <100%> (ø)	⬆️
static/js/lib/form.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 08d7574...1437846. Read the comment docs.

[gsidebo]

One comment off the top: I would rather have multiple test cases with some repeated code than a parametrized test case with this many lines and this many logical paths to reason about

[gsidebo]

...actually I changed my mind. I think this can be cleaned up in a way that makes the parametrization a little more readable and maintainable

describe("mount", () => {
    const productError = "product error",
      couponError = "coupon error",
      couponCode = "codeforcoupon",
      productId = 12345
    let couponPayload,productPayload

    beforeEach(() => {
      couponPayload = {
        body: {coupons: [{code: couponCode}]},
        credentials: undefined,
        headers: {
          "X-CSRFTOKEN": null
        }
      }
      productPayload = {
        body: {items: [{id: productId}]},
        credentials: undefined,
        headers: {
          "X-CSRFTOKEN": null
        }
      }
    })

    //
    ;[
      [true, false, couponError],
      [true, true, null],
      [false, false, productError],
      [false, true, productError]
    ].forEach(
      ([hasValidProductId, hasValidCoupon, expError]) => {
        it(`...`, async () => {
          if (!hasValidProductId) {
            helper.handleRequestStub
              //...
              .returns({
                //...
                body: {
                  errors: productError
                }
              })
          }
          if (!hasValidCoupon) {
            helper.handleRequestStub
              //...
              .returns({
                //...
                body: {
                  errors: couponError
                }
              })
          }
          //...

          assert.equal(
            helper.handleRequestStub.calledWith(
              "/api/basket/",
              "PATCH",
              couponPayload
            ),
            hasValidProductId
          )

          assert.equal(
            inner.state().errors,
            expError
          )
        })
      }
    )
  })

[gsidebo]

If this isn't already possible, can this query/endpoint be rewritten to accept items and coupons in the same call? Executing 2 requests seems unnecessary here

[noisecapella]

This is a little tricky because the behavior we want is to update items then update coupons. If the coupons update fails the items update should still succeed. If both were sent as the same PATCH request and the coupons had a validation error but the items succeeded, I think the proper thing is to not make any changes and return a 400 error with an error message in the payload. What do you think?

[gsidebo]

1. Seems like this logic will be needed outside of ecommerce. Might be better to define it in static/js/lib/form.js, static/js/lib/api.js, etc.
2. A return type should be added to this function
3. This should have some tests, right? Especially since (1) we may end up enforcing some standards around how errors are returned in back end responses, and (2) it's likely that we'll want to make changes to the JSX that this produces
4. If this function can only accept string and Object types, I don't think !errors can ever evaluate to true. We might want to use emptyOrNil if errors can be an empty object, empty string, or null/undefined

[gsidebo]

Looks like there's no nice way to avoid this, but I'm wondering about option 2 in this GH post: enzymejs/enzyme#1587 (comment). If that seems to work, I think I'd prefer it over the wait

[noisecapella]

Ok, I think that's everything

[gsidebo]

This function doesn't exist in lib/ecommerce so this is breaking webpack

[gsidebo]

I'd prefer this if/else be changed to a single assert statement (assert.equal(helper.handleRequestStub.calledWith(...), hasValidProductId)) but you can take or leave that

[gsidebo]

LGTM! 👍