[chore?]: Use createCustomer gql mutation instead of create-account REST endpoint

packages/peregrine/lib/store/actions/user/__tests__/asyncActions.spec.js

@@ -4,7 +4,6 @@ import {
     signIn,
     signOut,
     getUserDetails,
-    createAccount,
     resetPassword
 } from '../asyncActions';
 
@@ -23,45 +22,6 @@ const credentials = {
     password: 'PASSWORD'
 };
 
-const accountInfo = {
-    customer: {
-        email: 'EMAIL'
-    },
-    password: 'PASSWORD'
-};
-
-describe('#createAccount', () => {
-    test('it returns a thunk', () => {
-        expect(createAccount()).toBeInstanceOf(Function);
-    });
-
-    test('its thunk dispatches createAccount', async () => {
-        await createAccount(accountInfo)(...thunkArgs);
-
-        expect(dispatch).toHaveBeenCalledWith(actions.createAccount.request());
-    });
-
-    test('its thunk dispatches signIn', async () => {
-        await createAccount(accountInfo)(...thunkArgs);
-
-        expect(dispatch).toHaveBeenNthCalledWith(2, expect.any(Function));
-    });
-
-    test('its thunk dispatches createAccount on invalid account info', async () => {
-        const error = new TypeError('ERROR');
-        request.mockRejectedValueOnce(error);
-
-        try {
-            await createAccount({})(...thunkArgs);
-        } catch (e) {}
-
-        expect(dispatch).toHaveBeenNthCalledWith(
-            2,
-            actions.createAccount.receive(error)
-        );
-    });
-});
-
 describe('signIn', () => {
     test('it returns a thunk', () => {
         expect(signIn()).toBeInstanceOf(Function);

packages/peregrine/lib/store/actions/user/asyncActions.js

@@ -78,31 +78,6 @@ export const getUserDetails = () =>
         }
     };
 
-export const createAccount = accountInfo => async dispatch => {
-    dispatch(actions.createAccount.request());
-
-    try {
-        await request('/rest/V1/customers', {
-            method: 'POST',
-            body: JSON.stringify(accountInfo)
-        });
-
-        await dispatch(
-            signIn({
-                username: accountInfo.customer.email,
-                password: accountInfo.password
-            })
-        );
-    } catch (error) {
-        dispatch(actions.createAccount.receive(error));
-
-        /*
-         * Throw error again to notify async action which dispatched handleCreateAccount.
-         */
-        throw error;
-    }
-};
-
 export const resetPassword = ({ email }) =>
     async function thunk(...args) {
         const [dispatch] = args;

packages/peregrine/lib/store/reducers/user.js

@@ -17,9 +17,7 @@ const initialState = {
         firstname: '',
         lastname: ''
     },
-    createAccountError: null,
     getDetailsError: null,
-    isCreatingAccount: false,
     isGettingDetails: false,
     isResettingPassword: false,
     isSignedIn: isSignedIn(),
@@ -74,28 +72,6 @@ const reducerMap = {
             isGettingDetails: false
         };
     },
-    [actions.createAccount.request]: state => {
-        return {
-            ...state,
-            createAccountError: null,
-            isCreatingAccount: true
-        };
-    },
-    [actions.createAccount.receive]: (state, { payload, error }) => {
-        if (error) {
-            return {
-                ...state,
-                createAccountError: payload,
-                isCreatingAccount: false
-            };
-        }
-
-        return {
-            ...state,
-            createAccountError: null,
-            isCreatingAccount: false
-        };
-    },
     [actions.resetPassword.request]: state => ({
         ...state,
         isResettingPassword: true

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

@@ -34,7 +34,7 @@ export const useAuthModal = props => {
     } = props;
 
     const [username, setUsername] = useState('');
-    const [{ currentUser }, { createAccount, signOut }] = useUserContext();
+    const [{ currentUser }, { signOut }] = useUserContext();
 
     // If the user is authed, the only valid view is "MY_ACCOUNT".
     // view an also be `MENU` but in that case we don't want to act.
@@ -49,13 +49,9 @@ export const useAuthModal = props => {
         closeDrawer();
     }, [closeDrawer, showMainMenu]);
 
-    const handleCreateAccount = useCallback(
-        async values => {
-            await createAccount(values);
-            showMyAccount();
-        },
-        [createAccount, showMyAccount]
-    );
+    const handleCreateAccount = useCallback(() => {
+        showMyAccount();
+    }, [showMyAccount]);
 
     const handleSignOut = useCallback(() => {
         // TODO: Get history from router context when implemented.

packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js

@@ -1,24 +1,61 @@
-import { useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
+import { useMutation } from '@apollo/react-hooks';
 import { useUserContext } from '@magento/peregrine/lib/context/user';
 
 /**
- * Returns props necessary to render CreateAccount component.
+ * Returns props necessary to render CreateAccount component. In particular this
+ * talon handles the submission flow by first doing a pre-submisson validation
+ * and then, on success, invokes the `onSubmit` prop, which is usually the action.
  *
  * @param {Object} props.initialValues initial values to sanitize and seed the form
+ * @param {Function} props.onSubmit the post submit callback
+ * @param {String} query the graphql query for creating the account
  * @returns {{
- *   hasError: boolean,
+ *   errors: array,
+ *   handleSubmit: function,
  *   isDisabled: boolean,
  *   isSignedIn: boolean,
  *   initialValues: object
  * }}
  */
 export const useCreateAccount = props => {
-    const { initialValues = {} } = props;
+    const { initialValues = {}, onSubmit, query } = props;
+    const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const [
-        { createAccountError, isCreatingAccount, isSignedIn }
-    ] = useUserContext();
-    const hasError = !!createAccountError;
+    const [{ isSignedIn }, { signIn }] = useUserContext();
+    const [createAccount, { error }] = useMutation(query);
+
+    const handleSubmit = useCallback(
+        async formValues => {
+            setIsSubmitting(true);
+            try {
+                // Try to create an account with the mutation.
+                await createAccount({
+                    variables: {
+                        email: formValues.customer.email,
+                        firstname: formValues.customer.firstname,
+                        lastname: formValues.customer.lastname,
+                        password: formValues.password
+                    }
+                });
+
+                // Then sign the user in.
+                await signIn({
+                    username: formValues.customer.email,
+                    password: formValues.password
+                });
+
+                // Finally, invoke the post-submission callback.
+                onSubmit();
+            } catch (error) {
+                if (process.env.NODE_ENV === 'development') {
+                    console.error(error);
+                }
+                setIsSubmitting(false);
+            }
+        },
+        [createAccount, onSubmit, signIn]
+    );
 
     const sanitizedInitialValues = useMemo(() => {
         const { email, firstName, lastName, ...rest } = initialValues;
@@ -30,8 +67,9 @@ export const useCreateAccount = props => {
     }, [initialValues]);
 
     return {
-        hasError,
-        isDisabled: isCreatingAccount,
+        errors: (error && error.graphQLErrors) || [],
+        handleSubmit,
+        isDisabled: isSubmitting,
         isSignedIn,
         initialValues: sanitizedInitialValues
     };

packages/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage.js

@@ -1,5 +1,4 @@
 import { useCallback, useMemo } from 'react';
-import { useUserContext } from '@magento/peregrine/lib/context/user';
 
 const validCreateAccountParams = ['email', 'firstName', 'lastName'];
 
@@ -22,17 +21,12 @@ const getCreateAccountInitialValues = search => {
  * }}
  */
 export const useCreateAccountPage = props => {
-    const [, { createAccount }] = useUserContext();
     // TODO replace with useHistory in React Router 5.1
     const { history } = props;
 
-    const handleCreateAccount = useCallback(
-        async accountInfo => {
-            await createAccount(accountInfo);
-            history.push('/');
-        },
-        [createAccount, history]
-    );
+    const handleCreateAccount = useCallback(() => {
+        history.push('/');
+    }, [history]);
 
     const initialValues = useMemo(
         () => getCreateAccountInitialValues(window.location.search),

packages/venia-ui/lib/components/CreateAccount/__tests__/createAccount.spec.js

@@ -4,15 +4,25 @@ import { Form } from 'informed';
 import { createTestInstance } from '@magento/peregrine';
 
 import CreateAccount from '../createAccount';
+import { useMutation } from '@apollo/react-hooks';
 
+jest.mock('@apollo/react-hooks', () => ({
+    useMutation: jest.fn().mockImplementation(() => [
+        jest.fn(),
+        {
+            error: null
+        }
+    ])
+}));
 jest.mock('../../../util/formValidators');
 jest.mock('@magento/peregrine/lib/context/user', () => {
     const userState = {
-        createAccountError: null,
         isCreatingAccount: false,
         isSignedIn: false
     };
-    const userApi = {};
+    const userApi = {
+        signIn: jest.fn()
+    };
     const useUserContext = jest.fn(() => [userState, userApi]);
 
     return { useUserContext };
@@ -37,18 +47,32 @@ test('attaches the submit handler', () => {
 });
 
 test('calls onSubmit if validation passes', async () => {
+    useMutation.mockImplementationOnce(() => [
+        jest.fn(),
+        {
+            called: true,
+            loading: false,
+            error: null,
+            data: {}
+        }
+    ]);
+
     const { root } = createTestInstance(<CreateAccount {...props} />);
 
     const form = root.findByType(Form);
-    const { formApi } = form.instance;
-
-    // touch fields, call validators, call onSubmit
-    await act(() => {
-        formApi.submitForm();
+    const { controller } = form.instance;
+    await act(async () => {
+        await form.props.onSubmit({
+            customer: {
+                email: 'test@example.com',
+                firstname: 'tester',
+                lastname: 'guy'
+            },
+            password: 'foo'
+        });
+        expect(props.onSubmit).toHaveBeenCalledTimes(1);
     });
-
-    const { errors } = root.findByType(Form).instance.controller.state;
+    const { errors } = controller.state;
 
     expect(Object.keys(errors)).toHaveLength(0);
-    expect(props.onSubmit).toHaveBeenCalledTimes(1);
 });

packages/venia-ui/lib/components/CreateAccount/createAccount.js

@@ -18,19 +18,31 @@ import {
 } from '../../util/formValidators';
 import defaultClasses from './createAccount.css';
 import { useCreateAccount } from '@magento/peregrine/lib/talons/CreateAccount/useCreateAccount';
+import CREATE_ACCOUNT_MUTATION from '../../queries/createAccount.graphql';
 
 const LEAD =
     'Check out faster, use multiple addresses, track orders and more by creating an account!';
 
 const CreateAccount = props => {
     const talonProps = useCreateAccount({
-        initialValues: props.initialValues
+        initialValues: props.initialValues,
+        query: CREATE_ACCOUNT_MUTATION,
+        onSubmit: props.onSubmit
     });
 
-    const { hasError, isDisabled, isSignedIn, initialValues } = talonProps;
+    const {
+        errors,
+        handleSubmit,
+        isDisabled,
+        isSignedIn,
+        initialValues
+    } = talonProps;
 
-    const errorMessage = hasError
-        ? 'An error occurred. Please try again.'
+    // Map over any errors we get and display an appropriate error.
+    const errorMessage = errors.length
+        ? errors
+              .map(({ message }) => message)
+              .reduce((acc, msg) => acc + '\n' + msg, '')
         : null;
 
     if (isSignedIn) {
@@ -43,7 +55,7 @@ const CreateAccount = props => {
         <Form
             className={classes.root}
             initialValues={initialValues}
-            onSubmit={props.onSubmit}
+            onSubmit={handleSubmit}
         >
             <p className={classes.lead}>{LEAD}</p>
             <Field label="First Name" required={true}>