Refactor wrapper/container

packages/venia-concept/src/components/Checkout/__tests__/wrapper.spec.js → packages/venia-concept/src/components/Checkout/__tests__/container.spec.js

@@ -10,8 +10,8 @@ import {
     submitPaymentMethodAndBillingAddress,
     submitShippingMethod
 } from 'src/actions/checkout';
-import ConnectedCheckoutWrapper from '../index';
-import { CheckoutWrapper } from '../wrapper';
+import ConnectedCheckoutContainer from '../index';
+import { CheckoutContainer } from '../container';
 import Flow from '../flow';
 
 jest.mock('src/classify');
@@ -47,10 +47,10 @@ const defaultProps = {
     submitShippingMethod
 };
 
-test('returns a connected CheckoutWrapper component', () => {
-    expect(ConnectedCheckoutWrapper.component).toBeInstanceOf(Function);
-    expect(ConnectedCheckoutWrapper.mapStateToProps).toBeInstanceOf(Function);
-    expect(ConnectedCheckoutWrapper.mapDispatchToProps).toMatchObject({
+test('returns a connected CheckoutContainer component', () => {
+    expect(ConnectedCheckoutContainer.component).toBeInstanceOf(Function);
+    expect(ConnectedCheckoutContainer.mapStateToProps).toBeInstanceOf(Function);
+    expect(ConnectedCheckoutContainer.mapDispatchToProps).toMatchObject({
         beginCheckout,
         cancelCheckout,
         editOrder,
@@ -62,7 +62,7 @@ test('returns a connected CheckoutWrapper component', () => {
 });
 
 test('mapStateToProps correctly maps state to props', () => {
-    const { mapStateToProps } = ConnectedCheckoutWrapper;
+    const { mapStateToProps } = ConnectedCheckoutContainer;
 
     const state = {
         cart: {},
@@ -87,7 +87,7 @@ test('returns a Flow component', () => {
             details: {}
         }
     };
-    const component = testRenderer.create(<CheckoutWrapper {...props} />);
+    const component = testRenderer.create(<CheckoutContainer {...props} />);
 
     expect(() => component.root.findByType(Flow)).not.toThrow();
 });
@@ -103,7 +103,7 @@ test('does not render Flow component if cart/checkout are falsy', () => {
         cart: false,
         checkout: false
     };
-    const component = testRenderer.create(<CheckoutWrapper {...props} />);
+    const component = testRenderer.create(<CheckoutContainer {...props} />);
 
     expect(() => component.root.findByType(Flow)).toThrow();
 });

packages/venia-concept/src/components/Checkout/container.js

@@ -0,0 +1,169 @@
+import React from 'react';
+import { connect } from 'src/drivers';
+import { array, bool, func, object, oneOf, shape, string } from 'prop-types';
+
+import {
+    beginCheckout,
+    cancelCheckout,
+    editOrder,
+    submitShippingAddress,
+    submitOrder,
+    submitPaymentMethodAndBillingAddress,
+    submitShippingMethod
+} from 'src/actions/checkout';
+
+import Flow from './flow';
+
+const hasData = value => !!value;
+const isCartReady = cart => cart.details.items_count > 0;
+const isCheckoutReady = checkout => {
+    const {
+        billingAddress,
+        paymentData,
+        shippingAddress,
+        shippingMethod
+    } = checkout;
+
+    return [billingAddress, paymentData, shippingAddress, shippingMethod].every(
+        hasData
+    );
+};
+
+// TODO: This is exported for testing, but I think we should split this into a
+// separate file entirely and just do the prop/action shaping here in this file.
+export const CheckoutContainer = props => {
+    const {
+        beginCheckout,
+        cancelCheckout,
+        cart,
+        checkout,
+        directory,
+        editOrder,
+        requestOrder,
+        submitShippingAddress,
+        submitOrder,
+        submitPaymentMethodAndBillingAddress,
+        submitShippingMethod,
+        user
+    } = props;
+
+    // ensure state slices are present
+    if (!(cart && checkout)) {
+        return null;
+    }
+
+    const actions = {
+        beginCheckout,
+        cancelCheckout,
+        editOrder,
+        requestOrder,
+        submitShippingAddress,
+        submitOrder,
+        submitPaymentMethodAndBillingAddress,
+        submitShippingMethod
+    };
+
+    const { paymentData, shippingAddress, shippingMethod } = checkout;
+
+    const flowProps = {
+        actions,
+        cart,
+        checkout,
+        directory,
+        user,
+        hasPaymentMethod: hasData(paymentData),
+        hasShippingAddress: hasData(shippingAddress),
+        hasShippingMethod: hasData(shippingMethod),
+        isCartReady: isCartReady(cart),
+        isCheckoutReady: isCheckoutReady(checkout)
+    };
+
+    return <Flow {...flowProps} />;
+};
+
+CheckoutContainer.propTypes = {
+    beginCheckout: func,
+    cancelCheckout: func,
+    cart: shape({
+        details: object.isRequired,
+        cartId: string,
+        totals: object
+    }).isRequired,
+    checkout: shape({
+        availableShippingMethods: array,
+        billingAddress: shape({
+            city: string,
+            country_id: string,
+            email: string,
+            firstname: string,
+            lastname: string,
+            postcode: string,
+            region_id: string,
+            region_code: string,
+            region: string,
+            street: array,
+            telephone: string
+        }),
+        editing: oneOf(['address', 'paymentMethod', 'shippingMethod']),
+        incorrectAddressMessage: string,
+        isAddressIncorrect: bool,
+        paymentCode: string,
+        paymentData: shape({
+            description: string,
+            details: shape({
+                cardType: string
+            }),
+            nonce: string
+        }),
+        shippingAddress: shape({
+            city: string,
+            country_id: string,
+            email: string,
+            firstname: string,
+            lastname: string,
+            postcode: string,
+            region_id: string,
+            region_code: string,
+            region: string,
+            street: array,
+            telephone: string
+        }),
+        shippingMethod: string,
+        shippingTitle: string,
+        step: oneOf(['cart', 'form', 'receipt']).isRequired,
+        submitting: bool.isRequired
+    }),
+    directory: shape({
+        countries: array
+    }),
+    editOrder: func,
+    submitShippingAddress: func,
+    submitOrder: func,
+    submitPaymentMethodAndBillingAddress: func,
+    submitShippingMethod: func,
+    user: shape({
+        isSignedIn: bool
+    })
+};
+
+const mapStateToProps = ({ cart, checkout, directory, user }) => ({
+    cart,
+    checkout,
+    directory,
+    user
+});
+
+const mapDispatchToProps = {
+    beginCheckout,
+    cancelCheckout,
+    editOrder,
+    submitShippingAddress,
+    submitOrder,
+    submitPaymentMethodAndBillingAddress,
+    submitShippingMethod
+};
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(CheckoutContainer);

packages/venia-concept/src/components/Checkout/index.js

@@ -1 +1 @@
-export { default } from './wrapper';
+export { default } from './container';