Update checkout to support multiple payments

[aldeed]

Impact: breaking
Type: feature

Blocked from merging by reactioncommerce/reaction-component-library#388

Requires reactioncommerce/reaction#4908 for the connected API changes.

Changes

Wires up the new components introduced in reactioncommerce/reaction-component-library#388. NOTE: They are temporarily copied into starter kit. No need to review the component files here because they are identical to what is in the component library PR. After that is released, this PR will be updated to reference the four new components from the library.

Also updates the checkout and checkout complete pages for all of the breaking data changes introduced by reactioncommerce/reaction#4908.

Breaking changes

The app is updated to expect the API responses in the breaking API PR: introduced by reactioncommerce/reaction#4908 Placing an order will no longer work against APIs that don't have those changes.

Testing

1. Verify that you can place an order with a single credit card payment as before.
2. Remove the example IOU payment method from paymentMethods array and verify that the checkout looks and works pretty much as it did before this PR.
3. Try placing an order paying with an IOU, specifying no amount. It should place the order paying for the full amount with IOU
4. Try placing an order paying with an IOU for a partial amount. You should see the partial payment appear and the payment form should remain open. Add a second IOU or credit card payment for the remainder. Verify that the order is placed.
5. Try paying with a payment method that you have disabled on the server side. Verify that you get an error message when placing the order.
6. Verify that orders with multiple payments look correct on the order completion page.
7. With the single-payment and multiple-payment orders, thoroughly test the order summary panel in the operator UI. Try variations on approving, capturing, and refunding payments, and canceling the whole order. All of this code has changed or has been moved.
8. Verify that bulk order operations in the operator UI work properly with multi-payment orders.

[kieckhafer]

reactioncommerce/reaction-component-library#388 has been merged into the component library. This PR can be updated to use those components rather than the copied over versions.

The new component library version (at the time of this comment) is 0.61.0

[kieckhafer]

This isn't essential to this PR, so I've created a placeholder ticket that will be expanded upon: #478

I added a separate billing address to be used with my payment. The separate address is not displayed anywhere in the checkout or order confirmation page. It should probably display inside the billing step of the checkout.

[kieckhafer]

In the starterkit UI, I still see all the payment methods that have been disabled using the operator UI. I have confirmed they are disabled in Mongo.

In this example, I have disabled the IOU method, but the same thing happens with the Stripe method as well.

You can still select the disabled method, and then you get this message when trying to complete checkout:

However, when I select IOU and try to check out with it, I get a message saying it's not enabled:

In the core PR (reactioncommerce/reaction#4908), there is a line that states the checkboxes were ignored, however there was nothing stating the method enable/disable was ignored: "The payment method settings for "supports" (capture, de-auth, etc.) are no longer respected and the check boxes have been removed from the operator UI"

[kieckhafer]

When multiple payments are all IOU's (no credit card to take remaining balance), the sum of all payments seems to be off my $.01 (one cent). If my multiple payments add up to be the exact order total, I need to add an additional payment for $.01 in order for the UI to "click" and the next step to be allowed.

However, once I add that extra payment of $.01, the UI shows that it's actually $.00.

My guess is that there is a > where there should be a >= somewhere in the code.

[kieckhafer]

When making multiple payments, we need to show the amounts of each payment on the order confirmation page:

[aldeed]

@kieckhafer I opted not to alter the checkout UI based on enabled/disabled. See #370 (comment)

If you think this is confusing, I could make it respect the server setting. It's one additional query that doesn't seem necessary. You would always need client UI code changes deployed to add a payment method, so it wouldn't help in that case. The only benefit might be to temporarily disable one that you've implemented or eventually the list could potentially be different based on if you're a member or not or something similar. I guess I'm kind of on the fence. It's tempting to add it just to avoid confusion, but extra queries slow things down and cost money.

I will fix the other bugs you found.

[aldeed]

@kieckhafer All issues you pointed out are fixed. I did decide to make it query and respect the enabled payment methods list from the API, too.

[kieckhafer]

All changes look good, but they may have had a ripple effect that causes this new issue.

I don't know if this is an issue for this PR, as you should have a payment method active if you have a show, however, if I turn off all available payment methods, I get a blank screen with just a console message:

[kieckhafer]

Checkout page loads when no payment methods are available.

However, there is a warning that appears now when we get to the payment section. I don't think this is a blocker, but just wanted you to be aware before this is merged:

index.js:2178 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `CheckoutActions`.
    in NoPaymentMethodsMessage (created by CheckoutActions)
    in div (created by CheckoutAction)
    in CheckoutAction (created by CheckoutActions)
    in div (created by CheckoutActions__Action)
    in CheckoutActions__Action (created by CheckoutActions)
    in div (created by CheckoutActions)
    in CheckoutActions
    in CheckoutActions (created by WithTracking(CheckoutActions))
    in WithTracking(CheckoutActions) (at withAddressValidation.js:72)
    in WithAddressValidation (created by inject-WithAddressValidation-with-primaryShopId)
    in inject-WithAddressValidation-with-primaryShopId (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(inject-WithAddressValidation-with-primaryShopId))
    in withApollo(inject-WithAddressValidation-with-primaryShopId) (at checkout.js:339)
    in div (at checkout.js:335)
    in div (at checkout.js:334)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at checkout.js:333)
    in div (created by Grid)
    in Grid (created by WithStyles(Grid))
    in WithStyles(Grid) (at checkout.js:332)
    in div (at checkout.js:331)
    in div (at checkout.js:330)
    in Checkout (created by WithStyles(Checkout))
    in WithStyles(Checkout) (at withAvailablePaymentMethods.js:36)
    in Query (at withAvailablePaymentMethods.js:31)
    in WithAvailablePaymentMethods (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(WithAvailablePaymentMethods))
    in withApollo(WithAvailablePaymentMethods) (at withCart.js:432)
    in Mutation (at withCart.js:417)
    in Query (at withCart.js:391)
    in WithCart (created by inject-WithCart-with-cartStore-authStore)
    in inject-WithCart-with-cartStore-authStore (at withShop.js:31)
    in Provider (at withShop.js:30)
    in Query (at withShop.js:23)
    in Query (at withShop.js:18)
    in Shop (created by ApolloConsumer)
    in ApolloConsumer (created by withApollo(Shop))
    in withApollo(Shop) (at _app.js:89)
    in Provider (at _app.js:88)
    in MuiThemeProvider (at _app.js:85)
    in ThemeProvider (at _app.js:84)
    in JssProvider (at _app.js:80)
    in Provider (at _app.js:79)
    in Container (at _app.js:77)
    in App (created by WithTracking(App))
    in WithTracking(App) (at withViewer.js:35)
    in Query (at withViewer.js:28)
    in WithViewer (created by inject-WithViewer-with-authStore)
    in inject-WithViewer-with-authStore (at withShop.js:31)
    in Provider (at withShop.js:30)
    in Query (at withShop.js:23)
    in Query (at withShop.js:18)
    in Shop (at withMobX.js:17)
    in Provider (at withMobX.js:16)
    in WithMobX (at withApolloClient.js:127)
    in ApolloProvider (at withApolloClient.js:126)
    in WithApolloClient(WithMobX)

I've created this issue to fix after this is merged: #484

[kieckhafer]

Changes look good! One small issue, but it's not a blocker, I've created a new ticket for the fix.