@graphcommerce/magento-customer 3.0.1

package/components/AddressFields/index.tsx

@@ -0,0 +1,189 @@
+import { useQuery } from '@apollo/client'
+import { TextField } from '@material-ui/core'
+import { CountryRegionsDocument } from '@graphcommerce/magento-store'
+import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
+import {
+  assertFormGqlOperation,
+  houseNumberPattern,
+  UseFormReturn,
+} from '@graphcommerce/react-hook-form'
+import React, { useMemo } from 'react'
+
+type AddressFieldValues = {
+  street?: string
+  houseNumber?: string
+  addition?: string
+  countryCode?: string
+  regionId?: string
+  postcode?: string
+  city?: string
+}
+
+type AddressFieldsProps = { form: UseFormReturn<any>; readOnly?: boolean }
+
+export default function AddressFields(props: AddressFieldsProps) {
+  const { form, readOnly } = props
+  const countries = useQuery(CountryRegionsDocument).data?.countries
+  assertFormGqlOperation<AddressFieldValues>(form)
+  const { watch, formState, required, muiRegister, valid } = form
+
+  const country = watch('countryCode')
+
+  const countryList = useMemo(() => {
+    const countriesWithLocale = (countries ?? [])?.filter((c) => c?.full_name_locale)
+    return countriesWithLocale.sort((a, b) =>
+      (a?.full_name_locale ?? '')?.localeCompare(b?.full_name_locale ?? ''),
+    )
+  }, [countries])
+
+  const regionList = useMemo(() => {
+    const availableRegions = Object.values(
+      countryList.find((c) => c?.two_letter_abbreviation === country)?.available_regions ?? {},
+    )
+    type Region = typeof availableRegions[0]
+
+    const compare: (a: Region, b: Region) => number = (a, b) =>
+      (a?.name ?? '')?.localeCompare(b?.name ?? '')
+
+    const regions = availableRegions?.sort(compare)
+    return regions
+  }, [country, countryList])
+
+  return (
+    <>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.street}
+          label='Street'
+          autoComplete='address-line1'
+          required={!!required?.street}
+          {...muiRegister('street', { required: required?.street })}
+          helperText={formState.isSubmitted && formState.errors.street?.message}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.street} />,
+          }}
+        />
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.houseNumber}
+          label='Housenumber'
+          autoComplete='address-line2'
+          required={!!required?.houseNumber}
+          {...muiRegister('houseNumber', {
+            required: required?.houseNumber,
+            pattern: { value: houseNumberPattern, message: 'Please provide a valid house number' },
+          })}
+          helperText={formState.isSubmitted && formState.errors.houseNumber?.message}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.houseNumber} />,
+          }}
+        />
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.addition}
+          required={!!required?.addition}
+          label='Addition'
+          autoComplete='address-line3'
+          {...muiRegister('addition', { required: required?.addition })}
+          helperText={formState.isSubmitted && formState.errors.addition?.message}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.addition} />,
+          }}
+        />
+      </FormRow>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.postcode}
+          required={!!required?.postcode}
+          label='Postcode'
+          {...muiRegister('postcode', { required: required?.postcode })}
+          helperText={formState.isSubmitted && formState.errors.postcode?.message}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.postcode} />,
+          }}
+        />
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.city}
+          required={!!required?.city}
+          label='City'
+          {...muiRegister('city', { required: required?.city })}
+          helperText={formState.isSubmitted && formState.errors.city?.message}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.city} />,
+          }}
+        />
+      </FormRow>
+      <FormRow>
+        <TextField
+          select
+          SelectProps={{ native: true, displayEmpty: true }}
+          {...muiRegister('countryCode', { required: required.countryCode })}
+          variant='outlined'
+          error={!!formState.errors.countryCode}
+          label='Country'
+          required={!!required?.countryCode}
+          helperText={formState.errors.countryCode?.message}
+          // onBlur={onBlur}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.countryCode} />,
+          }}
+        >
+          <option value='' />
+          {countryList.map((c) => {
+            if (!c?.two_letter_abbreviation) return null
+            return (
+              <option key={c.two_letter_abbreviation} value={c.two_letter_abbreviation}>
+                {c.full_name_locale}
+              </option>
+            )
+          })}
+        </TextField>
+
+        {regionList.length > 0 && (
+          <TextField
+            select
+            SelectProps={{ native: true, displayEmpty: true }}
+            variant='outlined'
+            error={!!formState.errors.regionId}
+            label='Region'
+            {...muiRegister('regionId', {
+              required: true,
+              shouldUnregister: true,
+              valueAsNumber: true,
+            })}
+            required
+            helperText={formState.errors.regionId?.message}
+            InputProps={{
+              readOnly,
+              endAdornment: <InputCheckmark show={valid.regionId} />,
+            }}
+          >
+            <option value='' />
+            {regionList.map((r) => {
+              if (!r?.id) return null
+              return (
+                <option key={r.id} value={r.id}>
+                  {r.name}
+                </option>
+              )
+            })}
+          </TextField>
+        )}
+      </FormRow>
+    </>
+  )
+}

package/components/AddressMultiLine/index.tsx

@@ -0,0 +1,68 @@
+import { makeStyles, Theme, Typography } from '@material-ui/core'
+import { useFindCountry } from '@graphcommerce/magento-store'
+import { UseStyles } from '@graphcommerce/next-ui'
+import { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAddress.gql'
+
+// exports.getEuMembers = function()
+// {
+// 	return ["BE", "BG", "CZ", "DK", "DE", "EE", "IE", "EL", "ES", "FR", "HR", "IT", "CY", "LV", "LT", "LU", "HU", "MT", "NL", "AT", "PL", "PT", "RO", "SI", "SK", "FI", "SE"];
+// };
+// exports.isEuMember = function(code)
+// {
+// 	return exports.getEuMembers().indexOf(code.toUpperCase()) != -1;
+// };
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    title: {
+      // fontWeight: 'bold',
+      // paddingBottom: theme.spacings.xxs,
+    },
+  }),
+  {
+    name: 'AddressMultiLine',
+  },
+)
+
+type AddressMultiLineProps = CustomerAddressFragment & UseStyles<typeof useStyles>
+
+export default function AddressMultiLine(props: AddressMultiLineProps) {
+  const {
+    company,
+    prefix,
+    firstname,
+    lastname,
+    middlename,
+    suffix,
+    street,
+    region,
+    city,
+    postcode,
+    country_code,
+  } = props
+  const countryName = useFindCountry(country_code)?.full_name_locale ?? country_code
+
+  const regionName = typeof region === 'string' ? region : region?.region
+  const classes = useStyles(props)
+
+  return (
+    <Typography variant='body1' component='div'>
+      <div className={classes.title}>
+        <div>{company}</div>
+        <div>
+          {prefix} {firstname} {middlename} {lastname} {suffix}
+        </div>
+      </div>
+      <div>
+        {street?.[0]} {street?.slice(1).join('')}
+      </div>
+      <div>
+        {postcode} {city}
+      </div>
+      <div>
+        {regionName && `${regionName}, `}
+        {countryName}
+      </div>
+    </Typography>
+  )
+}

package/components/AddressSingleLine/index.tsx

@@ -0,0 +1,34 @@
+import { useFindCountry } from '@graphcommerce/magento-store'
+import { CustomerAddressFragment } from '../CreateCustomerAddressForm/CustomerAddress.gql'
+
+export default function AddressSingleLine(props: CustomerAddressFragment) {
+  const {
+    company,
+    prefix,
+    firstname,
+    lastname,
+    middlename,
+    suffix,
+    street,
+    region,
+    city,
+    postcode,
+    country_code,
+  } = props
+  const countryName = useFindCountry(country_code)?.full_name_locale
+  const regionName = typeof region === 'string' ? region : region?.region
+
+  // todo: detect correct format by locale
+  // for now, US format will be returned by default
+
+  let address = `$company ${prefix}, ${firstname}, $middlename ${lastname}, $suffix ${
+    street?.[0]
+  }, ${street?.slice(1).join(' ')}, ${postcode}, ${city}, ${regionName} $countryName`
+
+  address = address.replace('$company', company ? `${company},` : '')
+  address = address.replace('$middlename', middlename ? `${middlename},` : '')
+  address = address.replace('$suffix', suffix ? `${suffix},` : '')
+  address = address.replace('$countryName', countryName ? `${countryName},` : '')
+
+  return <>{address}</>
+}

package/components/ApolloCustomerError/ApolloCustomerErrorAlert.tsx

@@ -0,0 +1,21 @@
+import { Link } from '@material-ui/core'
+import { ApolloErrorAlert, ApolloErrorAlertProps } from '@graphcommerce/next-ui'
+import NextLink from 'next/link'
+import React from 'react'
+import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
+
+type MagentoErrorAlertProps = ApolloErrorAlertProps
+
+export default function ApolloCustomerErrorAlert(props: MagentoErrorAlertProps) {
+  const { error, unauthorized } = useExtractCustomerErrors(props)
+
+  const action = unauthorized && (
+    <>
+      <NextLink href='/account/signin' passHref>
+        <Link>Sign Up / Sign In</Link>
+      </NextLink>
+    </>
+  )
+
+  return <ApolloErrorAlert error={error} graphqlErrorAlertProps={{ action }} />
+}

package/components/ApolloCustomerError/ApolloCustomerErrorFullPage.tsx

@@ -0,0 +1,46 @@
+import {
+  ApolloErrorFullPage,
+  ApolloErrorAlertProps,
+  Button,
+  SvgImage,
+  iconPersonAltBig,
+} from '@graphcommerce/next-ui'
+import PageLink from 'next/link'
+import React from 'react'
+
+import { useExtractCustomerErrors } from '../../hooks/useExtractCustomerErrors'
+
+type ApolloCustomerErrorFullPageProps = {
+  signInHref: string
+  signUpHref: string
+} & ApolloErrorAlertProps
+
+export default function ApolloCustomerErrorFullPage(props: ApolloCustomerErrorFullPageProps) {
+  const { signInHref, signUpHref } = props
+  const { error, unauthorized } = useExtractCustomerErrors(props)
+
+  return (
+    <ApolloErrorFullPage
+      error={error}
+      icon={<SvgImage src={iconPersonAltBig} size={148} alt='person' />}
+      button={
+        unauthorized ? (
+          <PageLink href={signInHref} passHref>
+            <Button variant='contained' color='primary' text='bold' size='large'>
+              Login
+            </Button>
+          </PageLink>
+        ) : undefined
+      }
+      altButton={
+        unauthorized ? (
+          <PageLink href={signUpHref} passHref>
+            <Button variant='text' color='primary'>
+              Or create an account
+            </Button>
+          </PageLink>
+        ) : undefined
+      }
+    />
+  )
+}

package/components/ChangeNameForm/UpdateCustomerName.gql.ts

@@ -0,0 +1,14 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const UpdateCustomerNameDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"UpdateCustomerName"},"variableDefinitions":[{"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":"NonNullType","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"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"updateCustomer"},"arguments":[{"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":"lastname"},"value":{"kind":"Variable","name":{"kind":"Name","value":"lastname"}}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"customer"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"prefix"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}}]}}]}}]}}]} as unknown as DocumentNode<UpdateCustomerNameMutation, UpdateCustomerNameMutationVariables>;
+export type UpdateCustomerNameMutationVariables = Types.Exact<{
+  prefix?: Types.Maybe<Types.Scalars['String']>;
+  firstname: Types.Scalars['String'];
+  lastname: Types.Scalars['String'];
+}>;
+
+
+export type UpdateCustomerNameMutation = { updateCustomer?: Types.Maybe<{ customer: { prefix?: Types.Maybe<string>, firstname?: Types.Maybe<string>, lastname?: Types.Maybe<string> } }> };

package/components/ChangeNameForm/UpdateCustomerName.graphql

@@ -0,0 +1,9 @@
+mutation UpdateCustomerName($prefix: String, $firstname: String!, $lastname: String!) {
+  updateCustomer(input: { prefix: $prefix, firstname: $firstname, lastname: $lastname }) {
+    customer {
+      prefix
+      firstname
+      lastname
+    }
+  }
+}

package/components/ChangeNameForm/index.tsx

@@ -0,0 +1,66 @@
+import {
+  Button,
+  Form,
+  FormActions,
+  FormDivider,
+  MessageSnackbar,
+  SvgImage,
+  iconCheckmark,
+} from '@graphcommerce/next-ui'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import NameFields from '../NameFields'
+import { UpdateCustomerNameDocument } from './UpdateCustomerName.gql'
+
+type ChangeNameFormProps = {
+  prefix?: string
+  firstname: string
+  lastname: string
+}
+
+export default function ChangeNameForm(props: ChangeNameFormProps) {
+  const { prefix, firstname, lastname } = props
+  const form = useFormGqlMutation(
+    UpdateCustomerNameDocument,
+    {
+      defaultValues: {
+        prefix: prefix ?? '',
+        firstname: firstname ?? '',
+        lastname: lastname ?? '',
+      },
+    },
+    { errorPolicy: 'all' },
+  )
+
+  const { handleSubmit, error, formState } = form
+  const submit = handleSubmit(() => {})
+
+  return (
+    <>
+      <Form onSubmit={submit} noValidate>
+        <NameFields form={form} prefix />
+        <FormDivider />
+        <FormActions>
+          <Button
+            type='submit'
+            text='bold'
+            color='primary'
+            variant='contained'
+            size='large'
+            loading={formState.isSubmitting}
+          >
+            Save changes
+          </Button>
+        </FormActions>
+        <ApolloCustomerErrorAlert error={error} />
+      </Form>
+      <MessageSnackbar open={formState.isSubmitSuccessful && !error} variant='pill' color='default'>
+        <>
+          <SvgImage src={iconCheckmark} size='small' loading='eager' alt='checkmark' />
+          Changes saved
+        </>
+      </MessageSnackbar>
+    </>
+  )
+}

package/components/ChangePasswordForm/ChangePassword.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 ChangePasswordDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ChangePassword"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"currentPassword"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"newPassword"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"changeCustomerPassword"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"currentPassword"},"value":{"kind":"Variable","name":{"kind":"Name","value":"currentPassword"}}},{"kind":"Argument","name":{"kind":"Name","value":"newPassword"},"value":{"kind":"Variable","name":{"kind":"Name","value":"newPassword"}}}],"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<ChangePasswordMutation, ChangePasswordMutationVariables>;
+export type ChangePasswordMutationVariables = Types.Exact<{
+  currentPassword: Types.Scalars['String'];
+  newPassword: Types.Scalars['String'];
+}>;
+
+
+export type ChangePasswordMutation = { changeCustomerPassword?: 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/components/ChangePasswordForm/ChangePassword.graphql

@@ -0,0 +1,5 @@
+mutation ChangePassword($currentPassword: String!, $newPassword: String!) {
+  changeCustomerPassword(currentPassword: $currentPassword, newPassword: $newPassword) {
+    ...CustomerInfo
+  }
+}

package/components/ChangePasswordForm/ChangePasswordForm.tsx

@@ -0,0 +1,93 @@
+import { TextField } from '@material-ui/core'
+import {
+  Button,
+  Form,
+  FormActions,
+  FormRow,
+  MessageSnackbar,
+  FormDivider,
+} from '@graphcommerce/next-ui'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import React from 'react'
+
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import {
+  ChangePasswordDocument,
+  ChangePasswordMutation,
+  ChangePasswordMutationVariables,
+} from './ChangePassword.gql'
+
+export default function ChangePasswordForm() {
+  const form = useFormGqlMutation<
+    ChangePasswordMutation,
+    ChangePasswordMutationVariables & { confirmPassword?: string }
+  >(ChangePasswordDocument)
+  const { muiRegister, handleSubmit, required, watch, data, formState, error } = form
+  const submitHandler = handleSubmit(() => {})
+  const pass = watch('newPassword')
+
+  return (
+    <Form onSubmit={submitHandler} noValidate>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.currentPassword}
+          label='Current Password'
+          required={required.currentPassword}
+          {...muiRegister('currentPassword', { required: required.currentPassword })}
+          helperText={formState.errors.currentPassword?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.newPassword}
+          label='New Password'
+          required={required.newPassword}
+          {...muiRegister('newPassword', { required: required.newPassword })}
+          helperText={formState.errors.newPassword?.message}
+          disabled={formState.isSubmitting}
+        />
+
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.confirmPassword}
+          label='Confirm Password'
+          required
+          {...muiRegister('confirmPassword', {
+            required: true,
+            validate: (value) => value === pass || "Passwords don't match",
+          })}
+          helperText={formState.errors.confirmPassword?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <ApolloCustomerErrorAlert error={error} />
+
+      <FormDivider />
+
+      <FormActions>
+        <Button
+          type='submit'
+          loading={formState.isSubmitting}
+          color='primary'
+          variant='contained'
+          size='large'
+          text='bold'
+        >
+          Save new password
+        </Button>
+      </FormActions>
+
+      <MessageSnackbar sticky open={Boolean(formState.isSubmitSuccessful && data)}>
+        <>Password changed</>
+      </MessageSnackbar>
+    </Form>
+  )
+}

package/components/CreateCustomerAddressForm/CreateCustomerAddress.gql.ts

@@ -0,0 +1,28 @@
+/* eslint-disable */
+import * as Types from '@graphcommerce/graphql';
+
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+
+export const CreateCustomerAddressDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"CreateCustomerAddress"},"variableDefinitions":[{"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":"telephone"}},"type":{"kind":"NonNullType","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":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"postcode"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"region"}},"type":{"kind":"NonNullType","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":"NonNullType","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"}},"defaultValue":{"kind":"BooleanValue","value":false}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"defaultShipping"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"Boolean"}},"defaultValue":{"kind":"BooleanValue","value":false}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"createCustomerAddress"},"arguments":[{"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<CreateCustomerAddressMutation, CreateCustomerAddressMutationVariables>;
+export type CreateCustomerAddressMutationVariables = Types.Exact<{
+  prefix: Types.Scalars['String'];
+  firstname: Types.Scalars['String'];
+  middlename?: Types.Maybe<Types.Scalars['String']>;
+  lastname: Types.Scalars['String'];
+  suffix?: Types.Maybe<Types.Scalars['String']>;
+  telephone: Types.Scalars['String'];
+  street: Types.Scalars['String'];
+  houseNumber: Types.Scalars['String'];
+  addition?: Types.Maybe<Types.Scalars['String']>;
+  city: Types.Scalars['String'];
+  postcode: Types.Scalars['String'];
+  region: Types.CustomerAddressRegionInput;
+  company?: Types.Maybe<Types.Scalars['String']>;
+  countryCode: Types.CountryCodeEnum;
+  vatId?: Types.Maybe<Types.Scalars['String']>;
+  defaultBilling?: Types.Maybe<Types.Scalars['Boolean']>;
+  defaultShipping?: Types.Maybe<Types.Scalars['Boolean']>;
+}>;
+
+
+export type CreateCustomerAddressMutation = { createCustomerAddress?: Types.Maybe<{ id?: Types.Maybe<number> }> };