@magento/venia-ui 11.5.0 → 11.6.0-alpha.13

package/lib/components/CheckoutPage/OrderConfirmationPage/__tests__/__snapshots__/orderConfirmationPage.spec.js.snap

@@ -51,7 +51,42 @@ exports[`OrderConfirmationPage renders OrderConfirmationPage component 1`] = `
       Flat Rate - Fixed
     </div>
     <div>
-      <ItemsReview />
+      <ItemsReview
+        items={
+          Array [
+            Object {
+              "__typename": "ConfigurableCartItem",
+              "configurable_options": Array [
+                Object {
+                  "__typename": "SelectedConfigurableOption",
+                  "configurable_product_option_uid": 179,
+                  "configurable_product_option_value_uid": 18,
+                  "option_label": "Fashion Color",
+                  "value_label": "Peach",
+                },
+                Object {
+                  "__typename": "SelectedConfigurableOption",
+                  "configurable_product_option_uid": 182,
+                  "configurable_product_option_value_uid": 27,
+                  "option_label": "Fashion Size",
+                  "value_label": "M",
+                },
+              ],
+              "id": "29568",
+              "product": Object {
+                "__typename": "ConfigurableProduct",
+                "id": 1093,
+                "name": "Jillian Top",
+                "thumbnail": Object {
+                  "__typename": "ProductImage",
+                  "url": "https://master-7rqtwti-c5v7sxvquxwl4.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg",
+                },
+              },
+              "quantity": 3,
+            },
+          ]
+        }
+      />
     </div>
     <div>
       <mock-FormattedMessage
@@ -69,3 +104,102 @@ exports[`OrderConfirmationPage renders OrderConfirmationPage component 1`] = `
   </div>
 </div>
 `;
+
+exports[`OrderConfirmationPage renders component using location state when there are no props provided 1`] = `
+<div>
+  Title
+  <div>
+    <h2>
+      <mock-FormattedMessage
+        defaultMessage="Thank you for your order!"
+        id="checkoutPage.thankYou"
+      />
+    </h2>
+    <div>
+      <mock-FormattedMessage
+        defaultMessage="Order Number: {orderNumber}"
+        id="checkoutPage.orderNumber"
+        values={
+          Object {
+            "orderNumber": 123,
+          }
+        }
+      />
+    </div>
+    <div>
+      <mock-FormattedMessage
+        defaultMessage="Shipping Information"
+        id="global.shippingInformation"
+      />
+    </div>
+    <div>
+      <span>
+        badvirus@covid.com
+      </span>
+      <span>
+        Stuck Indoors
+      </span>
+      <span>
+        123 Stir Crazy Dr.
+      </span>
+      <span>
+        Austin, TX 91111 US
+      </span>
+    </div>
+    <div>
+      <mock-FormattedMessage
+        defaultMessage="Shipping Method"
+        id="global.shippingMethod"
+      />
+    </div>
+    <div>
+      Flat Rate - Fixed
+    </div>
+    <div>
+      <ItemsReview
+        items={
+          Array [
+            Object {
+              "__typename": "ConfigurableCartItem",
+              "configurable_options": Array [
+                Object {
+                  "__typename": "SelectedConfigurableOption",
+                  "configurable_product_option_uid": 179,
+                  "configurable_product_option_value_uid": 18,
+                  "option_label": "Fashion Color",
+                  "value_label": "Peach",
+                },
+                Object {
+                  "__typename": "SelectedConfigurableOption",
+                  "configurable_product_option_uid": 182,
+                  "configurable_product_option_value_uid": 27,
+                  "option_label": "Fashion Size",
+                  "value_label": "M",
+                },
+              ],
+              "id": "29568",
+              "product": Object {
+                "__typename": "ConfigurableProduct",
+                "id": 1093,
+                "name": "Jillian Top",
+                "thumbnail": Object {
+                  "__typename": "ProductImage",
+                  "url": "https://master-7rqtwti-c5v7sxvquxwl4.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg",
+                },
+              },
+              "quantity": 3,
+            },
+          ]
+        }
+      />
+    </div>
+    <div>
+      <mock-FormattedMessage
+        defaultMessage="You will also receive an email with the details and we will let you know when your order has shipped."
+        id="checkoutPage.additionalText"
+      />
+    </div>
+  </div>
+  <div />
+</div>
+`;

package/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(
-            <OrderConfirmationPage orderNumber={123} />
+            <OrderConfirmationPage orderNumber={123} data={mockData} />
         );
         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(<OrderConfirmationPage />);
+        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(<OrderConfirmationPage />);
+        const instance = createTestInstance(
+            <OrderConfirmationPage orderNumber={123} data={mockData} />
+        );
         const component = instance.root.findByType(CreateAccount);
 
         expect(component).toBeTruthy();

package/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 (
-            <span key={index} className={classes.addressStreet}>
-                {row}
-            </span>
-        );
-    });
+    const { flatData, isSignedIn, loading } = talonProps;
 
     useEffect(() => {
         const { scrollTo } = globalThis;
@@ -52,90 +39,118 @@ const OrderConfirmationPage = props => {
         }
     }, []);
 
-    const createAccountForm = !isSignedIn ? (
-        <CreateAccount
-            firstname={firstname}
-            lastname={lastname}
-            email={email}
-        />
-    ) : 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 (
+                <span key={index} className={classes.addressStreet}>
+                    {row}
+                </span>
+            );
+        });
 
-    return (
-        <div className={classes.root} data-cy="OrderConfirmationPage-root">
-            <StoreTitle>
-                {formatMessage({
-                    id: 'checkoutPage.titleReceipt',
-                    defaultMessage: 'Receipt'
-                })}
-            </StoreTitle>
-            <div className={classes.mainContainer}>
-                <h2
-                    data-cy="OrderConfirmationPage-header"
-                    className={classes.heading}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.thankYou'}
-                        defaultMessage={'Thank you for your order!'}
-                    />
-                </h2>
-                <div
-                    data-cy="OrderConfirmationPage-orderNumber"
-                    className={classes.orderNumber}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.orderNumber'}
-                        defaultMessage={'Order Number: {orderNumber}'}
-                        values={{ orderNumber }}
-                    />
-                </div>
-                <div
-                    data-cy="OrderConfirmationPage-shippingInfoHeading"
-                    className={classes.shippingInfoHeading}
-                >
-                    <FormattedMessage
-                        id={'global.shippingInformation'}
-                        defaultMessage={'Shipping Information'}
-                    />
-                </div>
-                <div className={classes.shippingInfo}>
-                    <span className={classes.email}>{email}</span>
-                    <span className={classes.name}>{nameString}</span>
-                    {streetRows}
-                    <span className={classes.addressAdditional}>
-                        {additionalAddressString}
-                    </span>
-                </div>
-                <div
-                    data-cy="OrderConfirmationPage-shippingMethodHeading"
-                    className={classes.shippingMethodHeading}
-                >
-                    <FormattedMessage
-                        id={'global.shippingMethod'}
-                        defaultMessage={'Shipping Method'}
-                    />
-                </div>
-                <div className={classes.shippingMethod}>{shippingMethod}</div>
-                <div className={classes.itemsReview}>
-                    <ItemsReview data={data} />
+        const createAccountForm = !isSignedIn ? (
+            <CreateAccount
+                firstname={firstname}
+                lastname={lastname}
+                email={email}
+            />
+        ) : null;
+
+        const nameString = `${firstname} ${lastname}`;
+        const additionalAddressString = `${city}, ${region} ${postcode} ${country}`;
+
+        return (
+            <div className={classes.root} data-cy="OrderConfirmationPage-root">
+                <StoreTitle>
+                    {formatMessage({
+                        id: 'checkoutPage.titleReceipt',
+                        defaultMessage: 'Receipt'
+                    })}
+                </StoreTitle>
+                <div className={classes.mainContainer}>
+                    <h2
+                        data-cy="OrderConfirmationPage-header"
+                        className={classes.heading}
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.thankYou'}
+                            defaultMessage={'Thank you for your order!'}
+                        />
+                    </h2>
+                    <div
+                        data-cy="OrderConfirmationPage-orderNumber"
+                        className={classes.orderNumber}
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.orderNumber'}
+                            defaultMessage={'Order Number: {orderNumber}'}
+                            values={{ orderNumber }}
+                        />
+                    </div>
+                    <div
+                        data-cy="OrderConfirmationPage-shippingInfoHeading"
+                        className={classes.shippingInfoHeading}
+                    >
+                        <FormattedMessage
+                            id={'global.shippingInformation'}
+                            defaultMessage={'Shipping Information'}
+                        />
+                    </div>
+                    <div className={classes.shippingInfo}>
+                        <span className={classes.email}>{email}</span>
+                        <span className={classes.name}>{nameString}</span>
+                        {streetRows}
+                        <span className={classes.addressAdditional}>
+                            {additionalAddressString}
+                        </span>
+                    </div>
+                    <div
+                        data-cy="OrderConfirmationPage-shippingMethodHeading"
+                        className={classes.shippingMethodHeading}
+                    >
+                        <FormattedMessage
+                            id={'global.shippingMethod'}
+                            defaultMessage={'Shipping Method'}
+                        />
+                    </div>
+                    <div className={classes.shippingMethod}>
+                        {shippingMethod}
+                    </div>
+                    <div className={classes.itemsReview}>
+                        <ItemsReview items={cartItems} />
+                    </div>
+                    <div
+                        data-cy="OrderConfirmationPage-additionalText"
+                        className={classes.additionalText}
+                    >
+                        <FormattedMessage
+                            id={'checkoutPage.additionalText'}
+                            defaultMessage={
+                                'You will also receive an email with the details and we will let you know when your order has shipped.'
+                            }
+                        />
+                    </div>
                 </div>
-                <div
-                    data-cy="OrderConfirmationPage-additionalText"
-                    className={classes.additionalText}
-                >
-                    <FormattedMessage
-                        id={'checkoutPage.additionalText'}
-                        defaultMessage={
-                            'You will also receive an email with the details and we will let you know when your order has shipped.'
-                        }
-                    />
+                <div className={classes.sidebarContainer}>
+                    {createAccountForm}
                 </div>
             </div>
-            <div className={classes.sidebarContainer}>{createAccountForm}</div>
-        </div>
-    );
+        );
+    }
 };
 
 export default OrderConfirmationPage;
@@ -157,6 +172,6 @@ OrderConfirmationPage.propTypes = {
         additionalText: string,
         sidebarContainer: string
     }),
-    data: object.isRequired,
+    data: object,
     orderNumber: string
 };

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/__tests__/__snapshots__/guestForm.spec.js.snap

@@ -451,11 +451,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Continue to Shipping Method
-        </span>
+        Continue to Shipping Method
       </button>
     </div>
   </form>,
@@ -917,11 +913,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Continue to Shipping Method
-        </span>
+        Continue to Shipping Method
       </button>
     </div>
   </form>,
@@ -1371,14 +1363,10 @@ Array [
         onTouchStart={[Function]}
         type="button"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Cancel"
-            id="global.cancelButton"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Cancel"
+          id="global.cancelButton"
+        />
       </button>
       <button
         className="root_highPriority"
@@ -1396,11 +1384,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Update
-        </span>
+        Update
       </button>
     </div>
   </form>,
@@ -1850,14 +1834,10 @@ Array [
         onTouchStart={[Function]}
         type="button"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Cancel"
-            id="global.cancelButton"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Cancel"
+          id="global.cancelButton"
+        />
       </button>
       <button
         className="root_highPriority"
@@ -1875,11 +1855,7 @@ Array [
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          Update
-        </span>
+        Update
       </button>
     </div>
   </form>,

package/lib/components/CheckoutPage/ShippingInformation/AddressForm/guestForm.js

@@ -8,7 +8,7 @@ import { useToasts } from '@magento/peregrine';
 
 import { useStyle } from '../../../../classify';
 import { isRequired } from '../../../../util/formValidators';
-import Button from '../../../Button';
+import Button from '../../../ButtonTab';
 import Country from '../../../Country';
 import Field, { Message } from '../../../Field';
 import FormError from '../../../FormError';

package/lib/components/CheckoutPage/ShippingMethod/__tests__/__snapshots__/shippingMethod.spec.js.snap

@@ -107,14 +107,10 @@ exports[`it disables inputs when the page is updating 1`] = `
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Continue to Payment Information"
-            id="shippingMethod.continueToNextStep"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Continue to Payment Information"
+          id="shippingMethod.continueToNextStep"
+        />
       </button>
     </div>
   </form>
@@ -228,14 +224,10 @@ exports[`it renders correctly 1`] = `
         onTouchStart={[Function]}
         type="submit"
       >
-        <span
-          className="content"
-        >
-          <mock-FormattedMessage
-            defaultMessage="Continue to Payment Information"
-            id="shippingMethod.continueToNextStep"
-          />
-        </span>
+        <mock-FormattedMessage
+          defaultMessage="Continue to Payment Information"
+          id="shippingMethod.continueToNextStep"
+        />
       </button>
     </div>
   </form>

package/lib/components/CheckoutPage/ShippingMethod/shippingMethod.js

@@ -9,7 +9,7 @@ import {
 } from '@magento/peregrine/lib/talons/CheckoutPage/ShippingMethod/useShippingMethod';
 
 import { useStyle } from '../../../classify';
-import Button from '../../Button';
+import Button from '../../ButtonTab';
 import FormError from '../../FormError';
 import LoadingIndicator from '../../LoadingIndicator';
 import CompletedView from './completedView';

package/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -237,7 +237,6 @@ exports[`CheckoutPage renders an error and disables review order button if there
       onTouchCancel={[Function]}
       onTouchEnd={[Function]}
       onTouchMove={[Function]}
-      onTouchStart={[Function]}
       type="button"
     >
       <span
@@ -890,6 +889,7 @@ Object {
   "negative": false,
   "onClick": [MockFunction handleReviewOrder],
   "onKeyDown": undefined,
+  "onTouchStart": [MockFunction handleReviewOrder],
   "priority": "high",
   "type": "button",
 }