Merge remote-tracking branch 'origin/develop' into rugh/pwa-184-order…

…-summary

packages/peregrine/lib/talons/AuthModal/useAuthModal.js

@@ -66,7 +66,7 @@ export const useAuthModal = props => {
         await resetStore();
         await signOut({ revokeToken });
 
-        // Go back to first page of browser history (refresh).
+        // Refresh this page.
         history.go(0);
     }, [history, resetStore, revokeToken, signOut]);
 

packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -1,26 +1,65 @@
-import { useCallback, useState } from 'react';
-import { useMutation } from '@apollo/react-hooks';
+import { useCallback, useEffect, useState } from 'react';
+import { useLazyQuery, useMutation } from '@apollo/react-hooks';
 
-import { useAwaitQuery } from '../../hooks/useAwaitQuery';
 import { useAppContext } from '../../context/app';
 import { useUserContext } from '../../context/user';
 import { useCartContext } from '../../context/cart';
 
+export const CHECKOUT_STEP = {
+    SHIPPING_ADDRESS: 1,
+    SHIPPING_METHOD: 2,
+    PAYMENT: 3,
+    REVIEW: 4
+};
+
 export const useCheckoutPage = props => {
-    const { createCartMutation, getCartDetailsQuery } = props;
+    const {
+        mutations: { createCartMutation },
+        queries: { getCheckoutDetailsQuery, getCheckoutStepQuery }
+    } = props;
+
+    // Local receipt data for use after order placed. Erased after refresh.
+    const [receiptData, setReceiptData] = useState();
+
+    const [isUpdating, setIsUpdating] = useState(false);
 
     const [, { toggleDrawer }] = useAppContext();
     const [{ isSignedIn }] = useUserContext();
-    const [
-        { isEmpty },
-        { createCart, getCartDetails, removeCart }
-    ] = useCartContext();
+    const [{ cartId }, { createCart, removeCart }] = useCartContext();
 
     const [fetchCartId] = useMutation(createCartMutation);
-    const fetchCartDetails = useAwaitQuery(getCartDetailsQuery);
-    const [isUpdating, setIsUpdating] = useState(false);
+
+    const [
+        getCheckoutDetails,
+        { data: checkoutData, loading: checkoutLoading }
+    ] = useLazyQuery(getCheckoutDetailsQuery, {
+        // TODO: Purposely overfetch and hit the network until all components
+        // are correctly updating the cache. Will be fixed by PWA-321.
+        fetchPolicy: 'cache-and-network'
+    });
+
+    const [getCheckoutStep, { data: stepData, client }] = useLazyQuery(
+        getCheckoutStepQuery
+    );
+
+    const setCheckoutStep = useCallback(
+        step => {
+            client.writeQuery({
+                query: getCheckoutStepQuery,
+                data: {
+                    cart: {
+                        __typename: 'Cart',
+                        id: cartId,
+                        checkoutStep: step
+                    }
+                }
+            });
+        },
+        [cartId, client, getCheckoutStepQuery]
+    );
 
     const handleSignIn = useCallback(() => {
+        // TODO: set navigation state to "SIGN_IN". useNavigation:showSignIn doesn't work.
         toggleDrawer('nav');
     }, [toggleDrawer]);
 
@@ -31,61 +70,70 @@ export const useCheckoutPage = props => {
      * For now we will be using removeCart and createCart to
      * simulate a cart clear on Place Order button click.
      */
-    const cleanUpCart = useCallback(async () => {
+    const submitOrder = useCallback(async () => {
+        // TODO: implement and use submitOrder()
+        // TODO: Convert remove/createCart to a new "reset/create" mutation.
         await removeCart();
-
         await createCart({
             fetchCartId
         });
-
-        await getCartDetails({ fetchCartId, fetchCartDetails });
-    }, [removeCart, createCart, getCartDetails, fetchCartId, fetchCartDetails]);
-
-    /**
-     * Using local state to maintain these booleans. Can be
-     * moved to checkout context in the future if needed.
-     *
-     * These are needed to track progree of checkout steps.
-     */
-    const [shippingInformationDone, updateShippingInformationDone] = useState(
-        false
-    );
-    const [shippingMethodDone, updateShippingMethodDone] = useState(false);
-    const [paymentInformationDone, updatePaymentInformationDone] = useState(
-        false
-    );
-    const [orderPlaced, updateOrderPlaced] = useState(false);
+    }, [createCart, fetchCartId, removeCart]);
 
     const setShippingInformationDone = useCallback(
-        () => updateShippingInformationDone(true),
-        [updateShippingInformationDone]
+        () => setCheckoutStep(CHECKOUT_STEP.SHIPPING_METHOD),
+        [setCheckoutStep]
     );
     const setShippingMethodDone = useCallback(
-        () => updateShippingMethodDone(true),
-        [updateShippingMethodDone]
+        () => setCheckoutStep(CHECKOUT_STEP.PAYMENT),
+        [setCheckoutStep]
     );
     const setPaymentInformationDone = useCallback(
-        () => updatePaymentInformationDone(true),
-        [updatePaymentInformationDone]
+        () => setCheckoutStep(CHECKOUT_STEP.REVIEW),
+        [setCheckoutStep]
     );
+
     const placeOrder = useCallback(async () => {
-        await cleanUpCart();
-        updateOrderPlaced(true);
-    }, [cleanUpCart, updateOrderPlaced]);
+        await submitOrder();
+
+        const { cart } = checkoutData || {};
+
+        // Set receipt data for temp receipt display.
+        setReceiptData({
+            ...cart
+        });
+    }, [checkoutData, submitOrder]);
+
+    const checkoutStep = stepData && stepData.cart.checkoutStep;
+
+    useEffect(() => {
+        if (cartId) {
+            getCheckoutStep({
+                variables: {
+                    cartId
+                }
+            });
+
+            // And fetch any details for this page
+            getCheckoutDetails({
+                variables: {
+                    cartId
+                }
+            });
+        }
+    }, [cartId, getCheckoutDetails, getCheckoutStep, setCheckoutStep]);
 
     return {
+        checkoutStep,
+        handleSignIn,
+        isCartEmpty: !(checkoutData && checkoutData.cart.total_quantity),
         isGuestCheckout: !isSignedIn,
-        isCartEmpty: isEmpty,
+        isLoading: checkoutLoading,
         isUpdating,
+        placeOrder,
+        receiptData,
         setIsUpdating,
-        shippingInformationDone,
-        shippingMethodDone,
-        paymentInformationDone,
-        orderPlaced,
-        handleSignIn,
         setShippingInformationDone,
         setShippingMethodDone,
-        setPaymentInformationDone,
-        placeOrder
+        setPaymentInformationDone
     };
 };

packages/venia-styleguide/src/components/Article/Article.css

@@ -1,4 +1,6 @@
 .title {
+    composes: heading from '../../styles/typography.css';
+    font-family: var(--venia-global-text-fontFamily-serif);
     font-size: var(--venia-global-text-fontSize-1100);
     margin-bottom: 1em;
 }

packages/venia-styleguide/src/components/Box/Box.css

@@ -1,6 +1,6 @@
 .root {
     border-radius: 1px;
-    box-shadow: 0 0 0 1px rgb(var(--venia-global-color-teal-400));
+    box-shadow: 0 0 0 1px rgb(var(--venia-brand-color-1-700));
     height: 100%;
     max-width: 100%;
     width: 100%;

packages/venia-styleguide/src/components/Button/Button.css

@@ -1,47 +1,49 @@
 .root {
-    --color: var(--venia-global-color-gray-900);
+    --stroke: var(--venia-brand-color-1-700);
     background: none;
-    border-color: rgb(var(--color));
-    border-radius: 1.5rem;
+    background-color: rgb(var(--stroke) / 0);
+    border-color: rgb(var(--stroke));
+    border-radius: calc(var(--height) * 0.5px);
     border-style: solid;
-    border-width: 1px;
-    color: rgb(var(--color));
+    border-width: 2px;
+    color: rgb(var(--stroke));
     font-size: var(--venia-global-text-fontSize-100);
     font-weight: var(--venia-global-text-fontWeight-bold);
-    height: 2rem;
-    line-height: var(--venia-global-text-lineHeight-300);
+    line-height: 1.25rem;
     max-width: 100%;
-    min-width: 7.5rem;
+    min-height: 2.5rem;
+    min-width: 10rem;
     outline: none;
-    padding: 0 1rem;
-    transition-duration: 384ms;
+    padding: calc(0.5rem + 1px) 1.75rem calc(0.5rem - 1px);
+    text-transform: uppercase;
+    transition-duration: 256ms;
     transition-property: background-color, border-color, color;
     transition-timing-function: var(--venia-global-anim-standard);
 }
 
 .root:hover {
-    --color: var(--venia-brand-color-1-700);
+    --stroke: var(--venia-brand-color-1-500);
 }
 
 .root:focus {
-    box-shadow: 0 0 0 2px rgb(var(--venia-pattern-glow-color)),
-        0 0 0.5rem 2px rgb(var(--color) / 0.2);
-    --color: var(--venia-brand-color-1-700);
+    --stroke: var(--venia-global-color-green-500);
 }
 
 .root--priority-high {
     composes: root;
-    background-color: rgb(var(--color));
+    background-color: rgb(var(--stroke) / 1);
     color: rgb(var(--venia-global-color-gray-50));
 }
 
 .root--priority-normal {
     composes: root;
 }
 
+.root--priority-low {
+    composes: root;
+    --stroke: rgb(var(--venia-global-color-gray-800));
+}
+
 .content {
     min-width: 0;
-    overflow: hidden;
-    text-overflow: clip;
-    white-space: nowrap;
 }

packages/venia-styleguide/src/components/Button/Button.js

@@ -1,17 +1,24 @@
-import React, { useMemo } from 'react';
+import React, { useLayoutEffect, useMemo, useRef } from 'react';
 
 import finalizeClasses from '../../util/finalizeClasses';
 import classes from './Button.css';
 
 const Button = props => {
     const { children, priority, ...rest } = props;
+    const ref = useRef();
 
     const finalClasses = useMemo(() => {
         return finalizeClasses(classes, { priority });
     }, [priority]);
 
+    useLayoutEffect(() => {
+        const { current } = ref;
+
+        current.style.setProperty('--height', current.offsetHeight);
+    });
+
     return (
-        <button {...rest} className={finalClasses.get('root')}>
+        <button {...rest} ref={ref} className={finalClasses.get('root')}>
             <span className={classes.content}>{children}</span>
         </button>
     );

packages/venia-styleguide/src/components/ButtonGroup/ButtonGroup.css

@@ -0,0 +1,20 @@
+.root {
+    align-items: center;
+    background-color: rgb(var(--venia-global-color-gray-50));
+    display: grid;
+    gap: 1rem;
+    height: 6rem;
+    justify-content: center;
+    padding: 0.5rem;
+    width: 100%;
+}
+
+.root--vertical-true {
+    composes: root;
+    grid-auto-flow: row;
+}
+
+.root--vertical-false {
+    composes: root;
+    grid-auto-flow: column;
+}

packages/venia-styleguide/src/components/ButtonGroup/ButtonGroup.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import finalizeClasses from '../../util/finalizeClasses';
+import classes from './ButtonGroup.css';
+
+const ButtonGroup = props => {
+    const { vertical } = props;
+    const finalClasses = finalizeClasses(classes, { vertical });
+
+    return <div className={finalClasses.get('root')}>{props.children}</div>;
+};
+
+export default ButtonGroup;
+
+ButtonGroup.defaultProps = {
+    vertical: false
+};

packages/venia-styleguide/src/components/ButtonGroup/index.js

@@ -0,0 +1 @@
+export { default } from './ButtonGroup';

packages/venia-styleguide/src/components/ExampleGroup/ExampleGroup.css

@@ -3,4 +3,5 @@
     display: grid;
     gap: 2rem;
     justify-items: center;
+    width: 100%;
 }

packages/venia-styleguide/src/components/Footer/Footer.css

@@ -1,6 +1,7 @@
 .root {
     height: 64px;
     justify-self: center;
+    margin-top: 8rem;
     max-width: 1080px;
     min-width: 320px;
     width: 100%;

packages/venia-styleguide/src/components/Main/Main.css

@@ -1,7 +1,6 @@
 .root {
     justify-self: center;
     max-width: 1080px;
-    min-height: 2160px;
     min-width: 320px;
     padding: 40px 48px 0;
     width: 100%;

packages/venia-styleguide/src/components/Navigation/Navigation.css

@@ -1,5 +1,5 @@
 .header {
-    background-color: rgb(250 250 250);
+    background-color: rgb(var(--venia-global-color-gray-75));
     display: none;
 }