Finish order confirmation page (#401)

* Add ability to pass initial values to create account * Prefill create account after order confirmation * Add tests
magento · Nov 13, 2018 · 1fbbf74 · 1fbbf74
1 parent 2650c5d
commit 1fbbf74
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 47 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/venia-concept/src/components/Button/darkTheme.css b/packages/venia-concept/src/components/Button/darkTheme.css
@@ -8,7 +8,7 @@
     font-weight: 600;
     line-height: 14px;
     height: 3rem;
-    min-width: 8.75rem;
+    min-width: 180px;
     padding: 0 1.5rem;
     transition: opacity 256ms linear;
 }
diff --git a/packages/venia-concept/src/components/Button/darkTheme.js b/packages/venia-concept/src/components/Button/darkTheme.js
diff --git a/packages/venia-concept/src/components/Button/index.js b/packages/venia-concept/src/components/Button/index.js
@@ -1,2 +1,4 @@
+import darkThemeClasses from './darkTheme.css';
+
 export { default } from './button';
-export { darkThemeClasses } from './darkTheme';
+export { darkThemeClasses };
diff --git a/packages/venia-concept/src/components/Checkout/Receipt/__tests__/receipt.spec.js b/packages/venia-concept/src/components/Checkout/Receipt/__tests__/receipt.spec.js
@@ -1,16 +1,17 @@
 import React from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import Receipt from '../receipt';
 import Button from 'src/components/Button';
+import Receipt, {
+    CREATE_ACCOUNT_BUTTON_ID,
+    CONTINUE_SHOPPING_BUTTON_ID
+} from '../receipt';
 
 configure({ adapter: new Adapter() });
 
 const classes = {
     header: 'header',
-    textBlock: 'textBlock',
-    resetCheckoutButtonClasses: {},
-    createAccountButtonClasses: {}
+    textBlock: 'textBlock'
 };
 
 test('renders correctly', () => {
@@ -21,20 +22,20 @@ test('renders correctly', () => {
     expect(wrapper.find(Button)).toHaveLength(2);
 });
 
-test('calls `resetCheckout` when `Continue Shopping` button is pressed', () => {
-    const resetCheckout = jest.fn();
+test('calls `handleContinueShopping` when `Continue Shopping` button is pressed', () => {
+    const handleContinueShoppingMock = jest.fn();
 
     const wrapper = shallow(
-        <Receipt resetCheckout={resetCheckout} classes={classes} />
+        <Receipt
+            handleContinueShopping={handleContinueShoppingMock}
+            classes={classes}
+        />
     ).dive();
     wrapper
-        .find(Button)
-        .findWhere(
-            el => el.props().classes === classes.resetCheckoutButtonClasses
-        )
+        .findWhere(el => el.prop('data-id') === CONTINUE_SHOPPING_BUTTON_ID)
         .first()
         .simulate('click');
-    expect(resetCheckout).toBeCalled();
+    expect(handleContinueShoppingMock).toBeCalled();
 });
 
 test('calls `handleCreateAccount` when `Create an Account` button is pressed', () => {
@@ -48,12 +49,21 @@ test('calls `handleCreateAccount` when `Create an Account` button is pressed', (
     ).dive();
 
     wrapper
-        .find(Button)
-        .findWhere(
-            el => el.props().classes === classes.createAccountButtonClasses
-        )
+        .findWhere(el => el.prop('data-id') === CREATE_ACCOUNT_BUTTON_ID)
         .first()
         .simulate('click');
 
     expect(handleCreateAccountMock).toBeCalled();
 });
+
+test('calls `reset` when component was unmounted', () => {
+    const resetHandlerMock = jest.fn();
+
+    const wrapper = shallow(
+        <Receipt reset={resetHandlerMock} classes={classes} />
+    ).dive();
+
+    wrapper.unmount();
+
+    expect(resetHandlerMock).toBeCalled();
+});
diff --git a/packages/venia-concept/src/components/Checkout/Receipt/__tests__/selectors.spec.js b/packages/venia-concept/src/components/Checkout/Receipt/__tests__/selectors.spec.js
@@ -1,4 +1,4 @@
-import { getOrderInformation } from '../selectors';
+import { getOrderInformation, getAccountInformation } from '../selectors';
 
 test('getOrderInformation returns order', () => {
     const order = { id: 1, billing_address: {} };
@@ -10,3 +10,26 @@ test('getOrderInformation returns order', () => {
 
     expect(getOrderInformation(state)).toEqual(order);
 });
+
+test('getAccountInformation returns account information', () => {
+    const email = 'test@example.com';
+    const firstName = 'First Name';
+    const lastName = 'Last Name';
+    const state = {
+        checkoutReceipt: {
+            order: {
+                billing_address: {
+                    email,
+                    firstname: firstName,
+                    lastname: lastName
+                }
+            }
+        }
+    };
+
+    expect(getAccountInformation(state)).toEqual({
+        email,
+        firstName,
+        lastName
+    });
+});
diff --git a/packages/venia-concept/src/components/Checkout/Receipt/asyncActions.js b/packages/venia-concept/src/components/Checkout/Receipt/asyncActions.js
@@ -0,0 +1,16 @@
+import { resetCheckout } from 'src/actions/checkout/asyncActions';
+import { getAccountInformation } from './selectors';
+
+export const handleCreateAccount = history => async (dispatch, getState) => {
+    const accountInfo = getAccountInformation(getState());
+
+    await dispatch(resetCheckout());
+
+    history.push(`/create-account?${new URLSearchParams(accountInfo)}`);
+};
+
+export const handleContinueShopping = history => async dispatch => {
+    await dispatch(resetCheckout());
+
+    history.push('/');
+};
diff --git a/packages/venia-concept/src/components/Checkout/Receipt/receipt.css b/packages/venia-concept/src/components/Checkout/Receipt/receipt.css
@@ -1,17 +1,17 @@
 .root {
     background-color: white;
-    bottom: 0;
     display: grid;
     grid-template-rows: 1fr auto;
     height: 100vh;
     left: 0;
     padding-top: 3.5rem;
     position: absolute;
     right: 0;
+    bottom: 0;
 }
 
 .body {
-    padding: 20px 32px 16px;
+    padding: 20px 1rem 16px;
 }
 
 .footer {

diff --git a/packages/venia-concept/src/components/Checkout/Receipt/receipt.js b/packages/venia-concept/src/components/Checkout/Receipt/receipt.js
@@ -2,13 +2,10 @@ import React, { Component } from 'react';
 import { func, shape, string } from 'prop-types';
 import classify from 'src/classify';
 import Button, { darkThemeClasses } from 'src/components/Button';
-import defaultCssClasses from './receipt.css';
+import defaultClasses from './receipt.css';
 
-const defaultClasses = {
-    ...defaultCssClasses,
-    resetCheckoutButtonClasses: darkThemeClasses,
-    createAccountButtonClasses: darkThemeClasses
-};
+export const CONTINUE_SHOPPING_BUTTON_ID = 'continue-shopping-button';
+export const CREATE_ACCOUNT_BUTTON_ID = 'create-account-button';
 
 class Receipt extends Component {
     static propTypes = {
@@ -17,28 +14,36 @@ class Receipt extends Component {
             footer: string,
             root: string
         }),
-        resetCheckout: func,
+        handleContinueShopping: func,
         order: shape({
             id: string
         }),
-        handleCreateAccount: func
+        handleCreateAccount: func,
+        reset: func
     };
 
     static defaultProps = {
         order: {},
         resetCheckout: () => {},
+        reset: () => {},
         handleCreateAccount: () => {}
     };
 
     componentWillUnmount() {
         this.props.reset();
     }
 
+    createAccount = () => {
+        this.props.handleCreateAccount(this.props.history);
+    };
+
+    continueShopping = () => {
+        this.props.handleContinueShopping(this.props.history);
+    };
+
     render() {
         const {
             classes,
-            resetCheckout,
-            handleCreateAccount,
             order: { id }
         } = this.props;
 
@@ -56,8 +61,9 @@ class Receipt extends Component {
                         tracking info
                     </div>
                     <Button
-                        classes={classes.resetCheckoutButtonClasses}
-                        onClick={resetCheckout}
+                        data-id={CONTINUE_SHOPPING_BUTTON_ID}
+                        classes={darkThemeClasses}
+                        onClick={this.continueShopping}
                     >
                         Continue Shopping
                     </Button>
@@ -66,8 +72,9 @@ class Receipt extends Component {
                         creating and account.
                     </div>
                     <Button
-                        classes={classes.createAccountButtonClasses}
-                        onClick={handleCreateAccount}
+                        data-id={CREATE_ACCOUNT_BUTTON_ID}
+                        classes={darkThemeClasses}
+                        onClick={this.createAccount}
                     >
                         Create an Account
                     </Button>

diff --git a/packages/venia-concept/src/components/Checkout/Receipt/receiptContainer.js b/packages/venia-concept/src/components/Checkout/Receipt/receiptContainer.js
@@ -1,12 +1,17 @@
 import { connect } from 'react-redux';
-import { resetCheckout } from 'src/actions/checkout';
+import { compose } from 'redux';
+import { withRouter } from 'react-router-dom';
 import actions from './actions';
+import { handleCreateAccount, handleContinueShopping } from './asyncActions';
 import Receipt from './receipt';
 import { getOrderInformation } from './selectors';
 
 const { reset } = actions;
 
-export default connect(
-    state => ({ order: getOrderInformation(state) }),
-    { resetCheckout, reset }
+export default compose(
+    connect(
+        state => ({ order: getOrderInformation(state) }),
+        { handleContinueShopping, reset, handleCreateAccount }
+    ),
+    withRouter
 )(Receipt);
diff --git a/packages/venia-concept/src/components/Checkout/Receipt/selectors.js b/packages/venia-concept/src/components/Checkout/Receipt/selectors.js
@@ -1 +1,13 @@
 export const getOrderInformation = ({ checkoutReceipt: { order } }) => order;
+
+export const getAccountInformation = ({
+    checkoutReceipt: {
+        order: {
+            billing_address: {
+                email,
+                firstname: firstName,
+                lastname: lastName
+            } = {}
+        }
+    }
+}) => ({ email, firstName, lastName });