diff --git a/packages/peregrine/lib/store/reducers/user.js b/packages/peregrine/lib/store/reducers/user.js
index 71bba7561c..30b959b80a 100755
--- a/packages/peregrine/lib/store/reducers/user.js
+++ b/packages/peregrine/lib/store/reducers/user.js
@@ -19,11 +19,11 @@ const initialState = {
},
createAccountError: null,
getDetailsError: null,
- isCreatingAccount: null,
- isGettingDetails: null,
- isResettingPassword: null,
+ isCreatingAccount: false,
+ isGettingDetails: false,
+ isResettingPassword: false,
isSignedIn: isSignedIn(),
- isSigningIn: null,
+ isSigningIn: false,
resetPasswordError: null,
signInError: null
};
diff --git a/packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js b/packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js
new file mode 100644
index 0000000000..930ebce044
--- /dev/null
+++ b/packages/peregrine/lib/talons/CreateAccount/useCreateAccount.js
@@ -0,0 +1,38 @@
+import { useMemo } from 'react';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+/**
+ * Returns props necessary to render CreateAccount component.
+ *
+ * @param {Object} props.initialValues initial values to sanitize and seed the form
+ * @returns {{
+ * hasError: boolean,
+ * isDisabled: boolean,
+ * isSignedIn: boolean,
+ * initialValues: object
+ * }}
+ */
+export const useCreateAccount = props => {
+ const { initialValues = {} } = props;
+
+ const [
+ { createAccountError, isCreatingAccount, isSignedIn }
+ ] = useUserContext();
+ const hasError = !!createAccountError;
+
+ const sanitizedInitialValues = useMemo(() => {
+ const { email, firstName, lastName, ...rest } = initialValues;
+
+ return {
+ customer: { email, firstname: firstName, lastname: lastName },
+ ...rest
+ };
+ }, [initialValues]);
+
+ return {
+ hasError,
+ isDisabled: isCreatingAccount,
+ isSignedIn,
+ initialValues: sanitizedInitialValues
+ };
+};
diff --git a/packages/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage.js b/packages/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage.js
new file mode 100644
index 0000000000..603d13f79a
--- /dev/null
+++ b/packages/peregrine/lib/talons/CreateAccountPage/useCreateAccountPage.js
@@ -0,0 +1,46 @@
+import { useCallback, useMemo } from 'react';
+import { useUserContext } from '@magento/peregrine/lib/context/user';
+
+const validCreateAccountParams = ['email', 'firstName', 'lastName'];
+
+const getCreateAccountInitialValues = search => {
+ const params = new URLSearchParams(search);
+
+ return validCreateAccountParams.reduce(
+ (values, param) => ({ ...values, [param]: params.get(param) }),
+ {}
+ );
+};
+
+/**
+ * Returns props necessary to render CreateAccountPage component.
+ *
+ * @param {Object} props.history router history object
+ * @returns {{
+ * handleCreateAccount: function,
+ * initialValues: object
+ * }}
+ */
+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 initialValues = useMemo(
+ () => getCreateAccountInitialValues(window.location.search),
+ []
+ );
+
+ return {
+ handleCreateAccount,
+ initialValues
+ };
+};
diff --git a/packages/venia-ui/lib/components/CreateAccount/createAccount.js b/packages/venia-ui/lib/components/CreateAccount/createAccount.js
index a997d7fb34..e519ffc922 100644
--- a/packages/venia-ui/lib/components/CreateAccount/createAccount.js
+++ b/packages/venia-ui/lib/components/CreateAccount/createAccount.js
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React from 'react';
import { Redirect } from '@magento/venia-drivers';
import { func, shape, string } from 'prop-types';
import { Form } from 'informed';
@@ -17,28 +17,17 @@ import {
hasLengthAtLeast
} from '../../util/formValidators';
import defaultClasses from './createAccount.css';
-import { useUserContext } from '@magento/peregrine/lib/context/user';
+import { useCreateAccount } from '@magento/peregrine/lib/talons/CreateAccount/useCreateAccount';
const LEAD =
'Check out faster, use multiple addresses, track orders and more by creating an account!';
const CreateAccount = props => {
- const { initialValues = {}, onSubmit } = props;
+ const talonProps = useCreateAccount({
+ initialValues: props.initialValues
+ });
- const [
- { createAccountError, isCreatingAccount, isSignedIn }
- ] = useUserContext();
- const hasError = !!createAccountError;
-
- const classes = mergeClasses(defaultClasses, props.classes);
- const sanitizedInitialValues = useMemo(() => {
- const { email, firstName, lastName, ...rest } = initialValues;
-
- return {
- customer: { email, firstname: firstName, lastname: lastName },
- ...rest
- };
- }, [initialValues]);
+ const { hasError, isDisabled, isSignedIn, initialValues } = talonProps;
const errorMessage = hasError
? 'An error occurred. Please try again.'
@@ -48,11 +37,13 @@ const CreateAccount = props => {
return