Merge branch 'develop' into feat/2130/setContentTypeConfig-for-page-b…

…uilder

README.md

@@ -132,6 +132,7 @@ We would like to recognize the following community members for their recent effo
 [![AlexeyKaryka-image]][AlexeyKaryka]
 [![mage2pratik-image]][mage2pratik]
 [![Starotitorov-image]][Starotitorov]
+[![larsroettig-image]][larsroettig]
 
 [realchriswells][],
 [prakashpatel07][],
@@ -310,3 +311,5 @@ For more information about contributing to this repository, see the [Contributio
 [mage2pratik-image]: https://avatars1.githubusercontent.com/u/33807558?v=4&s=60
 [Starotitorov]: https://github.com/Starotitorov
 [Starotitorov-image]: https://avatars3.githubusercontent.com/u/11873143?v=4&s=60
+[larsroettig]: https://github.com/larsroettig
+[larsroettig-image]: https://avatars0.githubusercontent.com/u/5289370?v=4&s=60

packages/peregrine/lib/talons/CartPage/PriceSummary/usePriceSummary.js

@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useEffect, useCallback } from 'react';
+import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useLazyQuery } from '@apollo/react-hooks';
 import { useCartContext } from '@magento/peregrine/lib/context/cart';
 
@@ -28,10 +28,10 @@ export const usePriceSummary = props => {
     } = props;
 
     const [{ cartId }] = useCartContext();
-
-    const location = useLocation();
+    const history = useHistory();
     // We don't want to display "Estimated" or the "Proceed" button in checkout.
-    const isCheckout = location.pathname === '/checkout';
+    const match = useRouteMatch('/checkout');
+    const isCheckout = !!match;
 
     const [fetchPriceSummary, { error, loading, data }] = useLazyQuery(
         getPriceSummary
@@ -53,7 +53,12 @@ export const usePriceSummary = props => {
         }
     }, [error]);
 
+    const handleProceedToCheckout = useCallback(() => {
+        history.push('/checkout');
+    }, [history]);
+
     return {
+        handleProceedToCheckout,
         hasError: !!error,
         hasItems: data && !!data.cart.items.length,
         isCheckout,

packages/peregrine/lib/talons/CheckoutPage/ItemsReview/__fixtures__/cartItems.js

@@ -0,0 +1,102 @@
+export default {
+    cart: {
+        id: 'GXtkt675mPd3gYuvhWLd5iw5ekVoDj1b',
+        total_quantity: 7,
+        items: [
+            {
+                id: '29568',
+                product: {
+                    id: 1093,
+                    name: 'Jillian Top',
+                    thumbnail: {
+                        url:
+                            'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/t/vt12-kh_main_2.jpg',
+                        __typename: 'ProductImage'
+                    },
+                    __typename: 'ConfigurableProduct'
+                },
+                quantity: 3,
+                configurable_options: [
+                    {
+                        id: 179,
+                        option_label: 'Fashion Color',
+                        value_id: 18,
+                        value_label: 'Peach',
+                        __typename: 'SelectedConfigurableOption'
+                    },
+                    {
+                        id: 182,
+                        option_label: 'Fashion Size',
+                        value_id: 27,
+                        value_label: 'M',
+                        __typename: 'SelectedConfigurableOption'
+                    }
+                ],
+                __typename: 'ConfigurableCartItem'
+            },
+            {
+                id: '29570',
+                product: {
+                    id: 1115,
+                    name: 'Juno Sweater',
+                    thumbnail: {
+                        url:
+                            'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/s/vsw02-pe_main_2.jpg',
+                        __typename: 'ProductImage'
+                    },
+                    __typename: 'ConfigurableProduct'
+                },
+                quantity: 1,
+                configurable_options: [
+                    {
+                        id: 179,
+                        option_label: 'Fashion Color',
+                        value_id: 21,
+                        value_label: 'Rain',
+                        __typename: 'SelectedConfigurableOption'
+                    },
+                    {
+                        id: 182,
+                        option_label: 'Fashion Size',
+                        value_id: 29,
+                        value_label: 'XS',
+                        __typename: 'SelectedConfigurableOption'
+                    }
+                ],
+                __typename: 'ConfigurableCartItem'
+            },
+            {
+                id: '29572',
+                product: {
+                    id: 1152,
+                    name: 'Angelina Tank Dress',
+                    thumbnail: {
+                        url:
+                            'https://master-7rqtwti-mfwmkrjfqvbjk.us-4.magentosite.cloud/media/catalog/product/cache/d3ba9f7bcd3b0724e976dc5144b29c7d/v/d/vd01-ll_main_2.jpg',
+                        __typename: 'ProductImage'
+                    },
+                    __typename: 'ConfigurableProduct'
+                },
+                quantity: 3,
+                configurable_options: [
+                    {
+                        id: 179,
+                        option_label: 'Fashion Color',
+                        value_id: 20,
+                        value_label: 'Lilac',
+                        __typename: 'SelectedConfigurableOption'
+                    },
+                    {
+                        id: 182,
+                        option_label: 'Fashion Size',
+                        value_id: 26,
+                        value_label: 'L',
+                        __typename: 'SelectedConfigurableOption'
+                    }
+                ],
+                __typename: 'ConfigurableCartItem'
+            }
+        ],
+        __typename: 'Cart'
+    }
+};

packages/peregrine/lib/talons/CheckoutPage/ItemsReview/__tests__/__snapshots__/useItemsReview.spec.js.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`returns correct shape 1`] = `
+Object {
+  "hasErrors": false,
+  "isLoading": true,
+  "items": Array [],
+  "setShowAllItems": [Function],
+  "showAllItems": false,
+  "totalQuantity": 0,
+}
+`;

packages/peregrine/lib/talons/CheckoutPage/ItemsReview/__tests__/useItemsReview.spec.js

@@ -0,0 +1,98 @@
+import React from 'react';
+import { useLazyQuery } from '@apollo/react-hooks';
+
+import createTestInstance from '../../../../../lib/util/createTestInstance';
+import { useItemsReview } from '../useItemsReview';
+
+import cartItems from '../__fixtures__/cartItems';
+
+jest.mock('@apollo/react-hooks', () => ({
+    useLazyQuery: jest.fn().mockReturnValue([
+        () => {},
+        {
+            data: null,
+            error: null,
+            loading: true
+        }
+    ])
+}));
+
+jest.mock('../../../../context/cart', () => {
+    const state = {
+        cartId: 'cart123'
+    };
+    const api = {};
+    const useCartContext = jest.fn(() => [state, api]);
+
+    return { useCartContext };
+});
+
+const Component = props => {
+    const talonProps = useItemsReview(props);
+
+    return <i talonProps={talonProps} />;
+};
+
+test('returns correct shape', () => {
+    const tree = createTestInstance(
+        <Component queries={{ getItemsInCart: jest.fn() }} />
+    );
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+
+    expect(talonProps).toMatchSnapshot();
+});
+
+test('Should return total quantity from gql query', () => {
+    useLazyQuery.mockReturnValueOnce([
+        () => {},
+        {
+            data: cartItems,
+            error: null,
+            loading: false
+        }
+    ]);
+    const tree = createTestInstance(
+        <Component queries={{ getItemsInCart: jest.fn() }} />
+    );
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+
+    expect(talonProps.totalQuantity).toBe(cartItems.cart.total_quantity);
+});
+
+test('Should return 0 for total quantity if gql does not return total_quality', () => {
+    const newCartItems = {
+        ...cartItems
+    };
+    newCartItems.cart.total_quantity = null;
+    useLazyQuery.mockReturnValueOnce([
+        () => {},
+        {
+            data: newCartItems,
+            error: null,
+            loading: false
+        }
+    ]);
+    const tree = createTestInstance(
+        <Component queries={{ getItemsInCart: jest.fn() }} />
+    );
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+
+    expect(talonProps.totalQuantity).toBe(0);
+});
+
+test('hasErrors in return props should be set to true if gql throws any errors', () => {
+    useLazyQuery.mockReturnValueOnce([
+        () => {},
+        { data: null, loading: false, error: 'some error' }
+    ]);
+    const tree = createTestInstance(
+        <Component queries={{ getItemsInCart: jest.fn() }} />
+    );
+    const { root } = tree;
+    const { talonProps } = root.findByType('i').props;
+
+    expect(talonProps.hasErrors).toBeTruthy();
+});

packages/peregrine/lib/talons/CheckoutPage/ItemsReview/useItemsReview.js

@@ -0,0 +1,64 @@
+import { useEffect, useState, useCallback } from 'react';
+import { useLazyQuery } from '@apollo/react-hooks';
+
+import { useCartContext } from '../../../context/cart';
+
+export const useItemsReview = props => {
+    const [showAllItems, setShowAllItems] = useState(false);
+
+    const {
+        queries: { getItemsInCart }
+    } = props;
+
+    const [{ cartId }] = useCartContext();
+
+    const [fetchItemsInCart, { data, error, loading }] = useLazyQuery(
+        getItemsInCart,
+        {
+            fetchPolicy: 'cache-and-network'
+        }
+    );
+
+    const setShowAllItemsFlag = useCallback(() => setShowAllItems(true), [
+        setShowAllItems
+    ]);
+
+    useEffect(() => {
+        if (cartId) {
+            fetchItemsInCart({
+                variables: {
+                    cartId
+                }
+            });
+        }
+    }, [cartId, fetchItemsInCart]);
+
+    useEffect(() => {
+        if (error) {
+            console.error(error);
+        }
+    }, [error]);
+
+    useEffect(() => {
+        /**
+         * If there are 2 or less than 2 items in cart
+         * set show all items to `true`.
+         */
+        if (data && data.cart && data.cart.items.length <= 2) {
+            setShowAllItems(true);
+        }
+    }, [data]);
+
+    const items = data ? data.cart.items : [];
+
+    const totalQuantity = data ? +data.cart.total_quantity : 0;
+
+    return {
+        isLoading: !!loading,
+        items,
+        hasErrors: !!error,
+        totalQuantity,
+        showAllItems,
+        setShowAllItems: setShowAllItemsFlag
+    };
+};

packages/venia-ui/lib/components/CartPage/PriceSummary/priceSummary.js

@@ -10,7 +10,6 @@ import GiftCardSummary from './giftCardSummary';
 import ShippingSummary from './shippingSummary';
 import TaxSummary from './taxSummary';
 import { PriceSummaryFragment } from './priceSummaryFragments';
-import { Link } from '@magento/venia-drivers';
 
 const GET_PRICE_SUMMARY = gql`
     query getPriceSummary($cartId: String!) {
@@ -40,7 +39,14 @@ const PriceSummary = props => {
         }
     });
 
-    const { hasError, hasItems, isCheckout, isLoading, flatData } = talonProps;
+    const {
+        handleProceedToCheckout,
+        hasError,
+        hasItems,
+        isCheckout,
+        isLoading,
+        flatData
+    } = talonProps;
 
     if (hasError) {
         return (
@@ -61,10 +67,12 @@ const PriceSummary = props => {
 
     const proceedToCheckoutButton = !isCheckout ? (
         <div className={classes.checkoutButton_container}>
-            <Button disabled={isUpdating} priority={'high'}>
-                <Link to={'/checkout'} className={classes.images}>
-                    {'Proceed to Checkout'}
-                </Link>
+            <Button
+                disabled={isUpdating}
+                priority={'high'}
+                onClick={handleProceedToCheckout}
+            >
+                {'Proceed to Checkout'}
             </Button>
         </div>
     ) : null;