-
+
`;
+
+exports[`OrderConfirmationPage renders component using location state when there are no props provided 1`] = `
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+
+ badvirus@covid.com
+
+
+ Stuck Indoors
+
+
+ 123 Stir Crazy Dr.
+
+
+ Austin, TX 91111 US
+
+
+
+
+
+
+ Flat Rate - Fixed
+
+
+
+
+
+
+
+
+
+
+`;
diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js
index 6e0e76ae6e..5811a0f908 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/orderConfirmationPage.spec.js
@@ -5,6 +5,9 @@ import { useOrderConfirmationPage } from '@magento/peregrine/lib/talons/Checkout
import OrderConfirmationPage from '../orderConfirmationPage';
import CreateAccount from '../createAccount';
+import { useLocation } from 'react-router-dom';
+import cartItems from '../__fixtures__/cartItems';
+
jest.mock('@magento/peregrine', () => {
const actual = jest.requireActual('@magento/peregrine');
const useToasts = jest.fn().mockReturnValue([{}, { addToast: jest.fn() }]);
@@ -27,6 +30,12 @@ jest.mock('../../../../components/Head', () => ({ StoreTitle: () => 'Title' }));
jest.mock('../createAccount', () => 'CreateAccount');
jest.mock('../../ItemsReview', () => 'ItemsReview');
+jest.mock('react-router-dom', () => {
+ return {
+ useLocation: jest.fn().mockReturnValue(jest.fn())
+ };
+});
+
const defaultTalonProps = {
flatData: {
city: 'Austin',
@@ -46,23 +55,51 @@ describe('OrderConfirmationPage', () => {
beforeEach(() => {
globalThis.scrollTo = jest.fn();
});
+
test('renders OrderConfirmationPage component', () => {
useOrderConfirmationPage.mockReturnValue({
...defaultTalonProps
});
+ const mockData = {
+ cart: {
+ items: cartItems
+ }
+ };
const instance = createTestInstance(
-
+
);
expect(instance.toJSON()).toMatchSnapshot();
});
+ test('renders component using location state when there are no props provided', () => {
+ useOrderConfirmationPage.mockReturnValue({
+ ...defaultTalonProps,
+ isSignedIn: true
+ });
+ useLocation.mockReturnValue({
+ state: {
+ orderNumber: 123,
+ items: cartItems
+ }
+ });
+ const instance = createTestInstance(
);
+ expect(instance.toJSON()).toMatchSnapshot();
+ });
+
test('renders CreateAccount view if not signed in', () => {
useOrderConfirmationPage.mockReturnValueOnce({
...defaultTalonProps,
- isDisabled: true
+ isSignedIn: false
});
+ const mockData = {
+ cart: {
+ items: cartItems
+ }
+ };
- const instance = createTestInstance(
);
+ const instance = createTestInstance(
+
+ );
const component = instance.root.findByType(CreateAccount);
expect(component).toBeTruthy();
diff --git a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js
index 369c6e4012..eaeae5867e 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/OrderConfirmationPage/orderConfirmationPage.js
@@ -3,6 +3,8 @@ import { FormattedMessage, useIntl } from 'react-intl';
import { object, shape, string } from 'prop-types';
import { useOrderConfirmationPage } from '@magento/peregrine/lib/talons/CheckoutPage/OrderConfirmationPage/useOrderConfirmationPage';
+import { useLocation } from 'react-router-dom';
+import { fullPageLoadingIndicator } from '../../LoadingIndicator';
import { useStyle } from '../../../classify';
import { StoreTitle } from '../../../components/Head';
import CreateAccount from './createAccount';
@@ -11,34 +13,19 @@ import defaultClasses from './orderConfirmationPage.module.css';
const OrderConfirmationPage = props => {
const classes = useStyle(defaultClasses, props.classes);
- const { data, orderNumber } = props;
+ const location = useLocation();
+ const data = props.data;
+ const orderNumber = props.orderNumber || location.state.orderNumber;
+ const cartItems = data ? data.cart.items : location.state.items;
+
const { formatMessage } = useIntl();
const talonProps = useOrderConfirmationPage({
- data
+ data,
+ orderNumber
});
- const { flatData, isSignedIn } = talonProps;
-
- const {
- city,
- country,
- email,
- firstname,
- lastname,
- postcode,
- region,
- shippingMethod,
- street
- } = flatData;
-
- const streetRows = street.map((row, index) => {
- return (
-
- {row}
-
- );
- });
+ const { flatData, isSignedIn, loading } = talonProps;
useEffect(() => {
const { scrollTo } = globalThis;
@@ -52,90 +39,118 @@ const OrderConfirmationPage = props => {
}
}, []);
- const createAccountForm = !isSignedIn ? (
-
- ) : null;
+ if (!flatData || loading) {
+ return fullPageLoadingIndicator;
+ } else {
+ const {
+ city,
+ country,
+ email,
+ firstname,
+ lastname,
+ postcode,
+ region,
+ shippingMethod,
+ street
+ } = flatData;
- const nameString = `${firstname} ${lastname}`;
- const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
+ const streetRows = street.map((row, index) => {
+ return (
+
+ {row}
+
+ );
+ });
- return (
-
-
- {formatMessage({
- id: 'checkoutPage.titleReceipt',
- defaultMessage: 'Receipt'
- })}
-
-
-
-
-
-
-
-
-
-
-
-
- {email}
- {nameString}
- {streetRows}
-
- {additionalAddressString}
-
-
-
-
-
-
{shippingMethod}
-
-
+ const createAccountForm = !isSignedIn ? (
+
+ ) : null;
+
+ const nameString = `${firstname} ${lastname}`;
+ const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
+
+ return (
+
+
+ {formatMessage({
+ id: 'checkoutPage.titleReceipt',
+ defaultMessage: 'Receipt'
+ })}
+
+
+
+
+
+
+
+
+
+
+
+
+ {email}
+ {nameString}
+ {streetRows}
+
+ {additionalAddressString}
+
+
+
+
+
+
+ {shippingMethod}
+
+
+
+
+
+
+
-
-
+
+ {createAccountForm}
-
{createAccountForm}
-
- );
+ );
+ }
};
export default OrderConfirmationPage;
@@ -157,6 +172,6 @@ OrderConfirmationPage.propTypes = {
additionalText: string,
sidebarContainer: string
}),
- data: object.isRequired,
+ data: object,
orderNumber: string
};
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index cb319f4d5f..0dba1ba255 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
@@ -2,14 +2,13 @@ import React, { Fragment, useEffect } from 'react';
import { shape, string } from 'prop-types';
import { FormattedMessage, useIntl } from 'react-intl';
import { AlertCircle as AlertCircleIcon } from 'react-feather';
-import { Link } from 'react-router-dom';
+import { Link, useHistory } from 'react-router-dom';
import { useWindowSize, useToasts } from '@magento/peregrine';
import {
CHECKOUT_STEP,
useCheckoutPage
} from '@magento/peregrine/lib/talons/CheckoutPage/useCheckoutPage';
-
import { useStyle } from '../../classify';
import Button from '../Button';
import { StoreTitle } from '../Head';
@@ -25,8 +24,8 @@ import payments from './PaymentInformation/paymentMethodCollection';
import PriceAdjustments from './PriceAdjustments';
import ShippingMethod from './ShippingMethod';
import ShippingInformation from './ShippingInformation';
-import OrderConfirmationPage from './OrderConfirmationPage';
import ItemsReview from './ItemsReview';
+import OrderConfirmationPage from './OrderConfirmationPage';
import GoogleReCaptcha from '../GoogleReCaptcha';
import defaultClasses from './checkoutPage.module.css';
@@ -35,6 +34,7 @@ import ScrollAnchor from '../ScrollAnchor/scrollAnchor';
const errorIcon =
;
const CheckoutPage = props => {
+ const history = useHistory();
const { classes: propClasses } = props;
const { formatMessage } = useIntl();
const talonProps = useCheckoutPage();
@@ -58,8 +58,8 @@ const CheckoutPage = props => {
isGuestCheckout,
isLoading,
isUpdating,
- orderDetailsData,
orderDetailsLoading,
+ orderDetailsData,
orderNumber,
placeOrderLoading,
placeOrderButtonClicked,
@@ -83,7 +83,15 @@ const CheckoutPage = props => {
} = talonProps;
const [, { addToast }] = useToasts();
-
+ const orderCount = localStorage.getItem('orderCount');
+ useEffect(() => {
+ if (isGuestCheckout && !orderDetailsData) {
+ if (orderCount === '1') {
+ history.push('/');
+ localStorage.setItem('orderCount', '0');
+ }
+ }
+ }, [isGuestCheckout, history, orderDetailsData, orderCount]);
useEffect(() => {
if (hasError) {
const message =
@@ -125,7 +133,7 @@ const CheckoutPage = props => {
defaultMessage: 'Checkout'
});
- if (orderNumber && orderDetailsData) {
+ if (isGuestCheckout && orderDetailsData && orderNumber) {
return (
{
const itemsReview =
checkoutStep === CHECKOUT_STEP.REVIEW ? (
-
+
) : null;
diff --git a/packages/venia-ui/lib/defaultRoutes.json b/packages/venia-ui/lib/defaultRoutes.json
index e869dafdb8..3adb4587e7 100644
--- a/packages/venia-ui/lib/defaultRoutes.json
+++ b/packages/venia-ui/lib/defaultRoutes.json
@@ -53,6 +53,12 @@
"exact": true,
"path": "../ForgotPasswordPage"
},
+ {
+ "name": "OrderConfirmation",
+ "pattern": "/order-confirmation",
+ "exact": true,
+ "path": "../CheckoutPage/OrderConfirmationPage"
+ },
{
"name": "OrderHistory",
"pattern": "/order-history",