@graphcommerce/magento-customer 3.0.1

package/components/CreateCustomerAddressForm/CreateCustomerAddress.graphql

@@ -0,0 +1,41 @@
+mutation CreateCustomerAddress(
+  $prefix: String!
+  $firstname: String!
+  $middlename: String
+  $lastname: String!
+  $suffix: String
+  $telephone: String!
+  $street: String!
+  $houseNumber: String!
+  $addition: String
+  $city: String!
+  $postcode: String!
+  $region: CustomerAddressRegionInput!
+  $company: String
+  $countryCode: CountryCodeEnum!
+  $vatId: String
+  $defaultBilling: Boolean = false
+  $defaultShipping: Boolean = false
+) {
+  createCustomerAddress(
+    input: {
+      prefix: $prefix
+      firstname: $firstname
+      middlename: $middlename
+      lastname: $lastname
+      telephone: $telephone
+      suffix: $suffix
+      street: [$street, $houseNumber, $addition]
+      city: $city
+      postcode: $postcode
+      region: $region
+      company: $company
+      country_code: $countryCode
+      vat_id: $vatId
+      default_billing: $defaultBilling
+      default_shipping: $defaultShipping
+    }
+  ) {
+    id
+  }
+}

package/components/CreateCustomerAddressForm/CustomerAddress.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomerAddressFragment = { 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/components/CreateCustomerAddressForm/CustomerAddress.graphql

@@ -0,0 +1,22 @@
+fragment CustomerAddress on CustomerAddress {
+  id
+
+  prefix
+  firstname
+  middlename
+  lastname
+  suffix
+  city
+  company
+  country_code
+  postcode
+  region {
+    region
+    region_code
+    region_id
+  }
+  street
+  telephone
+
+  vat_id
+}

package/components/CreateCustomerAddressForm/CustomerAddressEdit.gql.ts

@@ -0,0 +1,4 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+export type CustomerAddressEditFragment = { 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/components/CreateCustomerAddressForm/CustomerAddressEdit.graphql

@@ -0,0 +1,4 @@
+fragment CustomerAddressEdit on CustomerAddress {
+  id
+  ...CustomerAddress
+}

package/components/CreateCustomerAddressForm/index.tsx

@@ -0,0 +1,98 @@
+import { useQuery } from '@apollo/client'
+import { TextField } from '@material-ui/core'
+import { CountryRegionsDocument } from '@graphcommerce/magento-store'
+import {
+  Button,
+  Form,
+  FormActions,
+  FormDivider,
+  FormRow,
+  InputCheckmark,
+} from '@graphcommerce/next-ui'
+import { phonePattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import React from 'react'
+import AddressFields from '../AddressFields'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import NameFields from '../NameFields'
+import { CreateCustomerAddressDocument } from './CreateCustomerAddress.gql'
+
+export default function CreateCustomerAddressForm() {
+  const countries = useQuery(CountryRegionsDocument).data?.countries
+  const router = useRouter()
+
+  const form = useFormGqlMutation(
+    CreateCustomerAddressDocument,
+    {
+      onBeforeSubmit: (formData) => {
+        const region = countries
+          ?.find((country) => country?.two_letter_abbreviation === formData.countryCode)
+          ?.available_regions?.find((r) => r?.id === formData.region)
+
+        return {
+          ...formData,
+          region:
+            (region && {
+              region: region.name,
+              region_code: region.code,
+              region_id: region.id,
+            }) ??
+            {},
+        }
+      },
+      onComplete: (e) => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        router.push(`/account/addresses/edit?addressId=${e.data?.createCustomerAddress?.id}`)
+      },
+    },
+    { errorPolicy: 'all' },
+  )
+
+  const { handleSubmit, formState, required, error, muiRegister, valid } = form
+  const submitHandler = handleSubmit((_, e) => {
+    if (!formState.errors) e?.target.reset()
+  })
+
+  return (
+    <>
+      <Form onSubmit={submitHandler} noValidate>
+        <NameFields form={form} prefix />
+        <AddressFields form={form} />
+
+        <FormRow>
+          <TextField
+            variant='outlined'
+            type='text'
+            error={!!formState.errors.telephone}
+            required={required.telephone}
+            label='Telephone'
+            {...muiRegister('telephone', {
+              required: required.telephone,
+              pattern: { value: phonePattern, message: 'Invalid phone number' },
+            })}
+            helperText={formState.isSubmitted && formState.errors.telephone?.message}
+            disabled={formState.isSubmitting}
+            InputProps={{ endAdornment: <InputCheckmark show={valid.telephone} /> }}
+          />
+        </FormRow>
+
+        <FormDivider />
+
+        <FormActions>
+          <Button
+            type='submit'
+            variant='contained'
+            color='primary'
+            size='large'
+            text='bold'
+            loading={formState.isSubmitting}
+          >
+            Save changes
+          </Button>
+        </FormActions>
+      </Form>
+
+      <ApolloCustomerErrorAlert error={error} />
+    </>
+  )
+}

package/components/CustomerFab/index.tsx

@@ -0,0 +1,55 @@
+import { useQuery } from '@apollo/client'
+import { Fab, makeStyles, NoSsr, Theme } from '@material-ui/core'
+import {
+  iconPersonAlt,
+  StyledBadge,
+  SvgImage,
+  SvgImageSimple,
+  UseStyles,
+} from '@graphcommerce/next-ui'
+import PageLink from 'next/link'
+import React from 'react'
+import { CustomerTokenDocument, CustomerTokenQuery } from '../../hooks'
+
+const useStyles = makeStyles((theme: Theme) => ({
+  colorError: {
+    backgroundColor: theme.palette.grey['500'],
+  },
+}))
+
+type CustomerFabContentProps = CustomerTokenQuery & {
+  icon?: React.ReactNode
+  authHref: string
+  guestHref: string
+} & UseStyles<typeof useStyles>
+
+function CustomerFabContent(props: CustomerFabContentProps) {
+  const { customerToken, icon, guestHref, authHref } = props
+  const classes = useStyles(props)
+  const requireAuth = Boolean(!customerToken || !customerToken.valid)
+
+  return (
+    <PageLink href={requireAuth ? guestHref : authHref} passHref>
+      <Fab style={{ boxShadow: 'none' }} aria-label='Open Menu' size='large'>
+        <StyledBadge
+          badgeContent={customerToken?.token ? 1 : 0}
+          color={customerToken?.valid ? 'primary' : 'error'}
+          variant='dot'
+          classes={{ colorError: classes.colorError }}
+        >
+          {icon ?? <SvgImageSimple src={iconPersonAlt} alt='Account' size='large' />}
+        </StyledBadge>
+      </Fab>
+    </PageLink>
+  )
+}
+
+export default function CustomerFab(props: CustomerFabContentProps) {
+  const { data } = useQuery(CustomerTokenDocument)
+
+  return (
+    <NoSsr fallback={<CustomerFabContent {...props} />}>
+      <CustomerFabContent customerToken={data?.customerToken} {...props} />
+    </NoSsr>
+  )
+}

package/components/CustomerMenuFabItem/index.tsx

@@ -0,0 +1,68 @@
+import { useQuery } from '@apollo/client'
+import { makeStyles, NoSsr, Theme } from '@material-ui/core'
+import {
+  MenuFabSecondaryItem,
+  StyledBadge,
+  UseStyles,
+  iconPersonAlt,
+  SvgImageSimple,
+} from '@graphcommerce/next-ui'
+import React from 'react'
+import { CustomerTokenDocument, CustomerTokenQuery } from '../../hooks'
+
+const useStyles = makeStyles((theme: Theme) => ({
+  colorError: {
+    backgroundColor: theme.palette.grey['500'],
+  },
+  badge: {
+    top: 3,
+    right: 3,
+    padding: 3,
+    [theme.breakpoints.up('md')]: {
+      top: 5,
+      right: 7,
+      padding: 4,
+    },
+  },
+}))
+
+type CustomerMenuFabItemProps = CustomerTokenQuery & {
+  icon?: React.ReactNode
+  children: React.ReactNode
+  authHref: string
+  guestHref: string
+} & UseStyles<typeof useStyles>
+
+function CustomerMenuFabItemContent(props: CustomerMenuFabItemProps) {
+  const { customerToken, icon, children, guestHref, authHref } = props
+  const classes = useStyles(props)
+  const requireAuth = Boolean(!customerToken || !customerToken.valid)
+
+  return (
+    <MenuFabSecondaryItem
+      icon={
+        <StyledBadge
+          badgeContent={customerToken?.token ? 1 : 0}
+          color={customerToken?.valid ? 'primary' : 'error'}
+          variant='dot'
+          classes={{ colorError: classes.colorError, badge: classes.badge }}
+        >
+          {icon ?? <SvgImageSimple src={iconPersonAlt} alt='Account' />}
+        </StyledBadge>
+      }
+      href={requireAuth ? guestHref : authHref}
+    >
+      {children}
+    </MenuFabSecondaryItem>
+  )
+}
+
+export default function CustomerMenuFabItem(props: CustomerMenuFabItemProps) {
+  const { data } = useQuery(CustomerTokenDocument)
+
+  return (
+    <NoSsr fallback={<CustomerMenuFabItemContent {...props} />}>
+      <CustomerMenuFabItemContent customerToken={data?.customerToken} {...props} />
+    </NoSsr>
+  )
+}

package/components/DeleteCustomerAddressForm/DeleteCustomerAddressForm.gql.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const DeleteCustomerAddressFormDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"DeleteCustomerAddressForm"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"deleteCustomerAddress"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}]}]}}]} as unknown as DocumentNode<DeleteCustomerAddressFormMutation, DeleteCustomerAddressFormMutationVariables>;
+export type DeleteCustomerAddressFormMutationVariables = Types.Exact<{
+  id: Types.Scalars['Int'];
+}>;
+
+
+export type DeleteCustomerAddressFormMutation = { deleteCustomerAddress?: Types.Maybe<boolean> };

package/components/DeleteCustomerAddressForm/DeleteCustomerAddressForm.graphql

@@ -0,0 +1,3 @@
+mutation DeleteCustomerAddressForm($id: Int!) {
+  deleteCustomerAddress(id: $id)
+}

package/components/DeleteCustomerAddressForm/index.tsx

@@ -0,0 +1,46 @@
+import { Button, makeStyles, Theme } from '@material-ui/core'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import React from 'react'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { DeleteCustomerAddressFormDocument } from './DeleteCustomerAddressForm.gql'
+
+export type DeleteCustomerAddressFormProps = {
+  addressId?: number
+}
+
+const useStyles = makeStyles((theme: Theme) => ({
+  button: {
+    display: 'block',
+    color: theme.palette.primary.contrastText,
+  },
+}))
+
+export default function DeleteCustomerAddressForm(props: DeleteCustomerAddressFormProps) {
+  const { addressId } = props
+  const router = useRouter()
+  const classes = useStyles()
+  const { handleSubmit, error } = useFormGqlMutation(
+    DeleteCustomerAddressFormDocument,
+    {
+      defaultValues: {
+        id: addressId,
+      },
+      onComplete: () => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        router.push({ pathname: '/account/addresses', query: 'confirm_delete' })
+      },
+    },
+    { errorPolicy: 'all' },
+  )
+  const submitHandler = handleSubmit(() => {})
+
+  return (
+    <form onSubmit={submitHandler} noValidate>
+      <Button type='submit' variant='text' color='inherit' className={classes.button}>
+        Delete this address
+      </Button>
+      <ApolloCustomerErrorAlert error={error} />
+    </form>
+  )
+}

package/components/EditAddressForm/UpdateCustomerAddress.gql.ts

@@ -0,0 +1,29 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const UpdateCustomerAddressDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCustomerAddress"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"Int"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"prefix"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"firstname"}},"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":"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":"telephone"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"street"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"houseNumber"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"addition"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"city"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"postcode"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"region"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"CustomerAddressRegionInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"company"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"countryCode"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"CountryCodeEnum"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"vatId"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"defaultBilling"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"defaultShipping"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateCustomerAddress"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}},{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ObjectValue","fields":[{"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":"telephone"},"value":{"kind":"Variable","name":{"kind":"Name","value":"telephone"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"suffix"},"value":{"kind":"Variable","name":{"kind":"Name","value":"suffix"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"street"},"value":{"kind":"ListValue","values":[{"kind":"Variable","name":{"kind":"Name","value":"street"}},{"kind":"Variable","name":{"kind":"Name","value":"houseNumber"}},{"kind":"Variable","name":{"kind":"Name","value":"addition"}}]}},{"kind":"ObjectField","name":{"kind":"Name","value":"city"},"value":{"kind":"Variable","name":{"kind":"Name","value":"city"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"postcode"},"value":{"kind":"Variable","name":{"kind":"Name","value":"postcode"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"region"},"value":{"kind":"Variable","name":{"kind":"Name","value":"region"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"company"},"value":{"kind":"Variable","name":{"kind":"Name","value":"company"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"country_code"},"value":{"kind":"Variable","name":{"kind":"Name","value":"countryCode"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"vat_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"vatId"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"default_billing"},"value":{"kind":"Variable","name":{"kind":"Name","value":"defaultBilling"}}},{"kind":"ObjectField","name":{"kind":"Name","value":"default_shipping"},"value":{"kind":"Variable","name":{"kind":"Name","value":"defaultShipping"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode<UpdateCustomerAddressMutation, UpdateCustomerAddressMutationVariables>;
+export type UpdateCustomerAddressMutationVariables = Types.Exact<{
+  id: Types.Scalars['Int'];
+  prefix?: Types.Maybe<Types.Scalars['String']>;
+  firstname?: Types.Maybe<Types.Scalars['String']>;
+  middlename?: Types.Maybe<Types.Scalars['String']>;
+  lastname?: Types.Maybe<Types.Scalars['String']>;
+  suffix?: Types.Maybe<Types.Scalars['String']>;
+  telephone?: Types.Maybe<Types.Scalars['String']>;
+  street: Types.Scalars['String'];
+  houseNumber: Types.Scalars['String'];
+  addition?: Types.Maybe<Types.Scalars['String']>;
+  city?: Types.Maybe<Types.Scalars['String']>;
+  postcode?: Types.Maybe<Types.Scalars['String']>;
+  region?: Types.Maybe<Types.CustomerAddressRegionInput>;
+  company?: Types.Maybe<Types.Scalars['String']>;
+  countryCode?: Types.Maybe<Types.CountryCodeEnum>;
+  vatId?: Types.Maybe<Types.Scalars['String']>;
+  defaultBilling?: Types.Maybe<Types.Scalars['Boolean']>;
+  defaultShipping?: Types.Maybe<Types.Scalars['Boolean']>;
+}>;
+
+
+export type UpdateCustomerAddressMutation = { updateCustomerAddress?: Types.Maybe<{ id?: Types.Maybe<number> }> };

package/components/EditAddressForm/UpdateCustomerAddress.graphql

@@ -0,0 +1,43 @@
+mutation UpdateCustomerAddress(
+  $id: Int!
+  $prefix: String
+  $firstname: String
+  $middlename: String
+  $lastname: String
+  $suffix: String
+  $telephone: String
+  $street: String!
+  $houseNumber: String!
+  $addition: String
+  $city: String
+  $postcode: String
+  $region: CustomerAddressRegionInput
+  $company: String
+  $countryCode: CountryCodeEnum
+  $vatId: String
+  $defaultBilling: Boolean
+  $defaultShipping: Boolean
+) {
+  updateCustomerAddress(
+    id: $id
+    input: {
+      prefix: $prefix
+      firstname: $firstname
+      middlename: $middlename
+      lastname: $lastname
+      telephone: $telephone
+      suffix: $suffix
+      street: [$street, $houseNumber, $addition]
+      city: $city
+      postcode: $postcode
+      region: $region
+      company: $company
+      country_code: $countryCode
+      vat_id: $vatId
+      default_billing: $defaultBilling
+      default_shipping: $defaultShipping
+    }
+  ) {
+    id
+  }
+}

package/components/EditAddressForm/index.tsx

@@ -0,0 +1,127 @@
+import { useQuery } from '@apollo/client'
+import { makeStyles, TextField } from '@material-ui/core'
+import { CountryRegionsDocument } from '@graphcommerce/magento-store'
+import {
+  Button,
+  Form,
+  FormActions,
+  FormDivider,
+  FormRow,
+  InputCheckmark,
+} from '@graphcommerce/next-ui'
+import { phonePattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import React from 'react'
+import { AccountAddressFragment } from '../AccountAddress/AccountAddress.gql'
+import AddressFields from '../AddressFields'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import NameFields from '../NameFields'
+import { UpdateCustomerAddressDocument } from './UpdateCustomerAddress.gql'
+
+const useStyles = makeStyles(
+  () => ({
+    editActions: {
+      paddingBottom: 0,
+    },
+  }),
+  { name: 'EditAddressForm' },
+)
+
+type EditAddressFormProps = { address?: AccountAddressFragment }
+
+export default function EditAddressForm(props: EditAddressFormProps) {
+  const countries = useQuery(CountryRegionsDocument).data?.countries
+  const { address } = props
+  const classes = useStyles()
+  const router = useRouter()
+
+  const form = useFormGqlMutation(
+    UpdateCustomerAddressDocument,
+    {
+      defaultValues: {
+        id: address?.id ?? undefined,
+        firstname: address?.firstname,
+        lastname: address?.lastname,
+        street: address?.street?.[0] ?? undefined,
+        postcode: address?.postcode,
+        city: address?.city,
+        countryCode: address?.country_code,
+        telephone: address?.telephone,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        houseNumber: address?.street?.[1],
+        addition: address?.street?.[2],
+      },
+      onBeforeSubmit: (formData) => {
+        const region = countries
+          ?.find((country) => country?.two_letter_abbreviation === formData.countryCode)
+          ?.available_regions?.find((r) => r?.id === formData.region)
+        const regionData = {
+          region:
+            (region && {
+              region: region.name,
+              region_code: region.code,
+              region_id: region.id,
+            }) ??
+            null,
+        }
+
+        return {
+          ...formData,
+          ...regionData,
+        }
+      },
+      onComplete: () => {
+        // eslint-disable-next-line @typescript-eslint/no-floating-promises
+        router.push('/account/addresses')
+      },
+    },
+    { errorPolicy: 'all' },
+  )
+
+  const { handleSubmit, formState, required, error, muiRegister, valid } = form
+  const submitHandler = handleSubmit(() => {})
+
+  return (
+    <>
+      <Form onSubmit={submitHandler} noValidate>
+        <NameFields form={form} prefix />
+        <AddressFields form={form} />
+
+        <FormRow>
+          <TextField
+            variant='outlined'
+            type='text'
+            error={!!formState.errors.telephone}
+            required={required.telephone}
+            label='Telephone'
+            {...muiRegister('telephone', {
+              required: required.telephone,
+              pattern: { value: phonePattern, message: 'Invalid phone number' },
+            })}
+            helperText={formState.isSubmitted && formState.errors.telephone?.message}
+            disabled={formState.isSubmitting}
+            InputProps={{ endAdornment: <InputCheckmark show={valid.telephone} /> }}
+          />
+        </FormRow>
+
+        <FormDivider />
+
+        <FormActions classes={{ root: classes.editActions }}>
+          <Button
+            type='submit'
+            variant='contained'
+            color='primary'
+            size='large'
+            text='bold'
+            loading={formState.isSubmitting}
+          >
+            Save changes
+          </Button>
+        </FormActions>
+      </Form>
+
+      <ApolloCustomerErrorAlert error={error} />
+    </>
+  )
+}

package/components/ForgotPasswordForm/ForgotPassword.gql.ts

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

package/components/ForgotPasswordForm/ForgotPassword.graphql

@@ -0,0 +1,3 @@
+mutation ForgotPassword($email: String!) {
+  requestPasswordResetEmail(email: $email)
+}