@graphcommerce/magento-customer 3.0.1

package/components/SignOutForm/index.tsx

@@ -0,0 +1,30 @@
+import { FormState, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import React from 'react'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { SignOutFormDocument } from './SignOutForm.gql'
+
+type SignOutFormProps = { button: (props: { formState: FormState<unknown> }) => React.ReactNode }
+
+export default function SignOutForm(props: SignOutFormProps) {
+  const { button } = props
+  const router = useRouter()
+  const { handleSubmit, formState, error } = useFormGqlMutation(
+    SignOutFormDocument,
+    {
+      onComplete: () => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        router.push('/')
+      },
+    },
+    { errorPolicy: 'all' },
+  )
+  const submitHandler = handleSubmit(() => {})
+
+  return (
+    <form onSubmit={submitHandler} noValidate>
+      {button({ formState })}
+      <ApolloCustomerErrorAlert error={error} />
+    </form>
+  )
+}

package/components/SignUpForm/SignUp.gql.ts

@@ -0,0 +1,22 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const SignUpDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignUp"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"email"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"password"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"prefix"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"firstname"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"middlename"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"lastname"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"suffix"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"taxvat"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"gender"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"isSubscribed"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}},"defaultValue":{"kind":"BooleanValue","value":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"dateOfBirth"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createCustomer"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"password"},"value":{"kind":"Variable","name":{"kind":"Name","value":"password"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"prefix"},"value":{"kind":"Variable","name":{"kind":"Name","value":"prefix"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"firstname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"firstname"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"middlename"},"value":{"kind":"Variable","name":{"kind":"Name","value":"middlename"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"lastname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastname"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"suffix"},"value":{"kind":"Variable","name":{"kind":"Name","value":"suffix"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"taxvat"},"value":{"kind":"Variable","name":{"kind":"Name","value":"taxvat"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"gender"},"value":{"kind":"Variable","name":{"kind":"Name","value":"gender"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"is_subscribed"},"value":{"kind":"Variable","name":{"kind":"Name","value":"isSubscribed"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"date_of_birth"},"value":{"kind":"Variable","name":{"kind":"Name","value":"dateOfBirth"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"default_billing"}},{"kind":"Field","name":{"kind":"Name","value":"default_shipping"}},{"kind":"Field","name":{"kind":"Name","value":"addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"middlename"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country_code"}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"region"}},{"kind":"Field","name":{"kind":"Name","value":"region_code"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}},{"kind":"Field","name":{"kind":"Name","value":"vat_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"middlename"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"gender"}},{"kind":"Field","name":{"kind":"Name","value":"is_subscribed"}},{"kind":"Field","name":{"kind":"Name","value":"date_of_birth"}},{"kind":"Field","name":{"kind":"Name","value":"taxvat"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"generateCustomerToken"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}},{"kind":"Argument","name":{"kind":"Name","value":"password"},"value":{"kind":"Variable","name":{"kind":"Name","value":"password"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"token"}}]}}]}}]} as unknown as DocumentNode<SignUpMutation, SignUpMutationVariables>;
+export type SignUpMutationVariables = Types.Exact<{
+  email: Types.Scalars['String'];
+  password: Types.Scalars['String'];
+  prefix: Types.Scalars['String'];
+  firstname: Types.Scalars['String'];
+  middlename?: Types.Maybe<Types.Scalars['String']>;
+  lastname: Types.Scalars['String'];
+  suffix?: Types.Maybe<Types.Scalars['String']>;
+  taxvat?: Types.Maybe<Types.Scalars['String']>;
+  gender?: Types.Maybe<Types.Scalars['Int']>;
+  isSubscribed?: Types.Maybe<Types.Scalars['Boolean']>;
+  dateOfBirth?: Types.Maybe<Types.Scalars['String']>;
+}>;
+
+
+export type SignUpMutation = { createCustomer?: Types.Maybe<{ customer: { default_billing?: Types.Maybe<string>, default_shipping?: Types.Maybe<string>, email?: Types.Maybe<string>, prefix?: Types.Maybe<string>, firstname?: Types.Maybe<string>, middlename?: Types.Maybe<string>, lastname?: Types.Maybe<string>, suffix?: Types.Maybe<string>, gender?: Types.Maybe<number>, is_subscribed?: Types.Maybe<boolean>, date_of_birth?: Types.Maybe<string>, taxvat?: Types.Maybe<string>, addresses?: Types.Maybe<Array<Types.Maybe<{ id?: Types.Maybe<number>, prefix?: Types.Maybe<string>, firstname?: Types.Maybe<string>, middlename?: Types.Maybe<string>, lastname?: Types.Maybe<string>, suffix?: Types.Maybe<string>, city?: Types.Maybe<string>, company?: Types.Maybe<string>, country_code?: Types.Maybe<Types.CountryCodeEnum>, postcode?: Types.Maybe<string>, street?: Types.Maybe<Array<Types.Maybe<string>>>, telephone?: Types.Maybe<string>, vat_id?: Types.Maybe<string>, region?: Types.Maybe<{ region?: Types.Maybe<string>, region_code?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }>>> } }>, generateCustomerToken?: Types.Maybe<{ token?: Types.Maybe<string> }> };

package/components/SignUpForm/SignUp.graphql

@@ -0,0 +1,36 @@
+mutation SignUp(
+  $email: String!
+  $password: String!
+  $prefix: String!
+  $firstname: String!
+  $middlename: String
+  $lastname: String!
+  $suffix: String
+  $taxvat: String
+  $gender: Int
+  $isSubscribed: Boolean = false
+  $dateOfBirth: String
+) {
+  createCustomer(
+    input: {
+      email: $email
+      password: $password
+      prefix: $prefix
+      firstname: $firstname
+      middlename: $middlename
+      lastname: $lastname
+      suffix: $suffix
+      taxvat: $taxvat
+      gender: $gender
+      is_subscribed: $isSubscribed
+      date_of_birth: $dateOfBirth
+    }
+  ) {
+    customer {
+      ...CustomerInfo
+    }
+  }
+  generateCustomerToken(email: $email, password: $password) {
+    token
+  }
+}

package/components/SignUpForm/SignUpForm.tsx

@@ -0,0 +1,90 @@
+import { FormControlLabel, Switch, TextField } from '@material-ui/core'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { Button, FormActions, FormRow } from '@graphcommerce/next-ui'
+import { useFormGqlMutation, useFormPersist } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import NameFields from '../NameFields'
+import { SignUpDocument, SignUpMutation, SignUpMutationVariables } from './SignUp.gql'
+
+type SignUpFormProps = {
+  email?: string
+}
+
+export default function SignUpForm(props: SignUpFormProps) {
+  const { email } = props
+  const form = useFormGqlMutation<
+    SignUpMutation,
+    SignUpMutationVariables & { confirmPassword?: string }
+  >(SignUpDocument, { defaultValues: { email } })
+
+  useFormPersist({ form, name: 'SignUp', exclude: ['password', 'confirmPassword'] })
+  const { muiRegister, handleSubmit, required, watch, formState, error } = form
+  const [remainingError, inputError] = graphqlErrorByCategory({ category: 'graphql-input', error })
+
+  const submitHandler = handleSubmit(() => {})
+  const watchPassword = watch('password')
+
+  return (
+    <form onSubmit={submitHandler} noValidate>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.password || !!inputError}
+          label='Password'
+          autoFocus
+          autoComplete='new-password'
+          required={required.password}
+          {...muiRegister('password', {
+            required: required.password,
+            minLength: { value: 8, message: 'Password must have at least 8 characters' },
+          })}
+          helperText={
+            formState.errors.password?.message ||
+            inputError?.message ||
+            'At least 8 characters long, must contain a symbol'
+          }
+          disabled={formState.isSubmitting}
+        />
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.confirmPassword}
+          label='Confirm Password'
+          autoComplete='new-password'
+          required
+          {...muiRegister('confirmPassword', {
+            required: true,
+            validate: (value) => value === watchPassword || "Passwords don't match",
+          })}
+          helperText={formState.errors.confirmPassword?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <NameFields form={form} prefix />
+
+      <FormControlLabel
+        control={<Switch color='primary' />}
+        {...muiRegister('isSubscribed', { required: required.isSubscribed })}
+        disabled={formState.isSubmitting}
+        label='Subscribe to newsletter'
+      />
+
+      <ApolloCustomerErrorAlert error={remainingError} />
+
+      <FormActions>
+        <Button
+          type='submit'
+          variant='contained'
+          color='primary'
+          size='large'
+          loading={formState.isSubmitting}
+        >
+          Create Account
+        </Button>
+      </FormActions>
+    </form>
+  )
+}

package/components/SignUpForm/SignUpFormInline.tsx

@@ -0,0 +1,113 @@
+import { makeStyles, TextField, Theme } from '@material-ui/core'
+import { Button, Form, FormRow } from '@graphcommerce/next-ui'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import React, { PropsWithChildren } from 'react'
+import { SignUpMutationVariables, SignUpMutation, SignUpDocument } from './SignUp.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    buttonFormRow: {
+      padding: 0,
+      [theme.breakpoints.up('sm')]: {
+        gridTemplateColumns: 'minmax(200px, 3.5fr) 1fr',
+      },
+    },
+    form: {
+      padding: 0,
+    },
+    row: {
+      padding: 0,
+    },
+    button: {
+      minWidth: 'max-content',
+    },
+    buttonContainer: {
+      alignSelf: 'center',
+    },
+  }),
+  { name: 'SignUpFormInline' },
+)
+
+type SignUpFormInlineProps = Pick<SignUpMutationVariables, 'email'> & {
+  helperList?: React.ReactNode
+  firstname?: string
+  lastname?: string
+  onSubmitted?: () => void
+}
+
+export default function SignUpFormInline({
+  email,
+  helperList,
+  firstname,
+  lastname,
+  onSubmitted = () => {},
+}: PropsWithChildren<SignUpFormInlineProps>) {
+  const classes = useStyles()
+  const form = useFormGqlMutation<
+    SignUpMutation,
+    SignUpMutationVariables & { confirmPassword?: string }
+  >(SignUpDocument, {
+    // todo(paales): This causes dirty data to be send to the backend.
+    defaultValues: {
+      email,
+      prefix: '-',
+      firstname: firstname ?? '-',
+      lastname: lastname ?? '-',
+    },
+  })
+  const { muiRegister, watch, handleSubmit, required, formState, error } = form
+  const submitHandler = handleSubmit(onSubmitted)
+  const watchPassword = watch('password')
+
+  return (
+    <Form onSubmit={submitHandler} noValidate classes={{ root: classes.form }}>
+      <FormRow key='inline-signup' classes={{ root: classes.row }}>
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.password || !!error?.message}
+          label='Password'
+          autoFocus
+          autoComplete='new-password'
+          id='new-password'
+          required={required.password}
+          {...muiRegister('password', { required: required.password })}
+          helperText={error?.message}
+          disabled={formState.isSubmitting}
+        />
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.confirmPassword || !!error?.message}
+          label='Confirm password'
+          autoComplete='new-password'
+          required
+          {...muiRegister('confirmPassword', {
+            required: true,
+            validate: (value) => value === watchPassword,
+          })}
+          helperText={!!formState.errors.confirmPassword && 'Passwords should match'}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <FormRow key='signup-submit'>
+        <FormRow classes={{ root: classes.buttonFormRow }}>
+          <div>{helperList}</div>
+          <div className={classes.buttonContainer}>
+            <Button
+              fullWidth
+              type='submit'
+              loading={formState.isSubmitting}
+              color='secondary'
+              variant='pill'
+              text='bold'
+            >
+              Sign up
+            </Button>
+          </div>
+        </FormRow>
+      </FormRow>
+    </Form>
+  )
+}

package/components/UpdateCustomerEmailForm/UpdateCustomerEmail.gql.ts

@@ -0,0 +1,13 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const UpdateCustomerEmailDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCustomerEmail"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"email"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"password"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateCustomerEmail"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}},{"kind":"Argument","name":{"kind":"Name","value":"password"},"value":{"kind":"Variable","name":{"kind":"Name","value":"password"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"email"}}]}}]}}]}}]} as unknown as DocumentNode<UpdateCustomerEmailMutation, UpdateCustomerEmailMutationVariables>;
+export type UpdateCustomerEmailMutationVariables = Types.Exact<{
+  email: Types.Scalars['String'];
+  password: Types.Scalars['String'];
+}>;
+
+
+export type UpdateCustomerEmailMutation = { updateCustomerEmail?: Types.Maybe<{ customer: { email?: Types.Maybe<string> } }> };

package/components/UpdateCustomerEmailForm/UpdateCustomerEmail.graphql

@@ -0,0 +1,7 @@
+mutation UpdateCustomerEmail($email: String!, $password: String!) {
+  updateCustomerEmail(email: $email, password: $password) {
+    customer {
+      email
+    }
+  }
+}

package/components/UpdateCustomerEmailForm/index.tsx

@@ -0,0 +1,133 @@
+import { TextField } from '@material-ui/core'
+import {
+  Button,
+  Form,
+  FormActions,
+  FormDivider,
+  FormRow,
+  MessageSnackbar,
+} from '@graphcommerce/next-ui'
+import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import {
+  UpdateCustomerEmailDocument,
+  UpdateCustomerEmailMutation,
+  UpdateCustomerEmailMutationVariables,
+} from './UpdateCustomerEmail.gql'
+
+type UpdateCustomerEmailFormProps = {
+  email: string
+}
+
+export default function UpdateCustomerEmailForm(props: UpdateCustomerEmailFormProps) {
+  const { email } = props
+
+  const form = useFormGqlMutation<
+    UpdateCustomerEmailMutation,
+    UpdateCustomerEmailMutationVariables & {
+      currentEmail?: string
+      confirmEmail?: string
+    }
+  >(UpdateCustomerEmailDocument)
+
+  const { handleSubmit, error, required, formState, watch, muiRegister, reset } = form
+  const submit = handleSubmit(() => {
+    reset()
+  })
+  const watchNewEmail = watch('email')
+
+  return (
+    <Form onSubmit={submit} noValidate>
+      <FormRow>
+        <TextField
+          key='current-email'
+          variant='outlined'
+          type='text'
+          autoComplete='currentEmail'
+          autoFocus
+          error={formState.isSubmitted && !!formState.errors.currentEmail}
+          helperText={formState.isSubmitted && formState.errors.currentEmail?.message}
+          label='Current email'
+          required
+          value={email}
+          {...muiRegister('currentEmail', {
+            required: true,
+            pattern: { value: emailPattern, message: '' },
+          })}
+          InputProps={{
+            readOnly: true,
+          }}
+        />
+      </FormRow>
+
+      <FormRow>
+        <TextField
+          key='email'
+          variant='outlined'
+          type='text'
+          autoComplete='email'
+          autoFocus
+          error={formState.isSubmitted && !!formState.errors.email}
+          helperText={formState.isSubmitted && formState.errors.email?.message}
+          label='New email'
+          required={required.email}
+          {...muiRegister('email', {
+            required: true,
+            pattern: { value: emailPattern, message: '' },
+          })}
+        />
+        <TextField
+          key='confirm-email'
+          variant='outlined'
+          type='text'
+          autoComplete='confirmEmail'
+          autoFocus
+          error={formState.isSubmitted && !!formState.errors.confirmEmail}
+          helperText={formState.isSubmitted && formState.errors.confirmEmail?.message}
+          label='Confirm new email'
+          required
+          {...muiRegister('confirmEmail', {
+            required: true,
+            validate: (value) => value === watchNewEmail || "Emails don't match",
+          })}
+        />
+      </FormRow>
+
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.password}
+          label='Password'
+          autoComplete='password'
+          required={required.password}
+          {...muiRegister('password', {
+            required: required.password,
+          })}
+          helperText={formState.errors.password?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <FormDivider />
+      <FormActions>
+        <Button
+          type='submit'
+          text='bold'
+          color='primary'
+          variant='contained'
+          size='large'
+          loading={formState.isSubmitting}
+        >
+          Save changes
+        </Button>
+      </FormActions>
+      <ApolloCustomerErrorAlert error={error} />
+
+      <MessageSnackbar sticky open={formState.isSubmitSuccessful && !error}>
+        <>Successfully updated email</>
+      </MessageSnackbar>
+    </Form>
+  )
+}

package/components/UpdateDefaultAddressForm/index.tsx

@@ -0,0 +1,91 @@
+import { FormControl, FormControlLabel, FormHelperText, Switch } from '@material-ui/core'
+import { Controller, useFormAutoSubmit, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import React, { useEffect, useMemo } from 'react'
+import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
+import { UpdateDefaultAddressDocument } from '../AccountAddresses/UpdateDefaultAddress.gql'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+
+export type AccountAddressProps = Pick<
+  AccountAddressFragment,
+  'id' | 'default_shipping' | 'default_billing'
+>
+
+export default function UpdateDefaultAddressForm(props: AccountAddressProps) {
+  const { id, default_shipping, default_billing } = props
+  const defaultValues = useMemo(
+    () => ({
+      addressId: id ?? undefined,
+      defaultBilling: !!default_billing,
+      defaultShipping: !!default_shipping,
+    }),
+    [default_billing, default_shipping, id],
+  )
+
+  const form = useFormGqlMutation(
+    UpdateDefaultAddressDocument,
+    {
+      mode: 'onChange',
+      defaultValues,
+    },
+    { errorPolicy: 'all' },
+  )
+
+  const { handleSubmit, control, error, reset, formState } = form
+
+  const submit = handleSubmit(() => {
+    //
+  })
+  useFormAutoSubmit({ form, submit })
+
+  useEffect(() => {
+    reset(defaultValues)
+  }, [defaultValues, reset])
+
+  return (
+    <form onSubmit={() => {}} noValidate>
+      <Controller
+        name='defaultShipping'
+        control={control}
+        render={({ field: { onChange, value, name, ref, onBlur } }) => (
+          <FormControl error={!!formState.errors.defaultShipping}>
+            <FormControlLabel
+              control={<Switch color='primary' />}
+              label='Shipping address'
+              checked={value}
+              inputRef={ref}
+              onBlur={onBlur}
+              name={name}
+              onChange={(e) => onChange((e as React.ChangeEvent<HTMLInputElement>).target.checked)}
+            />
+
+            {formState.errors.defaultShipping?.message && (
+              <FormHelperText>{formState.errors.defaultShipping?.message}</FormHelperText>
+            )}
+          </FormControl>
+        )}
+      />
+      <Controller
+        name='defaultBilling'
+        control={control}
+        render={({ field: { onChange, value, name, ref, onBlur } }) => (
+          <FormControl error={!!formState.errors.defaultBilling}>
+            <FormControlLabel
+              control={<Switch color='primary' />}
+              label='Billing address'
+              checked={value}
+              inputRef={ref}
+              onBlur={onBlur}
+              name={name}
+              onChange={(e) => onChange((e as React.ChangeEvent<HTMLInputElement>).target.checked)}
+            />
+
+            {formState.errors.defaultBilling?.message && (
+              <FormHelperText>{formState.errors.defaultBilling?.message}</FormHelperText>
+            )}
+          </FormControl>
+        )}
+      />
+      <ApolloCustomerErrorAlert error={error} />
+    </form>
+  )
+}

package/components/index.ts

@@ -0,0 +1,29 @@
+export { default as AccountAddress } from './AccountAddress'
+export { default as AccountAddresses } from './AccountAddresses'
+export { default as CustomerFab } from './CustomerFab'
+export { default as ChangePasswordForm } from './ChangePasswordForm/ChangePasswordForm'
+export * from './ChangePasswordForm/ChangePassword.gql'
+export { default as ForgotPasswordForm } from './ForgotPasswordForm/ForgotPasswordForm'
+export * from './ForgotPasswordForm/ForgotPassword.gql'
+export { default as SignOutForm } from './SignOutForm'
+export { default as InlineAccount } from './InlineAccount'
+export { default as CreateCustomerAddressForm } from './CreateCustomerAddressForm'
+export { default as DeleteCustomerAddressForm } from './DeleteCustomerAddressForm'
+export { default as EditAddressForm } from './EditAddressForm'
+export { default as AddressMultiLine } from './AddressMultiLine'
+export { default as AddressSingleLine } from './AddressSingleLine'
+export { default as ResetPasswordForm } from './ResetPasswordForm'
+export { default as AddressFields } from './AddressFields'
+export { default as NameFields } from './NameFields'
+export { default as CustomerMenuFabItem } from './CustomerMenuFabItem'
+export { default as ChangeNameForm } from './ChangeNameForm'
+export { default as UpdateCustomerEmailForm } from './UpdateCustomerEmailForm'
+export { default as ApolloCustomerErrorAlert } from './ApolloCustomerError/ApolloCustomerErrorAlert'
+export { default as ApolloCustomerErrorFullPage } from './ApolloCustomerError/ApolloCustomerErrorFullPage'
+export { default as UpdateDefaultAddressForm } from './UpdateDefaultAddressForm'
+export { default as SignInForm } from './SignInForm/SignInForm'
+export { default as SignInFormInline } from './SignInForm/SignInFormInline'
+export { default as SignUpForm } from './SignUpForm/SignUpForm'
+export { default as SignUpFormInline } from './SignUpForm/SignUpFormInline'
+export * from './SignInForm/SignIn.gql'
+export * from './SignUpForm/SignUp.gql'

package/hooks/Customer.gql.ts

@@ -0,0 +1,10 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CustomerDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"Customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"default_billing"}},{"kind":"Field","name":{"kind":"Name","value":"default_shipping"}},{"kind":"Field","name":{"kind":"Name","value":"addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"middlename"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country_code"}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"region"}},{"kind":"Field","name":{"kind":"Name","value":"region_code"}},{"kind":"Field","name":{"kind":"Name","value":"region_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"street"}},{"kind":"Field","name":{"kind":"Name","value":"telephone"}},{"kind":"Field","name":{"kind":"Name","value":"vat_id"}}]}},{"kind":"Field","name":{"kind":"Name","value":"email"}},{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"middlename"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"suffix"}},{"kind":"Field","name":{"kind":"Name","value":"gender"}},{"kind":"Field","name":{"kind":"Name","value":"is_subscribed"}},{"kind":"Field","name":{"kind":"Name","value":"date_of_birth"}},{"kind":"Field","name":{"kind":"Name","value":"taxvat"}}]}}]}}]} as unknown as DocumentNode<CustomerQuery, CustomerQueryVariables>;
+export type CustomerQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type CustomerQuery = { customer?: Types.Maybe<{ default_billing?: Types.Maybe<string>, default_shipping?: Types.Maybe<string>, email?: Types.Maybe<string>, prefix?: Types.Maybe<string>, firstname?: Types.Maybe<string>, middlename?: Types.Maybe<string>, lastname?: Types.Maybe<string>, suffix?: Types.Maybe<string>, gender?: Types.Maybe<number>, is_subscribed?: Types.Maybe<boolean>, date_of_birth?: Types.Maybe<string>, taxvat?: Types.Maybe<string>, addresses?: Types.Maybe<Array<Types.Maybe<{ id?: Types.Maybe<number>, prefix?: Types.Maybe<string>, firstname?: Types.Maybe<string>, middlename?: Types.Maybe<string>, lastname?: Types.Maybe<string>, suffix?: Types.Maybe<string>, city?: Types.Maybe<string>, company?: Types.Maybe<string>, country_code?: Types.Maybe<Types.CountryCodeEnum>, postcode?: Types.Maybe<string>, street?: Types.Maybe<Array<Types.Maybe<string>>>, telephone?: Types.Maybe<string>, vat_id?: Types.Maybe<string>, region?: Types.Maybe<{ region?: Types.Maybe<string>, region_code?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }>>> }> };

package/hooks/Customer.graphql

@@ -0,0 +1,5 @@
+query Customer {
+  customer {
+    ...CustomerInfo
+  }
+}

package/hooks/CustomerInfo.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomerInfoFragment = { default_billing?: Types.Maybe<string>, default_shipping?: Types.Maybe<string>, email?: Types.Maybe<string>, prefix?: Types.Maybe<string>, firstname?: Types.Maybe<string>, middlename?: Types.Maybe<string>, lastname?: Types.Maybe<string>, suffix?: Types.Maybe<string>, gender?: Types.Maybe<number>, is_subscribed?: Types.Maybe<boolean>, date_of_birth?: Types.Maybe<string>, taxvat?: Types.Maybe<string>, addresses?: Types.Maybe<Array<Types.Maybe<{ id?: Types.Maybe<number>, prefix?: Types.Maybe<string>, firstname?: Types.Maybe<string>, middlename?: Types.Maybe<string>, lastname?: Types.Maybe<string>, suffix?: Types.Maybe<string>, city?: Types.Maybe<string>, company?: Types.Maybe<string>, country_code?: Types.Maybe<Types.CountryCodeEnum>, postcode?: Types.Maybe<string>, street?: Types.Maybe<Array<Types.Maybe<string>>>, telephone?: Types.Maybe<string>, vat_id?: Types.Maybe<string>, region?: Types.Maybe<{ region?: Types.Maybe<string>, region_code?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }>>> };

package/hooks/CustomerInfo.graphql

@@ -0,0 +1,20 @@
+fragment CustomerInfo on Customer {
+  default_billing
+  default_shipping
+  addresses {
+    ...CustomerAddress
+  }
+  email
+
+  prefix
+  firstname
+  middlename
+  lastname
+  suffix
+  gender
+
+  is_subscribed
+
+  date_of_birth
+  taxvat
+}