[bug]: Incorrect Order Id Displayed - Replacing functionality

packages/venia-concept/src/actions/checkout/asyncActions.js

@@ -280,12 +280,6 @@ export const createAccount = history => async (dispatch, getState) => {
     history.push(`/create-account?${new URLSearchParams(accountInfo)}`);
 };
 
-export const continueShopping = history => async dispatch => {
-    await dispatch(resetCheckout());
-
-    history.push('/');
-};
-
 /* helpers */
 
 export function formatAddress(address = {}, countries = []) {

packages/venia-concept/src/components/Checkout/Receipt/__tests__/__snapshots__/receipt.spec.js.snap

@@ -15,28 +15,10 @@ exports[`renders a Receipt component correctly 1`] = `
     <div
       className="textBlock"
     >
-      Your order # is
-
-      <span
-        className="orderId"
-      >
-        123
-      </span>
+      You will receive an order confirmation email with order status and other details.
       <br />
-      We’ll email you an order confirmation with details and tracking info
     </div>
-    <button
-      className="root_normalPriority"
-      data-id="continue-shopping-button"
-      onClick={[Function]}
-      type="button"
-    >
-      <span
-        className="content"
-      >
-        Continue Shopping
-      </span>
-    </button>
+    <hr />
     <div
       className="textBlock"
     >

packages/venia-concept/src/components/Checkout/Receipt/__tests__/receipt.spec.js

@@ -1,10 +1,9 @@
 import React from 'react';
-import testRenderer from 'react-test-renderer';
+import testRenderer, { act } from 'react-test-renderer';
+import { createTestInstance } from '@magento/peregrine';
 import { shallow } from 'enzyme';
-import Receipt, {
-    CREATE_ACCOUNT_BUTTON_ID,
-    CONTINUE_SHOPPING_BUTTON_ID
-} from '../receipt';
+
+import Receipt, { CREATE_ACCOUNT_BUTTON_ID } from '../receipt';
 
 const classes = {
     header: 'header',
@@ -17,7 +16,6 @@ const userProp = { isSignedIn: false };
 
 test('renders a Receipt component correctly', () => {
     const props = {
-        continueShopping: jest.fn(),
         order: { id: '123' },
         createAccount: jest.fn(),
         reset: jest.fn(),
@@ -29,23 +27,6 @@ test('renders a Receipt component correctly', () => {
     expect(component.toJSON()).toMatchSnapshot();
 });
 
-test('calls `handleContinueShopping` when `Continue Shopping` button is pressed', () => {
-    const handleContinueShoppingMock = jest.fn();
-
-    const wrapper = shallow(
-        <Receipt
-            continueShopping={handleContinueShoppingMock}
-            classes={classes}
-            user={userProp}
-        />
-    ).dive();
-    wrapper
-        .findWhere(el => el.prop('data-id') === CONTINUE_SHOPPING_BUTTON_ID)
-        .first()
-        .simulate('click');
-    expect(handleContinueShoppingMock).toBeCalled();
-});
-
 test('calls `handleCreateAccount` when `Create an Account` button is pressed', () => {
     const handleCreateAccountMock = jest.fn();
 
@@ -55,7 +36,7 @@ test('calls `handleCreateAccount` when `Create an Account` button is pressed', (
             classes={classes}
             user={userProp}
         />
-    ).dive();
+    );
 
     wrapper
         .findWhere(el => el.prop('data-id') === CREATE_ACCOUNT_BUTTON_ID)
@@ -68,11 +49,13 @@ test('calls `handleCreateAccount` when `Create an Account` button is pressed', (
 test('calls `reset` when component was unmounted', () => {
     const resetHandlerMock = jest.fn();
 
-    const wrapper = shallow(
+    const instance = createTestInstance(
         <Receipt reset={resetHandlerMock} classes={classes} user={userProp} />
-    ).dive();
+    );
 
-    wrapper.unmount();
+    act(() => {
+        instance.unmount();
+    });
 
     expect(resetHandlerMock).toBeCalled();
 });

packages/venia-concept/src/components/Checkout/Receipt/__tests__/receiptContainer.spec.js

@@ -1,5 +1,5 @@
 import actions from 'src/actions/checkoutReceipt';
-import { continueShopping, createAccount } from 'src/actions/checkout';
+import { createAccount } from 'src/actions/checkout';
 import Container from '../receiptContainer';
 import Receipt from '../receipt';
 
@@ -24,7 +24,6 @@ test('returns a connected Receipt component', () => {
     expect(Container.component).toBe(Receipt);
     expect(Container.mapStateToProps).toBeInstanceOf(Function);
     expect(Container.mapDispatchToProps).toMatchObject({
-        continueShopping,
         createAccount,
         reset: actions.reset
     });

packages/venia-concept/src/components/Checkout/Receipt/receipt.js

@@ -1,93 +1,100 @@
-import React, { Component, Fragment } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { bool, func, shape, string } from 'prop-types';
-import classify from 'src/classify';
+import { mergeClasses } from 'src/classify';
 import Button from 'src/components/Button';
 import defaultClasses from './receipt.css';
 
-export const CONTINUE_SHOPPING_BUTTON_ID = 'continue-shopping-button';
+export const VIEW_ORDER_DETAILS_BUTTON_ID = 'view-order-details-button';
 export const CREATE_ACCOUNT_BUTTON_ID = 'create-account-button';
 
-class Receipt extends Component {
-    static propTypes = {
-        classes: shape({
-            body: string,
-            footer: string,
-            root: string
-        }),
-        continueShopping: func.isRequired,
-        order: shape({
-            id: string
-        }).isRequired,
-        createAccount: func.isRequired,
-        reset: func.isRequired,
-        user: shape({
-            isSignedIn: bool
-        })
-    };
+const Receipt = props => {
+    const { createAccount, history, order, reset, user } = props;
 
-    static defaultProps = {
-        order: {},
-        continueShopping: () => {},
-        reset: () => {},
-        createAccount: () => {}
-    };
+    const classes = mergeClasses(defaultClasses, props.classes);
 
-    componentWillUnmount() {
-        this.props.reset();
-    }
-
-    createAccount = () => {
-        this.props.createAccount(this.props.history);
-    };
+    useEffect(() => reset, [reset]);
 
-    continueShopping = () => {
-        this.props.continueShopping(this.props.history);
-    };
+    const handleCreateAccount = useCallback(() => {
+        createAccount(history);
+    }, [createAccount, history]);
 
-    render() {
-        const {
-            classes,
-            order: { id },
-            user
-        } = this.props;
+    const handleViewOrderDetails = useCallback(() => {
+        // TODO: Implement/connect/redirect to order details page.
+    }, [order]);
 
+    if (user.isSignedIn) {
+        return (
+            <div className={classes.root}>
+                <div className={classes.body}>
+                    <h2 className={classes.header}>
+                        Thank you for your purchase!
+                    </h2>
+                    <div className={classes.textBlock}>
+                        You will receive an order confirmation email with order
+                        status and other details.
+                        <br />
+                        You can also visit your account page for more
+                        information.
+                    </div>
+                    <Button
+                        data-id={VIEW_ORDER_DETAILS_BUTTON_ID}
+                        onClick={handleViewOrderDetails}
+                    >
+                        View Order Details
+                    </Button>
+                </div>
+            </div>
+        );
+    } else {
         return (
             <div className={classes.root}>
                 <div className={classes.body}>
                     <h2 className={classes.header}>
                         Thank you for your purchase!
                     </h2>
                     <div className={classes.textBlock}>
-                        Your order # is{' '}
-                        <span className={classes.orderId}>{id}</span>
+                        You will receive an order confirmation email with order
+                        status and other details.
                         <br />
-                        We&rsquo;ll email you an order confirmation with details
-                        and tracking info
+                    </div>
+                    <hr />
+                    <div className={classes.textBlock}>
+                        Track order status and earn rewards for your purchase by
+                        creating and account.
                     </div>
                     <Button
-                        data-id={CONTINUE_SHOPPING_BUTTON_ID}
-                        onClick={this.continueShopping}
+                        data-id={CREATE_ACCOUNT_BUTTON_ID}
+                        priority="high"
+                        onClick={handleCreateAccount}
                     >
-                        Continue Shopping
+                        Create an Account
                     </Button>
-                    {!user.isSignedIn && (
-                        <Fragment>
-                            <div className={classes.textBlock}>
-                                Track order status and earn rewards for your
-                                purchase by creating and account.
-                            </div>
-                            <Button
-                                data-id={CREATE_ACCOUNT_BUTTON_ID}
-                                priority="high"
-                                onClick={this.createAccount}
-                            >
-                                Create an Account
-                            </Button>
-                        </Fragment>
-                    )}
                 </div>
             </div>
         );
     }
-}
-export default classify(defaultClasses)(Receipt);
+};
+
+Receipt.propTypes = {
+    classes: shape({
+        body: string,
+        footer: string,
+        root: string
+    }),
+    order: shape({
+        id: string
+    }).isRequired,
+    createAccount: func.isRequired,
+    reset: func.isRequired,
+    user: shape({
+        isSignedIn: bool
+    })
+};
+
+Receipt.defaultProps = {
+    order: {},
+    reset: () => {},
+    createAccount: () => {}
+};
+
+export default Receipt;

packages/venia-concept/src/components/Checkout/Receipt/receiptContainer.js

@@ -1,7 +1,7 @@
 import { connect, withRouter } from 'src/drivers';
 import { compose } from 'redux';
 import actions from 'src/actions/checkoutReceipt';
-import { continueShopping, createAccount } from 'src/actions/checkout';
+import { createAccount } from 'src/actions/checkout';
 import Receipt from './receipt';
 import { getOrderInformation } from 'src/selectors/checkoutReceipt';
 
@@ -12,7 +12,6 @@ const mapStateToProps = state => ({
 });
 
 const mapDispatchToProps = {
-    continueShopping,
     createAccount,
     reset
 };

yarn.lock

@@ -8071,14 +8071,6 @@ graphql-cli-prepare@1.4.19:
     graphql-static-binding "0.9.3"
     lodash "4.17.5"
 
-graphql-cli-validate-magento-pwa-queries@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/graphql-cli-validate-magento-pwa-queries/-/graphql-cli-validate-magento-pwa-queries-1.0.0.tgz#d50a82007e361f10e477364ca0a9a9a4c6fc6b2a"
-  integrity sha512-BaZbZIV89C+BMDliDhz2Z58bJrbbwxGvlu636Vwiqk0KYp7PpwTu8TCBqJXz4xxxRK/wYlki8gBFlkUslI1o8Q==
-  dependencies:
-    eslint "~5.15.1"
-    eslint-plugin-graphql "~3.0.3"
-
 graphql-cli@~3.0.11:
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/graphql-cli/-/graphql-cli-3.0.11.tgz#135d845c1cd7c2a2aac8be543de334543a0ff437"