@graphcommerce/magento-customer 3.0.1

package/components/ForgotPasswordForm/ForgotPasswordForm.tsx

@@ -0,0 +1,73 @@
+import { makeStyles, TextField, Theme } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
+import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
+import { emailPattern, useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import React from 'react'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import {
+  ForgotPasswordDocument,
+  ForgotPasswordMutation,
+  ForgotPasswordMutationVariables,
+} from './ForgotPassword.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    alert: {
+      marginTop: theme.spacings.md,
+      marginBottom: theme.spacings.sm,
+    },
+  }),
+  { name: 'ForgotPasswordForm' },
+)
+
+export default function ForgotPasswordForm() {
+  const classes = useStyles()
+  const form = useFormGqlMutation<ForgotPasswordMutation, ForgotPasswordMutationVariables>(
+    ForgotPasswordDocument,
+  )
+  const { muiRegister, handleSubmit, required, data, formState, error } = form
+  const submitHandler = handleSubmit(() => {})
+
+  if (formState.isSubmitSuccessful && data) {
+    return (
+      <Alert severity='success' variant='standard' className={classes.alert}>
+        We&apos;ve send a password reset link to your account!
+      </Alert>
+    )
+  }
+
+  return (
+    <Form onSubmit={submitHandler} noValidate>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.email}
+          label='Email'
+          required={required.email}
+          {...muiRegister('email', {
+            required: required.email,
+            pattern: { value: emailPattern, message: 'Invalid email address' },
+          })}
+          helperText={formState.errors.email?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <ApolloCustomerErrorAlert error={error} />
+
+      <FormActions>
+        <Button
+          type='submit'
+          loading={formState.isSubmitting}
+          color='primary'
+          variant='contained'
+          size='large'
+          text='bold'
+        >
+          Send password reset email
+        </Button>
+      </FormActions>
+    </Form>
+  )
+}

package/components/InlineAccount/InlineAccount.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 InlineAccountDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"InlineAccount"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"String"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cart"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"cart_id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"cartId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"shipping_addresses"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"InlineFragment","typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"CartAddressInterface"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"__typename"}},{"kind":"Field","name":{"kind":"Name","value":"firstname"}},{"kind":"Field","name":{"kind":"Name","value":"lastname"}},{"kind":"Field","name":{"kind":"Name","value":"city"}},{"kind":"Field","name":{"kind":"Name","value":"company"}},{"kind":"Field","name":{"kind":"Name","value":"country"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}}]}},{"kind":"Field","name":{"kind":"Name","value":"postcode"}},{"kind":"Field","name":{"kind":"Name","value":"region"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"code"}},{"kind":"Field","name":{"kind":"Name","value":"label"}},{"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":"email"}}]}}]}}]} as unknown as DocumentNode<InlineAccountQuery, InlineAccountQueryVariables>;
+export type InlineAccountQueryVariables = Types.Exact<{
+  cartId: Types.Scalars['String'];
+}>;
+
+
+export type InlineAccountQuery = { cart?: Types.Maybe<{ __typename: 'Cart', id: string, email?: Types.Maybe<string>, shipping_addresses: Array<Types.Maybe<{ __typename: 'ShippingCartAddress', firstname: string, lastname: string, city: string, company?: Types.Maybe<string>, postcode?: Types.Maybe<string>, street: Array<Types.Maybe<string>>, telephone: string, country: { code: string, label: string }, region?: Types.Maybe<{ code?: Types.Maybe<string>, label?: Types.Maybe<string>, region_id?: Types.Maybe<number> }> }>> }> };

package/components/InlineAccount/InlineAccount.graphql

@@ -0,0 +1,10 @@
+query InlineAccount($cartId: String!) {
+  cart(cart_id: $cartId) {
+    __typename
+    id
+    shipping_addresses {
+      ...CartAddress
+    }
+    email
+  }
+}

package/components/InlineAccount/index.tsx

@@ -0,0 +1,149 @@
+import { useQuery } from '@apollo/client'
+import { makeStyles, TextField, Theme, Typography } from '@material-ui/core'
+import { useCartQuery } from '@graphcommerce/magento-cart'
+import Button from '@graphcommerce/next-ui/Button'
+import FormRow from '@graphcommerce/next-ui/Form/FormRow'
+import { UseStyles } from '@graphcommerce/next-ui/Styles'
+import React, { useState } from 'react'
+import { CustomerTokenDocument, IsEmailAvailableDocument } from '../../hooks'
+import { InlineAccountDocument } from './InlineAccount.gql'
+import SignUpFormInline from '../SignUpForm/SignUpFormInline'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    root: {
+      borderRadius: 4,
+      border: `1px solid ${theme.palette.divider}`,
+      padding: theme.spacings.md,
+    },
+    innerContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      gap: 32,
+      [theme.breakpoints.up('sm')]: {
+        alignItems: 'flex-end',
+        flexDirection: 'unset',
+        gap: 0,
+      },
+    },
+    form: {
+      marginTop: theme.spacings.sm,
+    },
+    button: {
+      minWidth: 160,
+    },
+    title: {
+      paddingBottom: 8,
+    },
+  }),
+  { name: 'InlineAccount' },
+)
+
+type InlineAccountProps = {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  accountHref: string
+} & UseStyles<typeof useStyles>
+
+export default function InlineAccount(props: InlineAccountProps) {
+  const { title, description, accountHref } = props
+  const classes = useStyles(props)
+
+  const [toggled, setToggled] = useState<boolean>(false)
+
+  const { loading, data } = useCartQuery(InlineAccountDocument)
+  const cart = data?.cart
+
+  const { data: customerTokenData } = useQuery(CustomerTokenDocument)
+  const { data: isEmailAvailableData } = useQuery(IsEmailAvailableDocument, {
+    variables: {
+      email: cart?.email ?? '',
+    },
+  })
+
+  const { firstname, lastname } = cart?.shipping_addresses?.[0] ?? {}
+  const signedIn = Boolean(
+    customerTokenData?.customerToken && customerTokenData?.customerToken.valid,
+  )
+  const canSignUp = isEmailAvailableData?.isEmailAvailable?.is_email_available === true
+
+  if (!canSignUp) return <></>
+
+  return (
+    <div>
+      <div key='signupaccount' className={classes.root}>
+        {!signedIn && canSignUp && (
+          <>
+            <div className={classes.innerContainer}>
+              <div>
+                <Typography variant='h4' className={classes.title}>
+                  {title ?? 'No account yet?'}
+                </Typography>
+                {description ?? 'You can track your order status and much more!'}
+              </div>
+              <div>
+                {!toggled && (
+                  <Button
+                    variant='pill'
+                    color='secondary'
+                    text='bold'
+                    loading={loading}
+                    onClick={() => setToggled(!toggled)}
+                    className={classes.button}
+                  >
+                    Create an account
+                  </Button>
+                )}
+              </div>
+            </div>
+            {cart?.email && toggled && (
+              <div className={classes.form}>
+                <FormRow>
+                  <TextField
+                    variant='outlined'
+                    type='email'
+                    label='Email'
+                    value={cart?.email}
+                    InputProps={{
+                      readOnly: true,
+                    }}
+                  />
+                </FormRow>
+                <SignUpFormInline
+                  firstname={firstname ?? ''}
+                  lastname={lastname}
+                  email={cart?.email}
+                  onSubmitted={() => setToggled(false)}
+                />
+              </div>
+            )}
+          </>
+        )}
+
+        {signedIn && (
+          <div className={classes.innerContainer}>
+            <div>
+              <Typography variant='h4' className={classes.title}>
+                {title ?? 'Have an account?'}
+              </Typography>
+              {description ?? 'You can find your order history in your account!'}
+            </div>
+            <div>
+              <Button
+                variant='pill'
+                color='secondary'
+                text='bold'
+                href={accountHref}
+                className={classes.button}
+              >
+                My account
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}

package/components/NameFields/index.tsx

@@ -0,0 +1,89 @@
+import { MenuItem, TextField } from '@material-ui/core'
+import { FormRow, InputCheckmark } from '@graphcommerce/next-ui'
+import { assertFormGqlOperation, Controller, UseFormReturn } from '@graphcommerce/react-hook-form'
+import React from 'react'
+
+type NameFieldValues = {
+  firstname?: string
+  lastname?: string
+  prefix?: string
+}
+
+type NameFieldProps = {
+  form: UseFormReturn<any>
+  readOnly?: boolean
+  prefix?: boolean
+}
+
+export default function NameFields(props: NameFieldProps) {
+  const { prefix, form, readOnly } = props
+  assertFormGqlOperation<NameFieldValues>(form)
+
+  const { control, formState, muiRegister, required, valid } = form
+
+  return (
+    <>
+      <FormRow>
+        {prefix && (
+          <Controller
+            defaultValue='Dhr.'
+            control={control}
+            name='prefix'
+            render={({ field: { ref, onChange, ...field }, fieldState }) => (
+              <TextField
+                variant='outlined'
+                select
+                error={!!fieldState.error}
+                label='Prefix'
+                required={!!required?.prefix}
+                helperText={fieldState.error?.message}
+                onChange={(e) => onChange(e.target.value)}
+                inputRef={ref}
+                InputProps={{
+                  readOnly,
+                  endAdornment: <InputCheckmark show={valid.prefix} />,
+                }}
+                {...field}
+              >
+                {['Dhr.', 'Mevr.'].map((option) => (
+                  <MenuItem key={option} value={option}>
+                    {option}
+                  </MenuItem>
+                ))}
+              </TextField>
+            )}
+          />
+        )}
+      </FormRow>
+
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='text'
+          label='First Name'
+          required={!!required}
+          error={!!formState.errors.firstname}
+          helperText={formState.isSubmitted && formState.errors.firstname?.message}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.firstname} />,
+          }}
+          {...muiRegister('firstname', { required: required?.firstname })}
+        />
+        <TextField
+          variant='outlined'
+          type='text'
+          error={!!formState.errors.lastname}
+          label='Last Name'
+          required={!!required?.lastname}
+          helperText={formState.isSubmitted && formState.errors.lastname?.message}
+          InputProps={{
+            readOnly,
+            endAdornment: <InputCheckmark show={valid.lastname} />,
+          }}
+          {...muiRegister('lastname', { required: required?.lastname })}
+        />
+      </FormRow>
+    </>
+  )
+}

package/components/ResetPasswordForm/ResetPassword.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 ResetPasswordDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"ResetPassword"},"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":"resetPasswordToken"}},"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":"resetPassword"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"email"},"value":{"kind":"Variable","name":{"kind":"Name","value":"email"}}},{"kind":"Argument","name":{"kind":"Name","value":"resetPasswordToken"},"value":{"kind":"Variable","name":{"kind":"Name","value":"resetPasswordToken"}}},{"kind":"Argument","name":{"kind":"Name","value":"newPassword"},"value":{"kind":"Variable","name":{"kind":"Name","value":"newPassword"}}}]}]}}]} as unknown as DocumentNode<ResetPasswordMutation, ResetPasswordMutationVariables>;
+export type ResetPasswordMutationVariables = Types.Exact<{
+  email: Types.Scalars['String'];
+  resetPasswordToken: Types.Scalars['String'];
+  newPassword: Types.Scalars['String'];
+}>;
+
+
+export type ResetPasswordMutation = { resetPassword?: Types.Maybe<boolean> };

package/components/ResetPasswordForm/ResetPassword.graphql

@@ -0,0 +1,3 @@
+mutation ResetPassword($email: String!, $resetPasswordToken: String!, $newPassword: String!) {
+  resetPassword(email: $email, resetPasswordToken: $resetPasswordToken, newPassword: $newPassword)
+}

package/components/ResetPasswordForm/index.tsx

@@ -0,0 +1,98 @@
+import { TextField } from '@material-ui/core'
+import { Button, Form, FormActions, FormRow } from '@graphcommerce/next-ui'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import { useRouter } from 'next/router'
+import React from 'react'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import {
+  ResetPasswordDocument,
+  ResetPasswordMutation,
+  ResetPasswordMutationVariables,
+} from './ResetPassword.gql'
+
+type ResetPasswordFormProps = {
+  token: string
+}
+
+export default function ResetPasswordForm(props: ResetPasswordFormProps) {
+  const { token } = props
+
+  const form = useFormGqlMutation<
+    ResetPasswordMutation,
+    ResetPasswordMutationVariables & { confirmPassword?: string }
+  >(ResetPasswordDocument, {
+    onBeforeSubmit: (formData) => ({
+      ...formData,
+      resetPasswordToken: token,
+    }),
+  })
+
+  const router = useRouter()
+  const { muiRegister, handleSubmit, required, watch, data, formState, error } = form
+  const submitHandler = handleSubmit(() => {})
+  const newPass = watch('newPassword')
+
+  if (formState.isSubmitSuccessful && data) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    router.replace(`${window.location.href.split('?')[0]}?success=1`)
+  }
+
+  return (
+    <Form onSubmit={submitHandler} noValidate>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='email'
+          error={!!formState.errors.email}
+          label='Email'
+          required={required.email}
+          {...muiRegister('email', { required: required.email })}
+          helperText={formState.errors.email?.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}
+        />
+      </FormRow>
+      <FormRow>
+        <TextField
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.confirmPassword}
+          label='Confirm password'
+          required
+          {...muiRegister('confirmPassword', {
+            required: true,
+            validate: (value) => value === newPass || "Passwords don't match",
+          })}
+          helperText={formState.errors.confirmPassword?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <ApolloCustomerErrorAlert error={error} />
+
+      <FormActions>
+        <Button
+          type='submit'
+          loading={formState.isSubmitting}
+          color='primary'
+          variant='contained'
+          size='large'
+          text='bold'
+        >
+          Save new password
+        </Button>
+      </FormActions>
+    </Form>
+  )
+}

package/components/SignInForm/SignIn.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 SignInDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignIn"},"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":"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<SignInMutation, SignInMutationVariables>;
+export type SignInMutationVariables = Types.Exact<{
+  email: Types.Scalars['String'];
+  password: Types.Scalars['String'];
+}>;
+
+
+export type SignInMutation = { generateCustomerToken?: Types.Maybe<{ token?: Types.Maybe<string> }> };

package/components/SignInForm/SignIn.graphql

@@ -0,0 +1,5 @@
+mutation SignIn($email: String!, $password: String!) {
+  generateCustomerToken(email: $email, password: $password) {
+    token
+  }
+}

package/components/SignInForm/SignInForm.tsx

@@ -0,0 +1,96 @@
+import { useQuery } from '@apollo/client'
+import { FormControl, Link, makeStyles, TextField, Theme } from '@material-ui/core'
+import { Alert } from '@material-ui/lab'
+import { graphqlErrorByCategory } from '@graphcommerce/magento-graphql'
+import { FormRow, Button, FormActions } from '@graphcommerce/next-ui'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import PageLink from 'next/link'
+import React from 'react'
+import { CustomerTokenDocument } from '../../hooks'
+import ApolloCustomerErrorAlert from '../ApolloCustomerError/ApolloCustomerErrorAlert'
+import { SignInDocument } from './SignIn.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    forgotPass: {
+      whiteSpace: 'nowrap',
+    },
+  }),
+  { name: 'SignIn' },
+)
+
+type SignInFormProps = { email: string }
+
+export default function SignInForm(props: SignInFormProps) {
+  const { email } = props
+  const classes = useStyles()
+  const { data } = useQuery(CustomerTokenDocument)
+  const form = useFormGqlMutation(
+    SignInDocument,
+    { defaultValues: { email } },
+    { errorPolicy: 'all' },
+  )
+
+  const { muiRegister, handleSubmit, required, formState, error } = form
+  const [remainingError, authError] = graphqlErrorByCategory({
+    category: 'graphql-authentication',
+    error,
+  })
+  const submitHandler = handleSubmit(() => {})
+
+  const requireAuth = Boolean(data?.customerToken && !data?.customerToken.valid)
+
+  return (
+    <form onSubmit={submitHandler} noValidate>
+      {requireAuth && (
+        <Alert severity='error' variant='standard'>
+          Your session has expired, please reauthenticate
+        </Alert>
+      )}
+
+      <FormRow>
+        <TextField
+          key='password'
+          variant='outlined'
+          type='password'
+          error={!!formState.errors.password || !!authError}
+          label='Password'
+          autoFocus
+          autoComplete='current-password'
+          id='current-password'
+          required={required.password}
+          {...muiRegister('password', { required: required.password })}
+          FormHelperTextProps={{
+            className: classes.forgotPass,
+          }}
+          InputProps={{
+            endAdornment: (
+              <PageLink href='/account/forgot-password' key='forgot-password' passHref>
+                <Link className={classes.forgotPass}>Forgot password?</Link>
+              </PageLink>
+            ),
+          }}
+          helperText={formState.errors.password?.message || authError?.message}
+          disabled={formState.isSubmitting}
+        />
+      </FormRow>
+
+      <ApolloCustomerErrorAlert error={remainingError} key='error' />
+
+      <FormActions>
+        <FormControl>
+          <Button
+            type='submit'
+            loading={formState.isSubmitting}
+            color='primary'
+            variant='contained'
+            size='large'
+            text='bold'
+          >
+            Log In
+          </Button>
+        </FormControl>
+      </FormActions>
+    </form>
+  )
+}

package/components/SignInForm/SignInFormInline.tsx

@@ -0,0 +1,68 @@
+import { makeStyles, TextField, Theme } from '@material-ui/core'
+import { Button, Form } from '@graphcommerce/next-ui'
+import { useFormGqlMutation } from '@graphcommerce/react-hook-form'
+import PageLink from 'next/link'
+import React, { PropsWithChildren } from 'react'
+import { SignInDocument, SignInMutationVariables } from './SignIn.gql'
+
+const useStyles = makeStyles(
+  (theme: Theme) => ({
+    form: {
+      display: 'grid',
+      alignItems: 'center',
+      gridRowGap: theme.spacings.sm,
+      gridColumnGap: theme.spacings.xs,
+      gridTemplateColumns: '1fr',
+      [theme.breakpoints.up('sm')]: {
+        gridTemplateColumns: '5fr 1fr',
+      },
+    },
+    button: {
+      minWidth: 'max-content',
+    },
+  }),
+  { name: 'SignInFormInline' },
+)
+
+type InlineSignInFormProps = Omit<SignInMutationVariables, 'password'>
+
+export default function SignInFormInline({ email }: PropsWithChildren<InlineSignInFormProps>) {
+  const classes = useStyles()
+  const form = useFormGqlMutation(
+    SignInDocument,
+    { defaultValues: { email } },
+    { errorPolicy: 'all' },
+  )
+  const { muiRegister, handleSubmit, required, formState, error } = form
+  const submitHandler = handleSubmit(() => {})
+
+  return (
+    <form onSubmit={submitHandler} noValidate className={classes.form}>
+      <TextField
+        variant='outlined'
+        type='password'
+        error={!!formState.errors.password || !!error?.message}
+        label='Password'
+        autoFocus
+        autoComplete='current-password'
+        id='current-password'
+        required={required.password}
+        {...muiRegister('password', { required: required.password })}
+        helperText={error?.message}
+        disabled={formState.isSubmitting}
+        InputProps={{
+          endAdornment: (
+            <PageLink href='/account/forgot-password' key='forgot-password' passHref>
+              <Button color='secondary' variant='text' className={classes.button}>
+                Forgot password?
+              </Button>
+            </PageLink>
+          ),
+        }}
+      />
+      <Button type='submit' loading={formState.isSubmitting} color='secondary' variant='pill'>
+        Sign in
+      </Button>
+    </form>
+  )
+}

package/components/SignOutForm/SignOutForm.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 SignOutFormDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"SignOutForm"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"revokeCustomerToken"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"result"}}]}}]}}]} as unknown as DocumentNode<SignOutFormMutation, SignOutFormMutationVariables>;
+export type SignOutFormMutationVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type SignOutFormMutation = { revokeCustomerToken?: Types.Maybe<{ result: boolean }> };

package/components/SignOutForm/SignOutForm.graphql

@@ -0,0 +1,5 @@
+mutation SignOutForm {
+  revokeCustomerToken {
+    result
+  }
+}