CIF-1072 - Support Registered Cart+Checkout (#234)

* Add the customer cart and the merge carts related queries
* Add the user token for the cart queries.
* Add the token to every request, if available.
* Refresh the cart id in the state object after sign-in / sign-out
* Reset the cart cookie after signing out
* Update unit tests
* Update dependencies versions

Author: dplaton

react-components/package-lock.json

@@ -23,53 +23,53 @@
     "snapshot:update": "jest --updateSnapshot"
   },
   "devDependencies": {
-    "@apollo/react-hooks": "^3.0.0",
-    "@apollo/react-testing": "^3.0.0",
-    "@babel/core": "^7.5.5",
-    "@babel/plugin-proposal-class-properties": "^7.5.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.5.5",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/runtime": "^7.5.5",
+    "@apollo/react-hooks": "^3.1.3",
+    "@apollo/react-testing": "^3.1.3",
+    "@babel/core": "^7.8.7",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.8.7",
+    "@babel/preset-react": "^7.8.3",
+    "@babel/runtime": "^7.8.7",
     "@magento/peregrine": "^3.0.0",
-    "@testing-library/react": "^9.1.4",
+    "@testing-library/react": "^9.5.0",
+    "apollo-boost": "^0.4.7",
+    "apollo-client": "^2.6.8",
+    "babel-eslint": "^10.1.0",
     "acorn": "^6.3.0",
-    "apollo-boost": "^0.4.3",
-    "apollo-client": "^2.6.3",
-    "babel-eslint": "^10.0.2",
     "babel-loader": "^8.0.6",
     "babel-plugin-graphql-tag": "^2.5.0",
-    "braintree-web-drop-in": "^1.20.4",
+    "braintree-web-drop-in": "^1.22.1",
     "clean-webpack-plugin": "^3.0.0",
-    "css-loader": "^3.1.0",
+    "css-loader": "^3.4.2",
     "dotenv-webpack": "^1.7.0",
-    "eslint": "^6.2.0",
+    "eslint": "^6.8.0",
     "eslint-plugin-header": "^3.0.0",
-    "eslint-plugin-jest": "^22.15.1",
-    "eslint-plugin-react": "^7.14.3",
+    "eslint-plugin-jest": "^22.21.0",
+    "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^1.6.1",
-    "file-loader": "^4.1.0",
-    "graphql": "^14.4.2",
+    "file-loader": "^4.3.0",
+    "graphql": "^14.6.0",
     "i18next": "^19.3.2",
     "i18next-scanner": "^2.10.3",
     "identity-obj-proxy": "^3.0.0",
-    "informed": "^2.11.8",
+    "informed": "^2.11.17",
     "jest": "^24.9.0",
     "jest-junit": "^10.0.0",
     "jest-transform-graphql": "^2.1.0",
-    "mini-css-extract-plugin": "^0.8.0",
+    "mini-css-extract-plugin": "^0.8.2",
     "prettier": "^1.19.1",
     "prop-types": "^15.7.2",
-    "react": "^16.11.0",
+    "react": "^16.13.0",
     "react-apollo": "^2.5.8",
-    "react-dom": "^16.11.0",
+    "react-dom": "^16.13.0",
     "react-feather": "^2.0.3",
     "react-i18next": "^11.3.3",
     "react-router-dom": "^5.1.2",
-    "react-test-renderer": "^16.11.0",
+    "react-test-renderer": "^16.13.0",
     "style-loader": "^0.23.1",
-    "webpack": "^4.38.0",
-    "webpack-cli": "^3.3.10",
+    "webpack": "^4.42.0",
+    "webpack-cli": "^3.3.11",
     "webpack-node-externals": "^1.7.2"
   },
   "peerDependencies": {

react-components/package.json

@@ -20,24 +20,35 @@ import ApolloClient from 'apollo-boost';
 import { CartProvider, CartInitializer } from '../Minicart';
 import { CheckoutProvider } from '../Checkout';
 import UserContextProvider from '../../context/UserContext';
+import { checkCookie, cookieValue } from '../../utils/cookieUtils';
 
 const App = props => {
     const { uri, storeView = 'default' } = props;
 
     const client = new ApolloClient({
         uri,
-        headers: { Store: storeView }
+        headers: { Store: storeView },
+        request: operation => {
+            let token = checkCookie('cif.userToken') ? cookieValue('cif.userToken') : '';
+            if (token.length > 0) {
+                operation.setContext({
+                    headers: {
+                        authorization: `Bearer ${token && token.length > 0 ? token : ''}`
+                    }
+                });
+            }
+        }
     });
 
     return (
         <ApolloProvider client={client}>
-            <CartProvider>
-                <UserContextProvider>
+            <UserContextProvider>
+                <CartProvider>
                     <CartInitializer>
                         <CheckoutProvider>{props.children}</CheckoutProvider>
                     </CartInitializer>
-                </UserContextProvider>
-            </CartProvider>
+                </CartProvider>
+            </UserContextProvider>
         </ApolloProvider>
     );
 };

react-components/src/components/App/app.js

@@ -11,7 +11,7 @@
  *    governing permissions and limitations under the License.
  *
  ******************************************************************************/
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Button from '../Button';
@@ -22,8 +22,13 @@ import { func } from 'prop-types';
 
 const AuthBar = props => {
     const { showSignIn, showMyAccount } = props;
+    const [{ currentUser, isSignedIn }, { getUserDetails }] = useUserContext();
 
-    const [{ currentUser, isSignedIn }] = useUserContext();
+    useEffect(() => {
+        if (isSignedIn && currentUser.email === '') {
+            getUserDetails();
+        }
+    }, [getUserDetails]);
     const [t] = useTranslation('account');
 
     const disabled = false;

react-components/src/components/AuthBar/authBar.js

@@ -17,6 +17,7 @@ import { render, waitForElement } from '@testing-library/react';
 import EditableForm from '../editableForm';
 import { CartProvider } from '../../Minicart/cartContext';
 import { CheckoutProvider } from '../checkoutContext';
+import UserContextProvider from '../../../context/UserContext';
 
 import QUERY_COUNTRIES from '../../../queries/query_countries.graphql';
 
@@ -45,11 +46,15 @@ describe('<EditableForm />', () => {
 
         const { queryByText } = render(
             <MockedProvider mocks={mocks} addTypename={false}>
-                <CartProvider initialState={{}} reducerFactory={() => state => state}>
-                    <CheckoutProvider initialState={{ editing: 'address', flowState: 'form' }} reducer={state => state}>
-                        <EditableForm />
-                    </CheckoutProvider>
-                </CartProvider>
+                <UserContextProvider>
+                    <CartProvider initialState={{}} reducerFactory={() => state => state}>
+                        <CheckoutProvider
+                            initialState={{ editing: 'address', flowState: 'form' }}
+                            reducer={state => state}>
+                            <EditableForm />
+                        </CheckoutProvider>
+                    </CartProvider>
+                </UserContextProvider>
             </MockedProvider>
         );
 
@@ -76,11 +81,15 @@ describe('<EditableForm />', () => {
 
         const { asFragment } = render(
             <MockedProvider mocks={mocks} addTypename={false}>
-                <CartProvider initialState={{}} reducerFactory={() => state => state}>
-                    <CheckoutProvider initialState={{ editing: 'address', flowState: 'form' }} reducer={state => state}>
-                        <EditableForm />
-                    </CheckoutProvider>
-                </CartProvider>
+                <UserContextProvider>
+                    <CartProvider initialState={{}} reducerFactory={() => state => state}>
+                        <CheckoutProvider
+                            initialState={{ editing: 'address', flowState: 'form' }}
+                            reducer={state => state}>
+                            <EditableForm />
+                        </CheckoutProvider>
+                    </CartProvider>
+                </UserContextProvider>
             </MockedProvider>
         );
 

react-components/src/components/Checkout/__test__/editableForm.test.js

@@ -29,6 +29,7 @@ import MUTATION_SET_BILLING_ADDRESS from '../../queries/mutation_set_billing_add
 import MUTATION_SET_SHIPPING_METHOD from '../../queries/mutation_set_shipping_method.graphql';
 import MUTATION_SET_EMAIL from '../../queries/mutation_set_email_on_cart.graphql';
 import { useCheckoutState } from './checkoutContext';
+import { useUserContext } from '../../context/UserContext';
 
 /**
  * The EditableForm component renders the actual edit forms for the sections
@@ -39,7 +40,7 @@ const EditableForm = props => {
     const [{ cart, cartId }, cartDispatch] = useCartState();
     const [{ editing, shippingAddress, shippingMethod, paymentMethod, billingAddress }, dispatch] = useCheckoutState();
     const { error: countriesError, countries } = useCountries();
-
+    const [{ isSignedIn }] = useUserContext();
     const [setShippingAddressesOnCart, { data, error }] = useMutation(MUTATION_SET_SHIPPING_ADDRESS);
 
     const [
@@ -88,7 +89,9 @@ const EditableForm = props => {
     const handleSubmitAddressForm = useCallback(
         formValues => {
             setShippingAddressesOnCart({ variables: { cartId: cartId, countryCode: 'US', ...formValues } });
-            setGuestEmailOnCart({ variables: { cartId: cartId, email: formValues.email } });
+            if (!isSignedIn) {
+                setGuestEmailOnCart({ variables: { cartId: cartId, email: formValues.email } });
+            }
         },
         [dispatch, setShippingAddressesOnCart]
     );
@@ -150,13 +153,14 @@ const EditableForm = props => {
         [dispatch, submitShippingMethod]
     );
 
-    if (data && guestEmailResult) {
+    if (data && (isSignedIn || guestEmailResult)) {
+        const guestEmail = guestEmailResult ? { email: guestEmailResult.setGuestEmailOnCart.cart.email } : {};
         const newShippingAddress = data.setShippingAddressesOnCart.cart.shipping_addresses[0];
         dispatch({
             type: 'setShippingAddress',
             shippingAddress: {
                 ...newShippingAddress,
-                email: guestEmailResult.setGuestEmailOnCart.cart.email,
+                ...guestEmail,
                 country: newShippingAddress.country.code,
                 region_code: newShippingAddress.region.code
             }

react-components/src/components/Checkout/editableForm.js

@@ -13,60 +13,55 @@
  ******************************************************************************/
 import React, { Fragment, useCallback } from 'react';
 import { shape, string } from 'prop-types';
-import { useMutation } from '@apollo/react-hooks';
+
+import { Price } from '@magento/peregrine';
 import { useTranslation } from 'react-i18next';
 
 import PaymentMethodSummary from './paymentMethodSummary';
 import ShippingAddressSummary from './shippingAddressSummary';
 import ShippingMethodSummary from './shippingMethodSummary';
+import LoadingIndicator from '../LoadingIndicator';
 import Section from './section';
 import Button from '../Button';
-import { Price } from '@magento/peregrine';
-import MUTATION_PLACE_ORDER from '../../queries/mutation_place_order.graphql';
-import { useCartState } from '../Minicart/cartContext';
-import { useCheckoutState } from './checkoutContext';
+import useOverview from './useOverview';
 
 /**
  * The Overview component renders summaries for each section of the editable
  * form.
  */
 const Overview = props => {
     const { classes } = props;
-    const [{ cart, cartId }, cartDispatch] = useCartState();
-    const [{ shippingAddress, shippingMethod, paymentMethod }, dispatch] = useCheckoutState();
     const [t] = useTranslation('checkout');
 
-    const [placeOrder, { data, error }] = useMutation(MUTATION_PLACE_ORDER);
+    const [
+        { shippingAddress, shippingMethod, paymentMethod, cart, inProgress },
+        { placeOrder, checkoutDispatch }
+    ] = useOverview();
 
     const ready = shippingAddress && paymentMethod && shippingMethod;
 
-    const submitOrder = useCallback(() => {
-        placeOrder({ variables: { cartId: cartId } });
-    }, [placeOrder]);
-
-    if (error) {
-        cartDispatch({ type: 'error', error: error.toString() });
-    }
-
-    if (data) {
-        dispatch({ type: 'placeOrder', order: data.placeOrder.order });
+    if (inProgress) {
+        return <LoadingIndicator message="Placing order"></LoadingIndicator>;
     }
+    const submitOrder = async () => {
+        await placeOrder(cart.id);
+    };
 
     return (
         <Fragment>
             <div className={classes.body}>
                 <Section
                     label={t('checkout:ship-to', 'Ship To')}
                     onClick={() => {
-                        dispatch({ type: 'setEditing', editing: 'address' });
+                        checkoutDispatch({ type: 'setEditing', editing: 'address' });
                     }}
                     showEditIcon={!!shippingAddress}>
                     <ShippingAddressSummary classes={classes} />
                 </Section>
                 <Section
                     label={t('checkout:pay-with', 'Pay With')}
                     onClick={() => {
-                        dispatch({ type: 'setEditing', editing: 'paymentMethod' });
+                        checkoutDispatch({ type: 'setEditing', editing: 'paymentMethod' });
                     }}
                     showEditIcon={!!paymentMethod}
                     disabled={!shippingAddress}>
@@ -75,7 +70,7 @@ const Overview = props => {
                 <Section
                     label={t('checkout:use', 'Use')}
                     onClick={() => {
-                        dispatch({ type: 'setEditing', editing: 'shippingMethod' });
+                        checkoutDispatch({ type: 'setEditing', editing: 'shippingMethod' });
                     }}
                     showEditIcon={!!shippingMethod}
                     disabled={!shippingAddress}>
@@ -88,9 +83,11 @@ const Overview = props => {
                 </Section>
             </div>
             <div className={classes.footer}>
-                <Button onClick={() => dispatch({ type: 'cancelCheckout' })}>
+                <Button onClick={() => checkoutDispatch({ type: 'cancelCheckout' })}>
+                    {' '}
                     {t('checkout:back-to-cart', 'Back to cart')}
                 </Button>
+
                 <Button priority="high" disabled={!ready} onClick={submitOrder}>
                     {t('checkout:confirm-order', 'Confirm Order')}
                 </Button>

react-components/src/components/Checkout/overview.js

@@ -79,11 +79,13 @@ describe('<Braintree />', () => {
         let mockCartDispatchFn = jest.fn(state => state);
 
         render(
-            <CartProvider initialState={{}} reducerFactory={() => mockCartDispatchFn}>
-                <CheckoutProvider initialState={{ braintreeToken: 'my-sample-token' }} reducer={state => state}>
-                    <Braintree accept="card" />
-                </CheckoutProvider>
-            </CartProvider>
+            <MockedProvider>
+                <CartProvider initialState={{}} reducerFactory={() => mockCartDispatchFn}>
+                    <CheckoutProvider initialState={{ braintreeToken: 'my-sample-token' }} reducer={state => state}>
+                        <Braintree accept="card" />
+                    </CheckoutProvider>
+                </CartProvider>
+            </MockedProvider>
         );
 
         await wait(() => dropIn.create.mock.calls.length === 1 && mockOnFn.mock.calls.length === 2);
@@ -120,11 +122,13 @@ describe('<Braintree />', () => {
         };
 
         render(
-            <CartProvider initialState={cartState} reducerFactory={() => mockCartDispatchFn}>
-                <CheckoutProvider initialState={{ braintreeToken: 'my-sample-token' }} reducer={state => state}>
-                    <Braintree accept="paypal" />
-                </CheckoutProvider>
-            </CartProvider>
+            <MockedProvider>
+                <CartProvider initialState={cartState} reducerFactory={() => mockCartDispatchFn}>
+                    <CheckoutProvider initialState={{ braintreeToken: 'my-sample-token' }} reducer={state => state}>
+                        <Braintree accept="paypal" />
+                    </CheckoutProvider>
+                </CartProvider>
+            </MockedProvider>
         );
 
         await wait(() => dropIn.create.mock.calls.length === 1 && mockOnFn.mock.calls.length === 2);
@@ -160,11 +164,13 @@ describe('<Braintree />', () => {
 
         // Step 1, create Dropin
         render(
-            <CartProvider initialState={{}} reducerFactory={() => mockCartDispatchFn}>
-                <CheckoutProvider initialState={{ braintreeToken: 'my-sample-token' }} reducer={state => state}>
-                    <Braintree accept="card" />
-                </CheckoutProvider>
-            </CartProvider>
+            <MockedProvider>
+                <CartProvider initialState={{}} reducerFactory={() => mockCartDispatchFn}>
+                    <CheckoutProvider initialState={{ braintreeToken: 'my-sample-token' }} reducer={state => state}>
+                        <Braintree accept="card" />
+                    </CheckoutProvider>
+                </CartProvider>
+            </MockedProvider>
         );
 
         await wait(() => dropIn.create.mock.calls.length === 1 && mockOnFn.mock.calls.length === 2);