);
}
```
We're using some simple state here to capture the form values, as well as tracking a "loading" state when the form is submitted.
3. **Fill in** the `submitRegister` function with the request logic.
```js {5-19} showLineNumbers={false}
const RegisterForm = () => {
...
const submitRegister = async () => {
setLoading(true);
setErrorMsg(null);
const registerResp = await registerCustomer({
email,
firstName,
lastName,
password,
});
setLoading(false);
if (!registerResp.success) {
setErrorMsg(registerResp.error ?? "An unexpected error occurred");
}
}
return ...
}
```
`registerCustomer` is another server function, which doesn't currently accept the right parameters.
4. **Open** the file `components/account/_actions/register-customer.ts` and **update** the function to accept the proper parameters and return a generic error for the time being.
```js {2-5,7-10,13-15} showLineNumbers={false}
export const registerCustomer = async ({
email,
firstName,
lastName,
password,
}: {
email: string,
firstName: string,
lastName: string,
password: string,
}) => {
return Promise.resolve(
{ success: false, error: "Registration not implemented." }
);
};
```
5. Since there's not yet a navigation link to the registration page, **browse** directly to `http://localhost:3000/register` (or the correct port for your own local server). You can try submitting the form for a successful HTTP response, but you'll currently receive the "Registration. is not implemented" error.
[Example Code](https://github.com/bigcommerce-edu/lab-nextjs-storefront/compare/e-cust-01-pre...e-cust-01-post?diff=split)
## Add the Registration Logic
1. **Open** the file `components/account/_actions/register-customer.ts` and **add** the GraphQL and type definitions related to the registration mutation.
```js {3-61} showLineNumbers={false}
import ...
const registerQuery = `
mutation Register(
$email: String!,
$firstName: String!,
$lastName: String!,
$password: String!
) {
customer {
registerCustomer(
input: {
email: $email,
firstName: $firstName,
lastName: $lastName,
password: $password
}
) {
customer {
entityId
}
errors {
... on EmailAlreadyInUseError {
message
}
... on AccountCreationDisabledError {
message
}
... on CustomerRegistrationError {
message
}
... on ValidationError {
message
}
}
}
}
}
`;
interface RegisterVars {
email: string;
firstName: string;
lastName: string;
password: string;
}
interface RegisterResp {
data: {
customer: {
registerCustomer: {
customer: {
entityId: number;
};
errors?: {
message: string;
}[]
}
}
}
}
/**
* Register a new customer
*/
export const registerCustomer = async ({
...
```
2. **Update** the `registerCustomer` function to perform the mutation.
```js {7-32} showLineNumbers={false}
export const registerCustomer = async ({
...
}: {
...
}) => {
try {
const customerResp = await bcGqlFetch